webpack4的學習筆記

"scripts"

:

7、 在根目錄下建立webpack.config.js檔案，檔名必須是webpack.config

const path =

require
('path');
//處理路徑資訊
const config =
, module:,,
,]}]
},//外掛程式，用於生產模板和各項功能
plugins:
,//配置webpack開發伺服器功能
devserver:
}module.exports = config

在index.js裡要寫上import 『…/css/index.css』var $=require(『jquery』)引入css和全域性使用jq

9、 開始打包，命令 npm run build

打包成功後

10、 將專案部署到服務端（配置development環境下的除錯服務）

在第一步的時候已經安裝了webpack-dev-server，而且在第七步的時候也配置好了devserver，如果打包也沒問題的話，直接使用命令npm run start

成功的話如下，http://localhost:9999/ 就是訪問目標

2、在webpack.config.js中，webpack4.0以上module用的是rules，而不是loaders

3、index.html不能和webpack.config.js放在同級下，需要放在dist下，訪問http://localhost:9999/的時候就可以直接顯示出來，不然會顯示如下圖的情況

ps：目前學習的進度就這樣吧，以後工作有用到的話在繼續更新

最後，如果我的筆記對您有幫助，請給我乙個贊~ 謝謝！

webpack4學習筆記 一）

在js檔案中我們用import引入各種模組的時候，瀏覽器是不會識別的，我們可以用webpack把這些模組打包到一塊再進行執行，直白的說webpack就是模組打包工具 總共有兩種方式 步驟 const path require path module.exports 補充 如果我們不想讓webpack...

學習webpack4 基礎配置

學習webpack4 基礎配置 學習webpack4 html處理 學習webpack4 樣式處理 學習webpack4 es6語法轉化 學習webpack4 第三方庫的使用 學習webpack4 抽離公共 yarn init y 初始化專案 yarn add webpack webpack cli...

學習webpack4 基礎配置

學習webpack4 基礎配置 學習webpack4 html處理 學習webpack4 樣式處理 學習webpack4 es6語法轉化 學習webpack4 第三方庫的使用 學習webpack4 抽離公共 yarn init y 初始化專案 yarn add webpack webpack cli...