生活只會(huì)欺負(fù)窮人，愛情也是
webpack 作為前端項(xiàng)目的打包工具趟庄，具有很好的學(xué)習(xí)價(jià)值。下面來學(xué)習(xí)下其中的 Loader
Loader可以幫助webpack將不同類型的文件轉(zhuǎn)換為webpack可識(shí)別的模塊
webpack中Loader使用：https://www.webpackjs.com/loaders/
webpack中Loader API的介紹：https://www.webpackjs.com/api/loaders/
在Webpack中伪很，默認(rèn)的配置文件為：webpack.config.js戚啥。在學(xué)習(xí)Loader之前，要先了解下webpack.config.js和vue.config.js的區(qū)別：
webpack.config.js是webpack的配置文件锉试，所有使用webpack作為打包工具的項(xiàng)目都可以使用猫十，vue項(xiàng)目可以使用，react項(xiàng)目也可以使用
vue.config.js是vue項(xiàng)目的配置文件呆盖，專用于vue項(xiàng)目拖云。通過vue.config.js中常用功能的配置，簡(jiǎn)化配置工作应又，當(dāng)然如果需要更專業(yè)的配置工作宙项，兩者在vue項(xiàng)目中是可以并存的
vue-cli3創(chuàng)建項(xiàng)目時(shí)并不會(huì)自動(dòng)創(chuàng)建vue.config.js，因?yàn)檫@個(gè)是可選項(xiàng)株扛，所以一般都是修改webpack時(shí)才會(huì)自己創(chuàng)建一個(gè)vue.config.js
因?yàn)?code>vue-cli3內(nèi)部高度集成了webpack尤筐，一般來說使用者不需要再為webpack做什么配置，所以沒有暴露webpack的配置文件席里，但開發(fā)中依然可以創(chuàng)建vue.config.js去修改默認(rèn)的webpack
Vue項(xiàng)目中 vue.config.js 文件就等同于 webpack 的 webpack.config.js
一. Loader的執(zhí)行順序
4 類loader的執(zhí)行優(yōu)級(jí)為：pre > normal > inline > post
相同優(yōu)先級(jí)的 loader 執(zhí)行順序?yàn)椋?code>從右到左叔磷，從下到上
// 此時(shí)loader執(zhí)行順序：loader3 - loader2 - loader1
module: {
rules: [
{ test: /\.js$/, loader: "loader1" },
{ test: /\.js$/, loader: "loader2" },
{ test: /\.js$/, loader: "loader3" },
],
},
// 此時(shí)loader執(zhí)行順序：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', // 這里是文件地址 導(dǎo)出一個(gè)函數(shù)即可
},
],
},
}
以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 將頁(yè)面上所有的李大玄全部替換為大玄 實(shí)測(cè)是可以的
module.exports = function (srcCode) {
// console.log('srcCode', srcCode)
return srcCode.replace('李大玄', '大玄');
}
這是渲染出來的結(jié)果OK!!! 一個(gè)小小的demo完成了
