loader
webpack enables use of loaders to preprocess files. This allows you to bundle any static resource way beyond JavaScript
- loader是webpack中的打包方案，能够打包项目中除js之外的一些静态资源。是webpack的核心之一。
- 在webpack学习过程中，试着自定义一个简单的loader，加深一下理解。
自定义loader，目的是在打包中替换源代码中一个指定的字符串。
整个项目结构
image.png
-
创建一个文件夹loader_test，通过命令行 npm init -y 初始化。这样目录中就生成一个package.json文件。
image.png -
npm install webpack webpack-cli --save-dev安装webpack和脚手架
image.png 在loader_test中创建src目录及目录下的index.js，根目录下创建配置文件webpack.config.js。
const path = require('path')
module.exports = {
entry: {
main: './src/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
}
}
在package.json文件中添加一个build执行命令
"scripts": {
"build":"webpack"
},
- 打包
npm run build
image.png
-
创建一个replaceLoader.js文件 去处理源代码中的一个字符串替换逻辑（loader的作用在于打包代码做一些处理）
image.png
接下来配置文件去使用该loader
image.png
打包之后 查看结果，打包之前 console.log('hello lic')之后字符串替换成功
image.png
- 总结：
a.我们来自定义loader用于做代码包装
b.想在整个业务代码中做异常检测，可以写一个loader拿到js业务代码，然后对代码处理，做try catch
c.网站做国际化。 在中文环境，就是中文显示，反之做其他显示
