打包指令

webpack --mode development/production

預設模式

在webpack打包時預設的位置是目前目錄下的

./src/index.js

通過指令

webpack --mode ./檔案夾/檔案 -o ./檔案夾/檔案夾 development

來自定義打包内容和輸出，打包輸出為

main.js

通過配置檔案配置

建立

webpack.config.js

作為配置檔案。

entry：打包的入口檔案
output：打包的輸出路徑
module：打包非js檔案時需要引入子產品
plugins：其它的一些插件，如ESlint
mode：打包的方法有開發模式和生産模式

entry

隻有一個入口時用字元串形式寫路徑
有多個入口時有兩種寫法
- 數組寫法：把所有入口檔案打包進同一個檔案
- 對象寫法：把入口檔案按鍵名分别打包
- 對象加數組寫法：按照上面的規則打包

打包html

使用插件

要在配置中引入插件來提供打包功能，sass或less用的是子產品

下載下傳插件：

npm i html-webpack-plugin -d

使用插件：在plush中

new

引入的插件，如果不寫執行個體化時的設定，會建立空的html引入打包的js檔案；執行個體時的參數見下面代碼的注釋。

打包多個html

plush數組中傳入多個插件的執行個體來打包，通過

chunk

放入打包的js名來引入。

entry: {
        vue: "./src/myVue/vue.js",
        test1: "./src/js/test.js",
        test2: "./src/js/index.js",
        test1Style: "./src/js/test1Style.js", // 用js來設定引入的css
},
output: {
        filename: "[name].js", // name對應entry裡的key
        path: path.resolve(__dirname, "build"),
},
plugins: [
    //? test1
        new HtmlWebpackPlugin({
            template: "./src/test1.html",
            filename: "test1.html",
            chunks: ["test1", "test1Style"], 
            minify: {
                //collapseWhitespace: true, //删除空格
                removeComments: true, // 删除注釋
            },
        }),
        //? test2
        new HtmlWebpackPlugin({
            template: "./src/test2.html",
            filename: "test2.html",
            chunks: ["vue", "test1"],
            minify: {
                //collapseWhitespace: true, //删除空格
                removeComments: true, // 删除注釋
            },
        }),
]

打包CSS

npm i css-loader style-loader -d

使用插件：在

module.rules

中放入設定

被打包的css通過

requre

引入一個js檔案，然後配置js檔案進需要使用的html

module: {
        rules: [
            //! 将樣式寫入head裡
            {
                test: /\.css$/, //? 比對css檔案
                use: ["style-loader", "css-loader"],
                // loader:"", //! 如果隻引入一個
            },
            {
                test: /\.less$/,
                use: ["style-loader", "css-loader", "less-loader"],
            },
        ],
},

// test1Style.js
require("../css/style.css");
require("../css/lessStyle.less");

打包Sass Less（打包進html）

npm i less less-loader -d

npm i node-sass sass-loader -d

使用插件：與打包css相似

打包Sass Less (打包為單獨檔案)

npm i mini-css-extract-plugin -d

使用插件：與使用打包html的插件相似需要在module中将原來的

style-loader

改為插件的

loader

靜态方法。

module:{
    rules:[
        //! 将樣式單獨引入
        {
            test: /\.css$/, //? 比對css檔案
            use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
        },
        {
            test: /\.less$/,
            use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader", "postcss-loader"],
        },
    ]
}

Css的浏覽器相容性

npm i postcss-loader postcss-preset-env -d

使用插件：在樣式子產品最後新加入

postcss-loader

；建立

postcss.config.js

檔案配置插件，然後在

package.json

中配置。

// postcss.config.js
module.exports = {
    plugins: [require("postcss-preset-env")()],
};

// package.json
{"browserslist": [
        "> 0.2%",
        "not dead"
]}

Css的壓縮

npm i optimize-css-assets-webpack-plugin -d

使用插件：在plugin中執行個體化插件。

plugins:[new OptimizeCssAssetsWebpackPlugin()],

打包圖檔資源

插件下載下傳：

npm i url-loader file-loader -d

在html中引入圖檔需要

npm i html-withimg-loader -d

開發伺服器

npm i webpack-dev-server -g -d

通過

webpack serve

來運作

在

webpack.config.js

中能通過

devServer

進行配置

删除無用代碼

删除js

在webpack中自帶了删除無用js代碼的工具，隻需要在運作webpack時處于pro模式，且js代碼是用ES6導入的，就可以進行删減。

删除css

npm i purgecss-webpack-plugin -d

插件使用：在

plugins

中添加插件執行個體

plugins:[new PurgecssPlugin({
    paths:golb.sync(`${Path.src}/**/*`,{ nodir:true })
})]

webpack的一些基本配置