生活只会欺负穷人，爱情也是
webpack 作为前端项目的打包工具，具有很好的学习价值。下面来学习下其中的 Loader
Loader可以帮助webpack将不同类型的文件转换为webpack可识别的模块
webpack中Loader使用：https://www.webpackjs.com/loaders/
webpack中Loader API的介绍：https://www.webpackjs.com/api/loaders/
在Webpack中，默认的配置文件为：webpack.config.js。在学习Loader之前，要先了解下webpack.config.js和vue.config.js的区别：
webpack.config.js是webpack的配置文件，所有使用webpack作为打包工具的项目都可以使用，vue项目可以使用，react项目也可以使用
vue.config.js是vue项目的配置文件，专用于vue项目。通过vue.config.js中常用功能的配置，简化配置工作，当然如果需要更专业的配置工作，两者在vue项目中是可以并存的
vue-cli3创建项目时并不会自动创建vue.config.js，因为这个是可选项，所以一般都是修改webpack时才会自己创建一个vue.config.js
因为vue-cli3内部高度集成了webpack，一般来说使用者不需要再为webpack做什么配置，所以没有暴露webpack的配置文件，但开发中依然可以创建vue.config.js去修改默认的webpack
Vue项目中 vue.config.js 文件就等同于 webpack 的 webpack.config.js
一. Loader的执行顺序
4 类loader的执行优级为：pre > normal > inline > post
相同优先级的 loader 执行顺序为：从右到左，从下到上
// 此时loader执行顺序：loader3 - loader2 - loader1
module: {
rules: [
{ test: /\.js$/, loader: "loader1" },
{ test: /\.js$/, loader: "loader2" },
{ test: /\.js$/, loader: "loader3" },
],
},
// 此时loader执行顺序：loader1 - loader2 - loader3
module: {
rules: [
{ enforce: "pre", test: /\.js$/, loader: "loader1", },
{
// 没有enforce就是normal
test: /\.js$/, loader: "loader2", },
{ enforce: "post", test: /\.js$/, loader: "loader3",
},
],
},
以webpack.config.js为例 只展示配置处代码
module.exports = {
output: {
path: path.resolve(__dirname, './dist'),
filename: 'js/[name].js',
clean: true,
},
module: {
rules: [
{
test: /\.js$/,
loader: './src/customLoader/testLoader.js', // 这里是文件地址 导出一个函数即可
},
],
},
}
以vue.config.js为例 只展示配置处代码
module.exports = {
configureWebpack: {
resolveLoader: {
modules: ['node_modules','./src/customLoader/'],
},
},
chainWebpack(config) {
config.module.rule('myLoader').test(/\.js$/).use('testLoader').loader('testLoader').end();
}
};
src/customLoader/testLoader 将页面上所有的李大玄全部替换为大玄 实测是可以的
module.exports = function (srcCode) {
// console.log('srcCode', srcCode)
return srcCode.replace('李大玄', '大玄');
}
这是渲染出来的结果OK!!! 一个小小的demo完成了
