自定义一个简单的loader

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

1. 创建一个文件夹loader_test，通过命令行 npm init -y 初始化。这样目录中就生成一个package.json文件。

   
   
   image.png

2. npm install webpack webpack-cli --save-dev 安装webpack和脚手架
   

   image.png

3. 在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"
  },

4. 打包

npm run build 

image.png

5. 创建一个replaceLoader.js文件 去处理源代码中的一个字符串替换逻辑（loader的作用在于打包代码做一些处理）

   
   
   image.png
   
   

   接下来配置文件去使用该loader

image.png

打包之后 查看结果，打包之前 console.log('hello lic')之后字符串替换成功

image.png

6. 总结：
   a.我们来自定义loader用于做代码包装
   b.想在整个业务代码中做异常检测，可以写一个loader拿到js业务代码，然后对代码处理，做try catch
   c.网站做国际化。 在中文环境，就是中文显示，反之做其他显示