url-loader limit选项
打包处理url路径相关文件
①运行npm i url-loader file-loader -D命令
在webpack.config.js的module->rules数组中，添加loader规则如下：
module:{
rules:{
{test: /\.jpg|png|gif$/, use: 'url-loader?limit=2229'},
}
}
其中?之后是loader的参数选项：
limit用来指定图片的大小，单位是字节（byte）
只有<=limit大小的图片，才会被转为base64格式的图片
babel-loader
打包处理js文件中的高级语法
webpack只能打包处理一部分高级js语法
安装babel-loadernpm i babel-loader @babel/core @babel/plugin-proposal-decorators -D
在webpack.config.js中添加规则：
{test: /\.js%/, use: 'babel-loader', exclude: /node_modules/}
在根目录下，创建babel.config.js的配置文件，定义Babel的配置项：
module.exports={
plugins:[['@babel/plugin-proposal-decorators',{legacy: true}]]
}
Build
配置webpack打包发布
在package.json文件的scripts节点下，新增build命令如下：
"scripts":{
"dev": "webpack serve",//开发环境中，运行dev命令
"build": "webpack --mode production"//项目发布时，运行build命令
}
–mode是一个参数项，用来指定webpack的运行模式，pruduction代表生产环境，进行代码压缩与优化，通过mode指定的参数项，会覆盖webpack.config.js中的mode选项
最后，在项目打包时，文件会被压缩存储到dist文件夹内
修改webpack.config.js中的url-loader配置项，新增outputPath选项即可指定图片文件的输出路径
{test: /\.jpg|png|gif$/, use: 'url-loader?limit=470&outputPath=images' },
