webpack4配置(1)-打包一個js檔案

常用指令

• npm install == npm i
• npm install --save == npm i -S
• npm insall --save-dev == npm i -D
  兩者的區別：-D只在開發環境中使用，如loader,babel等；-S在生產環境和開發環境中都要使用，如Vue,jquery等。

配置流程

1. 新建一個空專案，然後初始化
   npm init
   然後會生成一個package.json檔案

   

2. 在專案本地安裝webpack,webpack4需要webpack-cli,一起安裝
   npm i -D webpack webpack-cli
   npm為5.x版本以上的話，會生產node_modules資料夾和package.lock.json檔案。

3. webpack在打包時，會預設尋找根目錄下的webpack.config.js配置檔案，打包入口檔案預設為src/index.js檔案，考慮到後續配置方便，在根目錄下建立相關資料夾和檔案，專案結構如圖所示：

我們手動來配置一下。開啟webpack.config.js檔案，寫入：

在index.html和index.js裡寫一些測試程式碼

4. 開始打包，開啟package.json檔案,在script裡新增一條：

即使用webpack打包，配置檔案為webpack.config.js。然後在終端輸入命令npm run dev.可以看到打包完成資訊，同時在專案目錄中多出來一個dist資料夾，裡面有打包生產的main.bundle.js檔案

5. 為方便在開發時檢視編譯效果，安裝webpack-dev-server,它可以在開發環境中提供很多服務，如開啟一個伺服器、熱更新、介面代理。首先，在本地區域性安裝：
npm i -D webpack-dev-server 然後將package.json中的script更改為：

其中--open指打包成功後自動開啟瀏覽器。
注意
webpack-dev-server打包後生成的檔案儲存在內容中而不是本地專案的dist目錄中，所以在index.html通過src="dist/main.bundle.js"的方式引入失敗，解決辦法如下：
（1）通過src="http://localhost:8000/main.bundle.js"的方式引入
（2）在webpack.config.js的output中新增一條

然後通過src="assets/main.bundle.js"的形式引入 6. 因為要多次修改程式碼進行構建，多次生成的dist會很多餘，所以在每次構建前先刪除之前的dist,安裝外掛clean-webpack-plugin: npm i -D clean-webpack-plugin 安裝成功後在webpack.config.js檔案中新增2句：