手写webpack (4)

增加插件

 

1.  在 hand-webpck 文件夹下引入插件 less 
2. 在src 下新增 index.less

 

          index.less

       

@nice-blue: #5b83ad;
body {
  background: @nice-blue;
}
 
 

 

3.   在 webpack.config.js 配置使用的模块

 
let path = require('path');
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /.less$/,
        use: [
          path.resolve(__dirname, 'loader', 'style-loader'),
          path.resolve(__dirname, 'loader', 'less-loader')
        ]
      }
    ]
  }
}

　

 

4.   编写两个loader 

   

let less = require('less')
function loader(source) {
  let css = '';
  less.render(source, function (err, c) {
    css = c.css
  })
  css = css.replace(/
/g, '\n')
  return css;
}
module.exports = loader;

　　

   less-loader.js

    引入 less  通过 less.render 将  source 的css 转化了 最后返回回去

style-loader.js
function loader(source) {
  let style = `
    let style = document.createElement('style');
    style.innerHTML = ${JSON.stringify(source)}
    document.head.appendChild(style)
  `
  return style
}
module.exports = loader

5.    zxw-pack 编写 Compiler   在getSource 这里进行处理

 

  getSource(modulePath) {
    let rules = this.config.module.rules;
    let content = fs.readFileSync(modulePath, 'utf8');
    // 拿到每个规则来处理
    for (let i = 0; i < rules.length; i++) {
      let rule = rules[i];
      let { test, use } = rule;
      let len = use.length - 1;
      if (test.test(modulePath)) { // 这个模块需要通过loader来转化
        // loader获取对应的loader函数
        function normalLoader() {
          let loader = require(use[len--]);
          // 递归调用loader 实现转化功能
          content = loader(content);
          if (len >= 0) {
            normalLoader();
          }
        }
        normalLoader();
      }
    }
    return content
  }

•   获取传入的配置 拿到规则
•   对规则进行遍历 拿到每一个规则 解构出来 进行匹配
•   编写normalLoader 方法  递归调用loader 实现转化功能