一、准备工作

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 -D

2. 新建public目录-> index.html
3. 执行一下

npx webpack

二、webpack优化时使用到的属性

1. noParse

module中的一个属性，作用：不去解析指定的库依赖，提高打包效率。
当 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 from'moment'; // 引入中文 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抽离公共代码：提取成公共chunk

webpack.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后面的就不继续匹配了。