前言

上一篇文章讲的如何使用 webpack 项目地址： 搭建一个简易的项目使用 webpack4 从0开始搭建 react 项目。这一篇将基于上篇文章项目继续做项目优化、环境区分。

一、分离 css 样式，生成 css 文件

项目中我们一般使用 less/sass 来写样式，这里的话以 less 为例，首先我们安装

npm i less less-loader -D

使用 less-loader

{

    test: /\.(css|less)$/,

    use: ['style-loader', 'css-loader', 'less-loader']

}

在 入口文件 中引入 less 文件

// index.less

body {

    background: red;

    div {

        display: flex;

        color: #fff;

    }



    span {

        color: blue;

    }

}

postcss-loader 帮你将现代 CSS 语法转换成大多数浏览器都能理解的东西，根据你的目标浏览器或运行时环境来确定你需要的 polyfills，基于 cssdb 实现。 这里的话

使用 postcss-loader 来做浏览器适配，autoprefixer 会自动增加浏览器前缀。

现在样式还是通过 js 生成 style标签插入到页面当中，可以使用 MiniCssExtractPlugin 来生成 css 样式

npm i mini-css-extract-plugin postcss-loader autoprefixer -D

在 webpakc.config.js 中配置

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module: {

    rules: [

        {

            test: /\.(css|less)$/,

            use: [

                {

                    loader: MiniCssExtractPlugin.loader,

                    options: {

                        //  您可以在此处指定publicPath

                        //  默认情况下，它在webpackOptions.output中使用publicPath

                        publicPath: '../'

                    },

                    // 这里会直接到 src 文件下找 less/css 文件进行编译，这里是项目优化的一个小技巧

                    include: path.resolve(__dirname, './src')

                }, 'css-loader', 'postcss-loader', 'less-loader']

        },

    ]

}

plugins: [

    new MiniCssExtractPlugin({

        //  选项类似于webpackOptions.output中的相同选项

        //  所有选项都是可选的

        filename: "[name].css",

        chunkFilename: "[id].css",

        ignoreOrder ：false ，//  启用以删除有关顺序冲突的警告 

    })

]

根目录下新建 postcss.config.js 来配置 postcss

module.exports = {

    plugins: [

        require('autoprefixer')({

            overrideBrowserslist: ['last 2 versions', '>1%']

        })

    ]

}

现在只需要将 css 压缩并且开启 tree shanking (摇树)功能，Css就配置完成了。

安装

// tree shanking 需要的插件

npm i glob-all purifycss-webpack purify-css -D

// cssnano 将你的 CSS 文件做 多方面的的优化，以确保最终生成的文件 对生产环境来说体积是最小的。

// web️对于webpack v3或更低版本，请使用optimize-css-assets-webpack-plugin@3.2.0。该optimize-css-assets-webpack-plugin@4.0.0版本及以上支持的WebPack V4。

npm i optimize-css-assets-webpack-plugin cssnano -D

在 webpack.config.js 中使用

// 压缩 Css 文件

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

// 用于处理多路径文件，使用purifycss的时候要用到glob.sync方法。

const glob = require('glob-all')

// Css tree shanking 摇树

const purifyCss = require('purifycss-webpack')

{

    plugins: [

        // 压缩css文件

        new OptimizeCssAssetsWebpackPlugin({

            cssProcessor: require('cssnano'),

            cssProcessorPluginOptions: {

                // 去掉注释

                preset: ["default", { discardComments: { removeAll: true } }]

            }

        }),

        new purifyCss({

            paths: glob.sync([

                path.resolve(__dirname, './*html'),

                path.resolve(__dirname, './src/*js')

            ])

        })

    ]

}

二、Optimization

通过webpack打包提取公共代码

optimization: {

    // js 开启 tree shanking

    usedExports: true,

    splitChunks: {

        chunks: "all", // 代码分隔 公共代码分离出来

        name: true,

        cacheGroups: {

            // [\\/] 解决系统之间的兼容

            react: {

                test: /[\\/]react|react-dom[\\/]/,

                name: 'react'

            },

            lodash: {

                test: /[\\/]lodash[\\/]/,

                name: 'lodash'

            }

        }

    }

},

minimize

如果mode是production类型，minimize的默认值是true，执行默认压缩，

minimizer

允许你使用第三方的压缩插件，可以在optimization.minimizer的数组列表中进行配置

splitChunks

splitChunks: {

    chunks: "all", // 默认作用于异步chunk，值为all/initial/async/function(chunk),值为function时第一个参数为遍历所有入口chunk时的chunk模块，chunk._modules为chunk所有依赖的模块，通过chunk的名字和所有依赖模块的resource可以自由配置,会抽取所有满足条件chunk的公有模块，以及模块的所有依赖模块，包括css

    minSize: 30000,  //表示在压缩前的最小模块大小,默认值是30kb

    minChunks: 1,  // 表示被引用次数，默认为1；

    maxAsyncRequests: 5,  //所有异步请求不得超过5个

    maxInitialRequests: 3,  //初始话并行请求不得超过3个

    automaticNameDelimiter:'~',//名称分隔符，默认是~

    name: true,  //打包后的名称，默认是chunk的名字通过分隔符（默认是～）分隔

    cacheGroups: { //设置缓存组用来抽取满足不同规则的chunk,下面以生成common为例

        common: {

            name: 'common',  //抽取的chunk的名字

            chunks(chunk) { //同外层的参数配置，覆盖外层的chunks，以chunk为维度进行抽取

            },

            test(module, chunks) {  //可以为字符串，正则表达式，函数，以module为维度进行抽取，只要是满足条件的module都会被抽取到该common的chunk中，为函数时第一个参数是遍历到的每一个模块，第二个参数是每一个引用到该模块的chunks数组。自己尝试过程中发现不能提取出css，待进一步验证。

            },

            priority: 10,  //优先级，一个chunk很可能满足多个缓存组，会被抽取到优先级高的缓存组中

            minChunks: 2,  //最少被几个chunk引用

            reuseExistingChunk: true，//  如果该chunk中引用了已经被抽取的chunk，直接引用该chunk，不会重复打包代码

            enforce: true  // 如果cacheGroup中没有设置minSize，则据此判断是否使用上层的minSize，true：则使用0，false：使用上层minSize

        }

    }

}

更多配置请参考 webpack-optimizationsplitchunks

三、resolve

resolve: {

    // 规定在那里寻找第三方模块

    modules: [path.resolve(__dirname, './node_modules')],

    // 别名 我们可以通过别名的方式快速定位到引用包的/方法的路劲，优化打包和运行本地服务

    alias: {

        react: path.resolve(__dirname, './node_modules/react/umd/react.production.min.js'),

        'react-dom': path.resolve(__dirname, './node_modules/react-dom/umd/react-dom.production.min.js'),

        '@': path.resolve(__dirname, './src')

    },

    // 自动补齐后缀名，这个列表会让webpack一级一级寻找，尽量少配置

    extensions: ['.js', '.jsx']

},

更多配置请参考 webpack-resolve

四、js 开启 tree shanking

webpack 内置了 js 的摇树功能，在生产环境下，Tree-shaking会进行自动删除的操作

如果通过ES6的import引用的方式就会把没有用到的代码给删除掉。

在 package.json 中配置

{

    "sideEffects": false

}

打包后会发现引用的 less 文件也会被过滤。因为webpack 人为 less 文件引用但是未被使用。

修改一下 sideEffects 的值

{

    "sideEffects": [

        "*.css",

        "*.less"

    ]

}

五、DllPlugin

引用官方描述：

这个插件是在一个额外的独立的 webpack 设置中创建一个只有 dll 的 bundle(dll-only-bundle)。 这个插件会生成一个名为 manifest.json 的文件，这个文件是用来让 DLLReferencePlugin 映射到相关的依赖上去的。

简单说就是讲公共依赖缓存起来，不用每次运行都打包一遍

根目录下新建 webpack.dll.config.js

const path = require('path')

const { DllPlugin } = require('webpack')

module.exports = {

    entry: {

        react: ['react', 'react-dom']

    },

    mode: 'development',

    output: {

        path: path.resolve(__dirname, './dll'),

        filename: "[name].dll.js",

        library: 'react'

    },

    plugins: [

        new DllPlugin({

            // 生成一个 manifest.json 文件，并指定位置

            path: path.join(__dirname, './dll', '[name]-manifest.json'),

            name: 'react' // name 要和 labray 名称一致

        })

    ]

}

package.json 中新增命令

scripts: {

    "dev:dll": "webpack --config ./webpack.dll.config.js",

}

运行 npm run dev:dll 后会在根目录下生成一个 dll 文件

在 webpack.config.js 中使用

const webpack = require('webpack')

{

    plugins: [

        new webpack.DllReferencePlugin({

            manifest: path.resolve(__dirname, './dll/react-manifest.json')

        }),

    ]

}

到目前为止还需要在 index.html 中手动引入生成的 react.dll.js 文件才算配置完成，这里的话我们借助插件 AddAssetHtmlWebpackPlugin 可以帮你自动添加 js 到 html 中

安装

npm i add-asset-html-webpack-plugin -D

webpack.config.js 中使用

const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');

{

    plugins: [

        new AddAssetHtmlWebpackPlugin({

            filepath: path.resolve(__dirname, './dll/react.dll.js')

        })

    ]

}

六、环境区分

image

到目前为止 我们 webpack.config.js 文件已经非常庞大了。很多生产环境和开发环境的配置也是冲突的

这里就要区分环境了，这里我们需要安装几个包帮助我们来合并 webpack 配置对象，通过命令传参 等

// 合并 webpack 配置对象

npm i webpack-merge -D

// 在执行命令的时候传参

npm i cross-env -D

根目录下新建 webpack.dev.config.js / webpack.pro.config.js，将 webpack.config.js 改名为 webpack.base.config.js

webpack.base.config.js

// webpack 默认配置

const path = require('path');

const htmlWebpackPlugin = require('html-webpack-plugin');

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {

    entry: path.resolve(__dirname, './src/react.js'),

    output: {

        path: path.resolve(__dirname, './dist'),

        filename: 'main_[hash:8].js'

    },

    module: {

        rules: [

            {

                test: /\.css|less$/,

                use: [

                    {

                        loader: MiniCssExtractPlugin.loader,

                        options: {

                            //  您可以在此处指定publicPath

                            //  默认情况下，它在webpackOptions.output中使用publicPath

                            publicPath: '../'

                        }

                    }, 'css-loader', 'postcss-loader', 'less-loader'

                ],

                // 这里会直接到 src 文件下找 less/css 文件进行编译，这里是项目优化的一个小技巧

                include: path.resolve(__dirname, './src')

            },

            {

                test: /\.(png|jpg|gif)$/,

                use: [

                    {

                        loader: 'file-loader',

                        options: {},

                    },

                ],

            },

            {

                test: /\.js$/,

                loader: 'babel-loader'

            },

        ]

    },

    plugins: [

        // 复制一个 html 并将最后打包好的资源在 html 中引入

        new htmlWebpackPlugin({

            // 页面title 需要搭配 ejs 使用

            title: "webpack-react",

            // html 模板路径

            template: "./index.html",

            // 输出文件名称

            filename: "index.html",

            minify: {

                // 压缩HTML⽂件

                removeComments: true, // 移除HTML中的注释

                collapseWhitespace: true, // 删除空⽩符与换⾏符

                minifyCSS: true // 压缩内联css

            }

        }),

        // 每次部署时清空 dist 目录

        new CleanWebpackPlugin(),

        new MiniCssExtractPlugin({

            filename: "css/[name]_[contenthash:6].css",

        })

    ],

    resolve: {

        // 规定在那里寻找第三方模块

        modules: [path.resolve(__dirname, './node_modules')],

        // 别名

        alias: {

            react: path.resolve(__dirname, './node_modules/react/umd/react.production.min.js'),

            'react-dom': path.resolve(__dirname, './node_modules/react-dom/umd/react-dom.production.min.js'),

            '@': path.resolve(__dirname, './src')

        },

        // 自动补齐后缀名

        extensions: ['.js', '.jsx']

    },

}

修改 webpack.dev.config.js

// webpack 默认配置

const path = require('path');

const webpack = require("webpack");

// 引入js到 html 文件中

const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');

const merge = require('webpack-merge');

const webpackBase = require('./webpack.base.config');

// merge 用法和 Object.assign 类似

module.exports = merge(webpackBase, {

    mode: 'development',

    plugins: [

        // 启用模块热替换(HMR - Hot Module Replacement)

        new webpack.HotModuleReplacementPlugin(),

        new webpack.DllReferencePlugin({

            manifest: path.resolve(__dirname, './dll/react-manifest.json')

        }),

        new AddAssetHtmlWebpackPlugin({

            filepath: path.resolve(__dirname, './dll/react.dll.js')

        })

    ],

    devtool: 'cheap-module-eval-source-map',

    // // 启动项目

    devServer: {

        contentBase: './dist',

        open: true,

        port: 8081,

        hot: true,

        hotOnly: true

    },

})

webpack.pro.config.js

// webpack 默认配置

const path = require('path');

// 压缩 Css 文件

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

// 用于处理多路径文件，使用purifycss的时候要用到glob.sync方法。

const glob = require('glob-all')

// Css tree shanking 摇树

const purifyCssWebpack = require('purifycss-webpack')

module.exports = {

    mode: 'production',

    plugins: [

        // 压缩css文件

        new OptimizeCssAssetsWebpackPlugin({

            cssProcessor: require('cssnano'),

            cssProcessorPluginOptions: {

                // 去掉注释

                preset: ["default", { discardComments: { removeAll: true } }]

            }

        }),

        new purifyCssWebpack({

            paths: glob.sync([

                path.resolve(__dirname, './src/*html'),

                path.resolve(__dirname, './src/*js')

            ])

        }),

    ],

    optimization: {

        // js 开启 tree shanking

        usedExports: true,

        splitChunks: {

            chunks: "all", // 代码分隔 公共代码分离出来

            name: true,

            cacheGroups: {

                react: {

                    test: /[\\/]react|react-dom[\\/]/,

                    name: 'react'

                },

                lodash: {

                    test: /[\\/]lodash[\\/]/,

                    name: 'lodash'

                }

            }

        }

    }

}

修改 package.json 文件

"scripts": {

    "dev": "webpack ",

    "dev:dll": "webpack --config ./webpack.dll.config.js",

    "server": "webpack-dev-server --config ./webpack.dev.config.js",

    // 这里通过 cross-env 传了一个 NODE_ENV 变量 可以通过 process.env.NODE_ENV 获取变量的值

    "build": "cross-env NODE_ENV=production webpack --config ./webpack.pro.config.js"

},

七、happypack

webpack 在 node 环境下运行也是单线程，所有操作都要等待上一步完成。这里可以借助 happypack 的多线程的功能，给 webpack 开个挂，实现多进程打包

由于HappyPack 对file-loader、url-loader支持的不友好，所以不建议对该loader使用。

安装

npm i happypack -D

webpack.base.config.js 中配置一下

const Happypack = require('happypack');

//构造出一个共享进程池，在进程池中包含4个子进程

const happyThreadPool = Happypack.ThreadPool({

    size: 4

})

module: {

    rules: [

        {

            test: /\.js$/,

            use: 'Happypack/loader?id=happypackJs',

            include: path.resolve(__dirname, './src')

        }

    ]

},

plugins: [

    new Happypack({

        // 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件

        id: 'happypackJs',

        // 如何处理 .js 文件，用法和 Loader 配置中一样

        use: ['babel-loader'],

        //使用共享进程池中的自进程去处理任务

        threadPool: happyThreadPool,

        //是否允许happypack输出日志，默认true

        verbose: true

    }),

]

总结

到目前为止 webpack 篇章就算结束了，后续的话我将来写一下 Vue 源码实现相关的文章，你的点赞就是我的动力，请求一个点赞+关注。感谢。