基本使用
1，默认打包入口文件是 src 下面的 index.js 文件
2，webpack -v 是在系统-G 全局安装下才能使用的命令，在当前项目下看版本使用 npx webpack -v
3，查看 webpack 的所有版本信息命令：npm info webpack，安装指定版本@x.xx.x
4，webpack 默认认识 JS 模块，模块打包器，会把一切文件认作是模块，比如说图片，css 模块，但是需要 loader
5，此时就需要一个配置文件来对图片，css 模块进行配置，webpack 默认的配置文件是 webpack.config.js，如果不是以这个名字命名，那么可以指定配置文件xxx.js，npm webpack --config xxx.js
6，如果文件夹名称是 src，且 src 文件夹下面也有 index.js 文件，且在根目录下面配置了 webpack.config.js，那么优先配置文件
7，publicPath，打包后路径的前缀
loader
1，模块转换器，把原内容按照需求转换成新内容
2，file-loader，处理字体，图片，csv，Excel等。应用场景：当我们需要模块仅仅是从源代码 src 文件夹中转移到打包目录，就可以使用 file-loader
3，url-loader ，是 file-loader的加强版。会将小图片转换成 base64
4， css-loader处理 CSS 文件， style-loader是基于 JS 的，网 HTML 文件里动态加代码
5，sass-loader 需要和 node-sass一起安装
6， postcss-loader，添加前缀，autoprefixer 是一个 plugin，用于 postcss-loader
非 webpack 内置plugins
1，html-webpack-plugin
配置 HTML 模板文件
2，clean-webpack-plugin
清空 dist 目录
3，mini-css-extract-plugin
使用这个 plugin 的时候不能使用 style-loader 了，style-loader 的作用是将 CSS 文件动态插入 HTML 里面，但是这个插件是为了将 样式文件单独生成 CSS 文件，然后使用 link 方式动态引入
webpack内置的plugin
webpack-plugin-hmr 热模块替换
不用刷新浏览器实现局部更新
devtool
在配置 devtool 里面配置。devtool 可以取值如下
开发环境：cheap-module-eval-source-map
生产环境：cheap-module-source-map
webpack-dev-server
主要是下面四个配置
proxy
open
contentBase
port
babel，主要是下面的配置
babel-loader
@babel/core
@babel/preset-env 这是 option 配置，转换 ES6 语法，但是还不够，新特性还需要 polyfill 来转换
@babel/polyfill 是注入到全局变量windows下面的，会污染全局环境，所以推荐闭包的方式，所以就用到了@babel/plugin-transform-runtime，按需注入需要进行配置
按需注入的配置
"presets":[
["@babel/preset-env",
{
"targets":{
"edge":"17",
"firefox":"60",
"chrome":"67",
"safari":"11.1"
},//目标浏览器的版本
"useBuiltIns":"usage",//按需注入polyfill 的垫片，如果不配置的话，需要在 JS 文件里面导入@babel/polyfill
"corejs":2
}
]
]
@babel/plugin-transform-runtime 这种方式不常用，可以实现按需注入
"plugins":[
[
"@babel/plugin-transform-runtime",
{
"absoluteRuntime":false,
"corejs":2,
"helpers":true,
"regenerator":true,
"useESModules":false
}
]
]
react打包环境配置
依赖 react
依赖 react-dom
语法依赖@babel/preset-react
配置文件
"presets":[
["@babel/preset-env",
{
"targets":{
"edge":"17",
"firefox":"60",
"chrome":"67",
"safari":"11.1"
},//目标浏览器的版本
"useBuiltIns":"usage",//按需注入polyfill 的垫片，如果不配置的话，需要在 JS 文件里面导入@babel/polyfill
"corejs":2
}
],”@babel/preset-react”
]
- tree shaking
凡是没有 export 的东西类似 css 组件polyfill 等，需要写数组来进行排除
optimization 配置
在 webpack 里面进行配置
optimization: {
usedExports:true,
}
在 mode 为 development 情况下，我们可能看不到效果，但是能在打包后的文件中看到注释的变化，大概意思是，提供了多个导出函数，但是实际上只用到了某一个或者某几个。
另外就是注意将 mode 改为 production 以后，要将 devtool 改一下，这样打包出来的dist代码才会将没用到的代码去掉，
当 mode 为 production 的时候，optimization 配置可以不用加，线上环境自动摇树。所以这个 optimization 的配置是针对开发环境提高打包效率的
sideEffects 配置
这个字段在 package.json 里面添加，默认值为 false，即对所有文件进行摇树，只要是没有 export 的类似 css 文件，polyfill 文件都不会打包进去。举个栗子
在 index.js 文件中我们引入 css 文件
import ' ./css/index.css '
这样的写法不同于
import a from ' ./a '
是没有实质性导出的，这种都会被摇下来，不添加到打包的文件里面。如果确实是需要 css 文件，那么需要这样配置
sideEffects :[' *css ' , ' @babel/polyfill ']
webpack-merge
code-spliting
业务代码与需求经常变，第三方库不要打包进来，可以加快打包速度，
网友评论