webpack 从0开始搭建 react（优化篇）

前言

上一篇文章讲的如何使用 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或更低版本，请使用[email protected]。该[email protected]版本及以上支持的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')
        })
    ]
}

六、环境区分

到目前为止 我们 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 源码实现相关的文章，你的点赞就是我的动力，请求一个点赞+关注。感谢。