1.开发模式
开发模式顾名思义就是我们开发代码时使用的模式
webpack默认只处理js文件，对样式是没办法处理的。因此要处理css资源需要引入CSS-loader
处理CSS资源
如果要使用 css-loader，你需要安装 webpack@5
首先，你需要先安装 css-loader：npm install --save-dev css-loader style-loader
然后把 loader 引用到你 webpack 的配置中。如下所示：
在入口（entry）main.js文件中引入css资源文件。 import "./css/file.css";
webpack.config.js
module.exports = { module: { rules: [ { test: /\.css$/i, //只检测以.css结尾的文件 use: ["style-loader", "css-loader"], //use的执行顺序，从右到左，从下到上 先执行css-loader 再执行style-loader //css-loader:将css资源编译成commonjs的模块到js中， style-loader 将js中css通过创建style标签添加html文件中生效 }, ], }, };
然后运行 webpack。
如果由于某种原因你需要将 CSS 提取为一个文件（即不要将 CSS 存储在 JS 模块中），你可能想要查看 推荐示例。
处理less资源
首先，你需要先安装 less 和 less-loader： $ npm install less less-loader --save-dev
在入口（entry）main.js文件中引入css资源文件。 import "./less/file.less";
module.exports = { module: { rules: [ { test: /\.less$/i, // loader：'xxx' 只能使用1个loader use: [ // compiles Less to CSS 'style-loader', 'css-loader', 'less-loader', ], }, ], }, };
处理Sass和SCSS资源
npm install sass-loader sass --save-dev
在入口（entry）main.js文件中引入css资源文件。 import "./scss/file.scss";
module.exports = { module: { rules: [ { test: /\.s[ac]ss$/, // loader：'xxx' 只能使用1个loader use: [ // compiles Less to CSS 'style-loader', 'css-loader', 'sass-loader', //将sass编译成CSS文件 ], }, ], }, };
处理图片资源 （本身就会自动打包，但是优化可以处理的更好）
test:/\.(png|jpe?g|gif|webp|svg)$/, type:"asset", parser:{ dataUrlConditon:{ maxSize:10 *1024, //10KB } }
generator:{
//输出图片名称
filename:'static/images/[hash][ext][query]', //hash 是根据文件内容生成hash值，内容是唯一的 [hash:10] hash值取前10位 ext是文件扩展名，你之前是什么的，之后还是什么，query是携带一些参数
}
}
修改输出文件目录
output:{ //所有文件的输出路径 //_dirname nodejs的变量，代表当前文件的文件夹目录 path:path.resolve(_dirname,'dist') //绝对路径 //入口文件打包输出文件名 filename:'static/js/main.js', }
自动清空上次打包内容
output:{ //所有文件的输出路径 //_dirname nodejs的变量，代表当前文件的文件夹目录 path:path.resolve(_dirname,'dist') //绝对路径 //入口文件打包输出文件名 filename:'static/js/main.js', clear:true, //自动清空上次打包的内容，原理：在打包前，将整个path目录内容清空，再进行打包 }
处理字体图标资源
阿里巴巴矢量图标库https://www.iconfont.cn/search/index
处理其他资源
开发中可能还存在一些其他资源，如音视频等。
处理js资源
原因是webpack对js处理是有限的，只能编译js中ES模块化语法，不能编译其他语法，导致js不能再IE等浏览器运行，所以我们希望左一些兼容性处理
。其次开发中，团队对代码有严格要求的，我们不能由肉眼取检测代码格式，需要使用专业的工具来检测。
针对js兼容性处理，我们使用Babel来完成。
针对代码格式，我们使用EsLint来完成。
我们先完成EsLint，检测代码格式无误后，在由Babel做代码兼容性处理。
Eslint
在webpack 4 的时候是loader ，在webpack5的时候是一个插件。
Eslint的官方文档地址 https://eslint.bootcss.com/ ，可以检查配置选项。
可组装的Javascript 和jsx检查工具
这句话意思就是：它是用来检测js和jsx语法的工具，可以配置各项功能。
我们使用Eslint，关键是写Eslint配置文件，里面写上各种rules规则，将来运行Eslint时就会以写的规则对代码进行检查
Eslint 在rules中写规则， 或者继承extends现有的规则
现在以下较为有名的规则：
Eslint 官方的规则 eslint:recommendded
Vue Cli 官方的规则 plugin：vue/essential
React Cli 官方的规则 react-app
off或0 -关闭规则
warn 或 1 开启规则，使用警告级别的错误 warn（不会导致程序退出）
error 或 2 开启规则，使用错误级别的错误，error（当被触发的时候，程序会退出）
首先，需要安装 eslint-webpack-plugin：npm install eslint-webpack-plugin eslint --save-dev
然后把插件添加到你的 webpack 配置。例如：
const ESLintPlugin = require('eslint-webpack-plugin');
module.exports = {
// 所有的插件都是构造函数，需要用new调用
plugins: [new ESLintPlugin({
//检测哪些文件
context:path.resolve(_dirname,'src')
})],
// 在options 中可以传入eslint参数
};然后创建一个文件，文件名 .eslintrc.js
//列如react项目中，我们可以这样写配置 module.exports ={ extends:['react-app'], env:{ node:true,//启动node中全局变量 browser:true //启动浏览器中全局变量 }, parserOptions:{ ecmaVersion:6, //es6 sourceType:"module " //es module }, rules:{ //rules参考eslint官网 //我们的规则会覆盖掉react-app的规则 //所以想要修改规则直接改就是了 eqeqeq:['warn','smart'], "no-var":2 //不能使用var 定义变量 }}
在根目录创建.eslintignore
作用是让编译器不检查 dist目录
Babel
javascript编译器
主要用于将ES6语法编写的代码转换为向后兼容的JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中
具体配置
我们以babel.config.js 配置文件为例
module.exports = { //预设 presets:[], }
1.presets 预设
简单理解：就是一组Babel插件，扩展Babel功能
@babel/preset-env 一个智能预设，允许您使用最新的JavaScript
@babel/preset-react 一个用来编译React jsx语法的预设
@babel/preset-typescript 一个用来编译Typescript语法的预设
安装 npm install -D babel-loader @babel/core @babel/preset-env
在webpack.config.js文件中加入
module: { rules: [ { test: /\.m?js$/, exclude: /node_modules/, //排除node——modules中的js文件（这些文件不处理）
loader: 'babel-loader', } ] }然后再根目录建立一个文件夹 babel.config.js
module.exports={ //智能预设，能够编译ES语法 presets:[@babel/present-env] }
处理html资源
开发服务器&自动化
每次写完代码都需要手动输入指令才能编译代码，太麻烦了，我们希望一切自动化
会创建一个开发服务器，监视src下面的文件，一旦发生变化会自动的 重新打包
npm i webpack-dev-server -D
在webpack.config.js的plugins:[]中加入
//开发服务器：不会输入资源，在内存中编译打包的，所以dist文件中没有任何东西
devServer：{ host:'localhost', //启动服务器域名 port:'3000', //启动服务器端口号 open:true //是否自动打开浏览器 }
启动的指令会变化 ，变成npx webpack serve
生产模式介绍
生产模式是开发完成代码后，我们需要得到代码将来部署上线。
这个模式下我们主要对代码进行优化，让其运行性能更好。
生产模式准备
我们分别准备两个配置文件来放不同的配置
准备一个文件夹config，放不同的配置文件，将根目录的下的webpack.config.js移入其中，将其改名为，webpack.dev.js作为开发模式下的webpack配置。
然后再创建一个webpack.prod.js作为生产模式下的webpack配置文件。
放到config目标下，的webpack配置文件中的入口文件路径是不需要修改的。因为实际运行代码还是在外面运行的，
但是，output中的绝对路径是需要修改的 path中 ../要回退一层，但是开发模式中path不需要输出，因为是在内存中编译，path可以指定为path：undefined
绝对路径都是需要回退一层目录 ../