{"componentChunkName":"component---src-templates-blog-post-js","path":"/2019/08/08/【webpack配置】一、常用基础插件🎉/","result":{"data":{"content":{"edges":[{"node":{"id":"9cc10200-df39-568b-a59b-5a05e0a78723","html":"

初始化目录

\n
    \n
  1. yarn init -y
    2. \n
  2. yarn add webpack webpack-cli webpack-dev-server --dev
    3. \n
  3. 根目录初始化一个html, 加入一个id为app的div节点（为了之后react挂载）
    4. \n
  4. 创建src/index.js.
    5. \n
\n
import _ from 'lodash';\nexport default _.join;
\n
    \n
  1. package.json中加入脚本配置。笔者机器上目前的npm版本为3.x.x，5.2以上的npm版本也可以使用npx命令。
    2. \n
\n
\"build:dev\": \"rm -rf dist && ./node_modules/.bin/webpack --mode development\",\n\"build\": \"rm -rf dist && ./node_modules/.bin/webpack --mode production\"
\n
    \n
  1. 分别执行两个脚本，发现dev模式产出size为552kb,prod模式为70.6kb，生产环境进行了代码压缩混淆。我们在index.js里加一行console.log(process.env.NODEENV)，打包后执行node dist/main.js，可以发现process.env.NODEENV变量已被注入到脚本执行环境的全局变量中。
    2. \n
\n

webpack配置文件

\n

为了更细粒化定制打包工具，我们需要手写webpack配置以支持生产环境。先定一个小目标，让我们输出一个支持react组件的html页面。

\n
    \n
  1. yarn add @babel/core @babel/polyfill @babel/preset-env @babel/preset-react babel-loader --dev
    2. \n
  2. 写一个简单的组件
    3. \n
\n
    import React from 'react';\n    import ReactDOM from 'react-dom';\n    import {join} from 'lodash';\n\n    const Comp = () => <div>\n        {join(['Hello', 'webpack'], ' ')}\n        <br />\n    </div>;\n    \n    ReactDOM.render(\n        <Comp />,\n        document.getElementById('app')\n    );
\n
    \n
  1. webpack配置如下，其中entry和path注释的为webpack默认值。我们基于contenthash输出output，引入了preset-env插件兼容new ES syntax，使用preset-react兼容JSX。
    2. \n
\n
module.exports = {\n    // entry: path.resolve(__dirname, 'src/index.js'),\n    output: {\n        // path: path.resolve(__dirname, 'dist')\n        filename: '[name].[contenthash].js'\n    },\n    plugins: [\n        new HtmlWebpackPlugin({\n            template: 'index.html'\n        }) // 将模版写入output path\n    ],\n    module: {\n        rules: [\n            {\n                test: /\\.m?js$/,\n                exclude: /node_modules/,\n                use: {\n                    loader: 'babel-loader',\n                    options: {\n                        presets: ['@babel/preset-env', '@babel/preset-react']\n                    }\n                }\n            }\n        ]\n    },\n    devServer: {\n        contentBase: path.join(__dirname, 'dist'),\n        compress: true,\n        port: 9000\n    }\n}
\n

执行webpack-dev-server，我们将在9000端口看到输出。

\n

split Chunks

\n

我们利用optimization对打包出的main.js进行拆分。

\n
    \n
  1. 首先加入runtimeChunk，可以看到有6.12Kb的webpack runtime被提取了出来，这部分代码是webpack用来进行模块解析时所需要的。这样，当我们hash模块变更时，runtime所包含的模块信息清单就会单独更新。
    2. \n
  2. 效果依然不明显，我们接下来配置splitChunks。
    3. \n
\n
splitChunks: {\n    chunks: 'all', // async只作用于异步模块，all针对所有模块，initial对同步模块生效\n    minSize: 0, // 合并前模块文件大小\n    minChunks: 1, // 最小被引用次数\n    automaticNameDelimiter: '-', // 命名链接符\n    cacheGroups: {  // 设置缓存chunk\n        vendors: {\n            test: /[\\\\/]node_modules[\\\\/]/,\n            minChunks: 1,\n            priority: -10 // 优先级更高\n        },\n        default: {\n            test: /[\\\\/]src[\\\\/]js[\\\\/]/,\n            minChunks: 2, // 非第三方，被引用两次以上\n            priority: -20,\n            reuseExistingChunk: true // 复用已有模块\n        }\n    }\n},
\n

修改后的开发环境打包结果如下：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AssetSizeChunks
index.html450 bytes
main.d4c9204ebd45eed48786.js3.39 KiBmain
runtime.acfdeda3904d25c72cbb.js6.12 KiBruntime
vendors-main.804e8227ca2da7b727a5.js1.91 MiBvendors-main
\n

可以看到，vendors即node_modules按我们的命名规则被提出来了。并且业务代码只有3.39Kb，这样我们每次修改代码时只会更新这3.39Kb的文件，大大提高了打包速度。

\n
    \n
  1. 在production模式，minimize默认为true会进行压缩混淆代码，我们也可以用uglifyJS实现定制。
    2. \n
\n
new UglifyJsPlugin({\n    exclude: /\\.min\\.js$/, // 已压缩文件不再处理\n    cache: '.cache', // 缓存文件夹\n    parallel: true, // 多进程\n    sourceMap: false,\n    extractComments: false,\n    uglifyOptions: {\n        compress: {\n            unused: true,\n            drop_debugger: true,\n            collapse_vars: true,\n            reduce_vars: true\n        },\n        output: {\n            comments: false // 不输出注释\n        }\n    }\n})
\n

dynamic import

\n

让我们添加一个promisePolyfill，并通过一个btn click动态引入它。

\n
import '@babel/polyfill';\n\nconst Comp = () => {\n    const onClick = e => {\n        const asyncModule = async () =>\n            await import(/* webpackChunkName: \"promise\" */ './promisePolyfill');\n        asyncModule().then(res => console.log(res.PromisePolyfill));\n    }\n    return (<div>\n        {join(['Hello', 'webpack'], ' ')}\n        <br />\n        <button onClick={onClick}>Click me and look at your console!</button>\n        <br />\n    </div>);\n}
\n

其中babel-polyfill的引入是为了支持async/await需要的regeneratorRuntime。webpack使用require.ensure标记异步模块，并通过window.webpackJsonp连接chunk文件。所以当我们调用import函数时，webpack使用一种类似jsonp的方式在文档头部动态添加script标签，再通过webpackJsonpCallback把异步函数加载到主文件供之后调用。\n打开DevTools Network我们可以看到，当我们点击按钮之后，promise脚本才开始下载，并且不会多次重复下载。

\n

dll config

\n

dll plugin用于将第三方模块打包到动态链接库中，二次加载时参考dll从打包好的一个js中获得模块。

\n
    \n
  1. 我们再写一个webpack配置输出dll缓存文件。
    2. \n
\n
const webpack = require('webpack');\nconst path = require('path');\nconst {CleanWebpackPlugin} = require('clean-webpack-plugin');\n// dll文件存放的目录\nconst dllPath = path.resolve(__dirname, './dll');\nmodule.exports = {\n    entry: {\n        // 把react, lodash放到一个单独的动态链接库\n        react: ['react', 'react-dom', 'lodash']\n    },\n    output: {\n        filename: '[name]-[hash].dll.js',\n        path: dllPath,\n        library: '_dll_[name]'\n    },\n    plugins: [\n        new CleanWebpackPlugin(),\n        new webpack.DllPlugin({\n            name: '_dll_[name]',\n            path: path.join(__dirname, './', '[name].dll.manifest.json')\n        })\n    ]\n};
\n
    \n
  1. 添加并执行dll命令\"./node_modules/.bin/webpack --mode production --config webpack.dll.config.js\"
    2. \n
  2. yarn run dll生成react.dll.manifest.json及打包react、lodash之后的模块js
    3. \n
  3. 此时dll文件是带有hash的，为了将js注入到页面上,这里我们借助add-asset-html-webpack-plugin。
    4. \n
\n
const autoAddDllRes = () => {\n  const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');\n  return new AddAssetHtmlPlugin([{   // 往html中注入dll js\n    publicPath: './dll/', // 注入到html中的路径\n    outputPath: 'dll', // 最终输出的目录\n    filepath: path.resolve('./dll/*.js'),\n    includeSourcemap: false,\n    typeOfAsset: 'js' // options js、css; default js\n  }]);\n};
\n
    \n
  1. webpack.config.js中添加plugin
    2. \n
\n
new webpack.DllReferencePlugin({\n    manifest: require('./react.dll.manifest.json')\n}),\nautoAddDllRes(),
\n

当不使用.cache及dll缓存时，build一次的时间为6000ms左右;使用dll时，二次构建的时间可以提升到3000ms。当然这里我们用到uglifyjs的cache文件夹时，打包速度会达到1000ms的量级，使得dll的配置效果不是那么明显。

\n

Tree Shaking

\n

Tree Shaking是指webpack利用ES6 import静态编译的特点, 打包时去除无用代码的一种方法。

\n
    \n
  1. @babel/preset-env的默认modules为auto，此时若在package.json指定没有sideEffects的话，webpack在production模式自动开启tree-shaking；
    2. \n
  2. 我们这里手动试验一下这个特性，写一个sideCode文件用ES6语法导出一个函数一个无用变量。
    3. \n
\n
  // sideCode.js\n  export const a = () => {};\n  export const unused = 'unused';
\n
    \n
  1. 避免杂项干扰，我们设置webpack mode为'none', optimization作如下配置：
    2. \n
\n
// providedExports: true,\nusedExports: true,\nminimize: true,\nminimizer: [\n    new UglifyJsPlugin({\n        exclude: /\\.min\\.js$/, // 已压缩文件不再处理\n        cache: '.cache', // 缓存文件夹\n        parallel: true, // 多进程\n        sourceMap: false,\n        extractComments: false,\n        uglifyOptions: {\n            compress: {\n                unused: true\n            },\n            output: {\n                beautify: true,\n                comments: false // 不输出注释\n            }\n        }\n    })\n]
\n

其中usedExports依赖默认为true的providedExports, 我们开启usedExports后，会发现导出的文件中包含 /* unused harmony export unused */的标示，此时我们开启minimize为true，由于compress中设置了unused为true，便发现再次打包时 我们的unused变量已经被去除了。

\n
    \n
  1. 需要注意一点的是，因为这个功能依赖ES6 import优先执行的特性，所以当我们显式设置 presets: [['@babel/preset-env', {modules: 'cjs'}]时，会发现我们的未使用变量又被打包进来了。所以必须告诉webpack不要转换模块。
    2. \n
\n

总结

\n

这篇主要介绍了配置webpack时经常涉及到的Code Split、Dynamic Import、Tree Shaking及DLL常用技巧，希望能够在日常工作中得以运用。

","fields":{"slug":"/【webpack配置】一、常用基础插件🎉/"},"tableOfContents":"","frontmatter":{"id":"d4b8d9c3ddc0e95c88f753df86ba56c7","description":"随着业务代码规模化，开发者对工程化也该引起足够重视。\n业务不断，优化不止。本着对最佳实践的持续探索，让我们从头开始，打怪升级成一名webpack配置攻城狮✌️","title":"【webpack配置】一、常用基础插件🎉","slug":"/","date":"2019年08月08日","tags":["webpack","工程化"],"headerImage":"https://2img.net/h/i968.photobucket.com/albums/ae170/laughingjacky/Blog%20Assets%202019/webpack-how-it-works_zpsu9wcudnq.png"}},"previous":null,"next":null}]},"site":{"siteMetadata":{"title":"王晓博 - 银河系漫游指南","description":"如果这个博客好久不更新了,说明我更浑浑噩噩了"}}},"pageContext":{"id":"9cc10200-df39-568b-a59b-5a05e0a78723","index":3}},"staticQueryHashes":[]}