一、准备工作1. 新建目录webpack-abc, 进入文件夹目录下依次执行如下命令npm init -y npm i webpack webpack-cli webpack-dev-server html-webpack-plugin babel/core babel-loader babel/preset-env babel/preset-react -D2. 新建public目录- index.html3. 执行一下npx webpack二、webpack优化时使用到的属性1. noParsemodule中的一个属性作用不去解析指定的库依赖提高打包效率。当 webpack去解析 jquery的时候会去解析jquery这个库是否依赖其他的包。我们对于这类不会依赖其他包的库我们在打包时没有必要去解析提高打包效率。npm i jquery -D在 indexjs 中引入 import jquery from jquery;exports { ... module: { // 不解析 noParse: /jquery/, rules: [ ... ] } }然后执行 npx webpack看看打包的大小。2. IgnorePlugin 各插件使用作用忽略指定的第三方包目录打包时不要被打进去。如我们要使用moment这个依赖库支持多个国家语言。npm i moment -D在indexjs中引入import moment frommoment; // 引入中文 import moment/locale/zh-cn; moment.locale(zh-cn); let tt moment().endOf(day).fromNow( console.log(tt)在webpack.configjs中添加// 插件 plugins:[ // 打包忽略掉./locale/目录内容 new webpack.IgnorePlugin({ resourceRegExp:/^\.\/locale$/, contextRegExp: /moment$/, }), new HtmIWebpackPlugin({ template:./public/index.html,//页面模版 }) ],3. dllPlugin这是webpack内置插件实现了拆分bundles 提升构建速度。举例我们打包一个React项目,把一些不常改动的依赖包如:react, react-dom, axios,antd等单独打包好然后以动态链接的方式引入即可。第二次打包时就会发现这些包已经打包好了不需要再打包这样可以提升性能。4. tree-shaking、scope-hosting这是生产环境下webpack的两个内置优化。tree-shaking自动去除import引入但没有使用的代码。scope-hosting提升作用域。如、累加和的直接加载结果。5. splitChunks抽离公共代码提取成公共chunkwebpack.configjs 使用optimization的splitChunks属性如果只有一个入口就不用分离了只有多页才需要公共的代码抽离出来。module.exports { optimization:{ splitChunks:{ // 如果只有一个入口就不用分离了只有多页才需要公共的代码抽离出来。 common:{ chunks: initial, // 刚开始就要抽离。 minChunks: 2, // 代码重复2次引用时就具备抽离成公共chunk资格。 minSize: 0, // 大小大于0字节的时候要抽离出来。 } } } }6.懒加载这里就是按需加载。场景点击按钮时候需要动态加载xxjs并读取该文件导出的内容。// 使用语法动态导入插件babel/plugin-syntax-dynamic-import打包的时候就会打成xxjs文件,然后按需去动态加载import(./xx.js).then(data {console.log(data.default)})7.热更新热更新是指对数据变化的局部进行更新而不进行页面刷新。使用内置插件NamedModulePlugin作用打印热更新的模块路径使用内置插件HotModuleReplacementPlugin,作用热更新插件let path require(path) let webpack require(webpack)// 1. let HtmlWebpackPlugin require(html-webpack-plugin) module.exports { devServer:{ port: 300, open: true, contentBase:./dist, hot: true, // 2.启用热更新 }, ... plugin:[ new webpack.NamedModulePlugin(), //打印热更新的模块路径 new webpack.HotModuleReplacementPlugin(), // 3.热更新插件 new HtmlWebpackPlugin({ template:./src/index.html, filename:index.html, }) ] }8.loader解析时指定或者排除解析目录exclude:不解析的目录,include:解析的目录两者写其一即可。oneOf: 匹配到一个loader后面的就不继续匹配了。