Vue学习——loader学习（7）

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' },