webpack簡述

webpack簡單來説就是一個模塊打包器，也是目前最流行的前端構建工具之一，他將整個項目根據依賴關係通過各種loader與plugin的處理後進行打包；可以實現對代碼的各種處理，比如less、sass、stylus的解析，ecmascript版本的轉換、代碼的壓縮分割等等

webpack之loader

loader可以説是webpack最核心的部分，前面所説的各種功能大部分就是又他完成的;loader簡單來説就是一個導出為函數的JavaScript模塊，webpack會配置文件申明的倒序調用loader，傳入資源文件，經loader處理後傳給下一loader或者webpack處理

常用loader

1.sass-loader、less-loader、stylus-loader、style-loader、css-loader
2.babel-loader
3.file-loader、url-loader
4.vue-loader
5.string-loader

webpack之plugin

plugin是webpack的重要組成部分，他能以各種鈎子鈎入每個編譯(compilation)中觸發的所有關鍵事件，插件都具備完全訪問compiler對象的能力

常用plugin

1.HtmlWebpackPlugin，將入口js文件添加至html，並移至輸出目錄，可實現html壓縮，去除引號等一些優化功能
2.CleanWebpackPlugin，每次打包之前清空指定目錄
3.HotModuleReplacementPlugin，熱更新代碼，開發時使用
4.DefinePlugin，定義每個模塊都能訪問的變量
5.DllPlugin、DllReferencePlugin，預編譯模塊，可優化webpack打包速度
6.VueLoaderPlugin；將loader配置應用於vue單文件組件

以下是詳細配置

webpack版本：4.x.x

{
    mode: 'development', // production:生產,會壓縮代碼；development:開發，不會壓縮代碼，便於debug
    
    devtool: 'inline-source-map',// 添加source map;便於debug,但會嚴重影響性能，千萬不要在生產環境使用

    // webpack打包的入口
    entry: {
        app: './src/index.js', // 路徑相對於package.json
        // app: ['./vue.js', './src/index.js']
    },

    // 文件輸出
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, '../dist') // 輸出的目錄，默認為dist
    },
    optimization: {
        runtimeChunk: true,// 將webpack打包後的主文件單獨分離，默認是將主文件放在入口文件當中，當需要在入口文件之前引入打包的公共代碼時需要用到，此項建議對webpack有一定了解後再理解，關於打包後的代碼分析我會單獨寫一篇

        // 抽離公共代碼
        splitChunks: {
            cacheGroups: {
                vendor: { // 抽離第三方插件
                    test: /node_modules/, // 指定是 node_modules 下的第三方包
                    chunks: 'initial', // initial 對於異步導入的文件不處理;async 異步chunk，只對異步導入的文件處理;all 全部chunk
                    name: 'common/vendor', // 打包後的文件名，任意命名,會逆優化首屏加載的速度,慎用，建議每個公共代碼塊都單獨抽離或者手動配置
                    priority: 10 // 設置優先級，防止和自定義的公共代碼提取時被覆蓋，不進行打包
                },
                utils: { // 抽離自定義公共代碼
                    test: /\.js$/,
                    chunks: 'initial',
                    name: true, // 每個頁面的包只包含需要的文件,不會影響首屏加載的速度，good job
                    minSize: 0 // 只要超出 0 字節就生成一個新包,默認30000B
                }
            }
        }
    },
    module: {
        rules: [

            // 打包css文件需要用到的loader
            // 注意：loader的執行順序是後面的先執行
            //      style-loader必須在css-loader的前面
            {
                test: /\.css$/,
                use: [

                    // 將css文件以style標籤形式插入
                    {
                        loader: 'style-loader',
                        options: {
                            singleton: true // 設置為true,多個css文件會在同一個style標籤內
                        }
                    },
                    'css-loader'
                ],
                include: path.resolve(__dirname, '../src') // 只處理對應目錄下的文件，構建性能提升
            },

            {
                test: /\.js$/,
                use: [
                    'babel-loader', // 配置babel轉換代碼
                ],
                exclude: path.resolve(__dirname, '../node_modules')
            }
        ]
    },
    plugins: [

        // 在每次打包前清理dist目錄
        // 注意配置刪除dist目錄下的所有文件，而不是dist目錄，因為當dist目錄其他程序打開時將無法刪除
        new CleanWebpackPlugin(['dist/*'], {
            root: path.resolve(__dirname, '../')
        }),

        // 用於處理入口html，如自動注入entry對應js,並拷貝至壓縮目錄等等
        new HtmlWebpackPlugin({
            template: './src/index.html',

            // 壓縮html
            minify: {
                removeComments: true, // 刪除註釋
                collapseWhitespace: true, // 刪除空格
                removeAttributeQuotes: true // 刪除屬性的引號
            }
        })
    ],
    
    // 配置後webpack會跳過對應模塊的打包，當使用cdn時需要用到，此項能提升構建性能與前端性能
    externals: {
        vue: 'vue'
    }
}