好傢伙，到了打包釋出這一步了

1.配置打包命令：

在package.json 檔案的 scripts 節點下，新增 build 命令如下：

"scripts": {

"dev": "webpack serve", // 開發環境中，執行 dev 命令

"build": "webpack --mode production" //專案釋出時，執行 build 命令

}

（出現了！！，npm run build）

－－model是一個引數項，用來指定webpack的執行模式。production 代表生產環境，

進行程式碼壓縮和效能優化。（開發版本打包快，釋出版本包小）

注意：通過－－model指定的引數項（其優先順序更高），會覆蓋webpack.config.js 中的 model 選項。

2.優化圖片和js檔案的存放路徑

在webpack.config.js檔案中進行新增配置

output:{

//存放的目錄

    path: path.join(__dirname, 'dist'),

//生成的檔名

    filename: 'js/bundle.js'
｝,

把JavaScript檔案統一生成到js目錄中
在webpack.config.js 配置檔案的 output節點中，進行如下的配置：

output:{

    path:path.join(_dirname, 'dist'),

    // 明確告訴 webpack 把生成的 bundle.js 檔案存放到 dist 目錄下的 js 子目錄中
 

    filename: 'js/bundle.js'.

}        

現在打包後的檔案目錄更加規範了,js檔案在一個資料夾,圖片在一個資料夾,

但重複的打包,會讓dist資料夾中的檔案變得非常亂,所以我們又需要一個外掛來幫我們每次在打包前清除一下dist資料夾中的檔案

(所以說又是外掛的外掛)

3.安裝並配置 clean-webpack-plugin外掛

為了在每次打包釋出時自動清理掉dist目錄中的舊檔案，可以安裝並配置 clean-webpack-plugin外掛

// 1.安裝清理 dist 目錄的 webpack 外掛
npm install clean-webpack-plugin@3.0
 
.0-D

// 2.按需匯入外掛、得到外掛的建構函式之後，建立外掛的例項物件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const cleanPlugin =new CleanwWebpackPlugin()

// 3.把建立的 cleanPlugin 外掛例項物件，掛載到 plugins 節點中
plugins: [htmlPlugin, cleanPlugin], // 掛載外掛

關於配置，看他的名字叫做“ clean-webpack-plugin”那麼他一定是webpack的外掛，

去到npm的官網上可以看到，其具體的安裝方法和配置方法

如下：

 網站地址：clean-webpack-plugin - npm (npmjs.com)  //百度直接搜尋npm

關於安裝：

npm install --save-dev clean-webpack-plugin

去到webpack.config.js檔案進行配置：

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
//大寫字母開頭,構造方法
const webpackConfig = {
    plugins: [
       
        new CleanWebpackPlugin(),
    ],
};

至此,整個打包流程基本走完

That's all