Loader & Plugin

模块转换器，用于将模块的原内容按照需求转换成新内容。

webpack常用的loader

• 样式：style-loader、css-loader、less-loader、sass-loader等
• 文件：raw-loader、file-loader 、url-loader等
• 编译：babel-loader、coffee-loader 、ts-loader等
• 校验测试：mocha-loader、jshint-loader 、eslint-loader等

比如下面配置，可以匹配.scss的文件，分别经过sass-loader、css-loader、style-loader的处理。
sass-loader转化sass为css文件，并且包一层module.exports成为一个js module。style-loader将创建一个style标签将css文件嵌入到html中。css-loader则处理其中的@import和url()。

module.exports = {
  module: {
    rules: [
        {
          test: /\.scss$/,
          use:[
              {loader:'style-loader'},
              {loader:'css-loader',options:{sourceMap:true,modules:true}},
              {loader:'sass-loader',options:{sourceMap:true}}
          ],
          exclude:/node_modules/
      }
    ]
  }
}复制代码

• vue-loader、coffee-loader、babel-loader等可以将特定文件格式转成js模块、将其他语言转化为js语言和编译下一代js语言
  
• file-loader、url-loader等可以处理资源，file-loader可以复制和放置资源位置，并可以指定文件名模板，用hash命名更好利用缓存。
  
• url-loader可以将小于配置limit大小的文件转换成内敛Data Url的方式，减少请求。
  
• raw-loader可以将文件已字符串的形式返回
  
• imports-loader、exports-loader等可以向模块注入变量或者提供导出模块功能，常见场景是：
  1:jquery插件注入=jquery
  2:禁用AMD，imports-loader?define=false
  等同于：var $ = require(“jquery”) 和 var define = false;
  
• expose-loader:暴露对象为全局变量
  如何写一个loader:官网介绍how to write a loader
  下面是一个简单的raw-loader,它可以将文本类文件转成字符串到js文件中。其中this.cacheable、this.value等是loader的api，分别是将结果标记为可缓存和把值传递给下一个loader。
  

module.exports = function(content) {
  this.cacheable && this.cacheable();
  this.value = content;
  return "module.exports = " + JSON.stringify(content);
}

webpack常用的plugin

• 首先webpack内置UglifyJsPlugin，压缩和混淆代码。
  
• webpack内置CommonsChunkPlugin，提高打包效率，将第三方库和业务代码分开打包。
  
• ProvidePlugin：自动加载模块，代替require和import
  

  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })

• html-webpack-plugin可以根据模板自动生成html代码，并自动引用css和js文件
  
• extract-text-webpack-plugin 将js文件中引用的样式单独抽离成css文件
  

• DefinePlugin 编译时配置全局变量，这对开发模式和发布模式的构建允许不同的行为非常有用。
  

• 添加HotModuleReplacementPlugin

• entry中添加 “webpack-dev-server/client?http://localhost:8080/“,
• entry中添加 “webpack/hot/dev-server”
• (热更新还可以直接用webpack_dev_server —hot —inline,原理也是在entry中添加了上述代码)

webpack 内置的DllPlugin和DllReferencePlugin相互配合，前置第三方包的构建，只构建业务代码，同时能解决Externals多次引用问题。DllReferencePlugin引用DllPlugin配置生成的manifest.json文件,manifest.json包含了依赖模块和module id的映射关系

• babili-webpack-plugin、transform-runtime 、transform-object-rest-spread
  • babili-webpack-plugin:构建在babel之上 why
  • transform-runtime :解决了babel在每个文件都插入了辅助代码，代码体积过大的问题。
  • transform-object-rest-spread：
    Transform rest properties for object destructuring assignment and spread properties for object literals
    为对象字面量添加解构赋值和spread属性
• optimize-css-assets-webpack-plugin 不同组件中重复的css可以快速去重
  
• webpack-bundle-analyzer 一个webpack的bundle文件分析工具，将bundle文件以可交互缩放的treemap的形式展示。
  
• compression-webpack-plugin 生产环境可采用gzip压缩JS和CSS
  
• happypack：通过多进程模型，来加速代码构建
  

    const os = require('os');
    let HappyPack = require('happypack');
    let happyThreadPool = HappyPack.ThreadPool({size: os.cpus().length});
    exports.plugins = [
      new HappyPack({
        id: 'jsx',
        threadPool: happyThreadPool,
        loaders: [ 'babel-loader' ]
      }),
      new HappyPack({
        id: 'coffeescripts',
        threadPool: happyThreadPool,
        loaders: [ 'coffee-loader' ]
      })
    ];
    exports.module.loaders = [
      {
        test: /\.js$/,
        loaders: [ 'happypack/loader?id=jsx' ]
      },
      {
        test: /\.coffee$/,
        loaders: [ 'happypack/loader?id=coffeescripts' ]
      },
    ]

写一个webpack插件：

官网介绍：how to write a plugin

主要的步骤如下:

• 编写一个JavaScript命名函数。
• 在它的原型上定义一个apply方法。
• 指定挂载的webpack事件钩子。
• 处理webpack内部实例的特定数据。
• 功能完成后调用webpack提供的回调。
  编写插件之前要理解compiler和compilation两个对象，以及webpack生命周期的各个阶段和钩子，plugin比loader强大，通过plugin你可以访问compliler和compilation过程，通过钩子拦截webpack的执行。

比如我们可以在构建生成文件时，将所有生成的文件名生成到filelist.md的文件中