4

新版本迁移

1. module.loaders 改为module.rules

module:{
  rules:[
    {
      test:/\.css$/,
      use:[
        {loader:"style-loader"},
        {
          loader:"css-loader",
          options:{
            modules:true,
          }
        }
      ]
    }
  ]
}
复制代码

2. 链式loader

上一个loader的输出作为输入被传入下一个loader

 module: {
  rules: [{
    test: /\.less$/,
    // loader: "style-loader!css-loader!less-loader"
    use: [
      "style-loader",
      "css-loader",
      "less-loader"
    ]
  }]
  }
复制代码

3. 取消在模块命中自动添加-loader后缀

在引用 loader 时，不能再省略 -loader 后缀了 必须写全了

4. 不需要手动添加 json-loader

如果没有为 JSON 文件配置 loader，webpack 将自动尝试通过 json-loader 加载 JSON 文件。

5. UglifyJsPlugin 默认配置项

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
plugins:[
  new UglifyJsPlugin({
    sourceMap:true,//默认false 设置为true，说明在压缩代码时启用source map
    compress:{
      warnings:true,//默认false，设置为true，说明可以看到uglifyjs的警告信息
    }
  })
]
复制代码

6. 通过options配置loader

module.exports = {
  module: {
    rules: [{
      test: /\.tsx?$/,
      loader: 'ts-loader'
    }]
  },
  // 无效
  ts: { transpileOnly: false }
}

module.exports = {
  module: {
    rules: [{
      test: /\.tsx?$/,
      loader: 'ts-loader',
      options:  { transpileOnly: false }
    }]
  }
}
复制代码

7.

ES2015 模块加载规范定义了 import() 方法.webpack 将 import() 作为分割点(split-point)并将所要请求的模块(requested module)放置到一个单独的 chunk 中。 import() 接收模块名作为参数，并返回一个 Promise。如果加载 chunk 失败，可以进行处理，因为它现在基于 Promise。

 function onClick() {
   import("./module").then(module => {
     return module.default;
   }).catch(err => {
     console.log("Chunk loading failed");
   });
 }
复制代码

8. 可以传递部分表达式给 import()

import(./routes/${path}/route)

CommonJS, AMD, CMD 和 UMD

CommonJS

CommonJS是服务器端模块的规范，Node.js采用了这个规范。

1. 一个单独的文件就是一个模块。
2. 加载模块使用require方法 require方法默认读取js文件，所以可以省略js后缀
3. 该方法读取一个文件并执行
4. 最后返回文件内部的exports对象。

CommonJS 加载模块是同步的，只有加载完成才能执行后面的操作。像Node.js主要用于服务器的编程，加载的模块文件一般都已经存在本地硬盘，所以加载起来比较快，不用考虑异步加载的方式，所以CommonJS规范比较适用。但如果是浏览器环境，要从服务器加载模块，这是就必须采用异步模式。所以就有了 AMD CMD 解决方案。

AMD和RequireJS

AMD意思就是"异步模块定义". AMD设计出一个简洁的写模块API： define(id?, dependencies?, factory);

• id 为字符串类型，表示了模块标识，为可选参数。若不存在则模块标识应该默认定义为在加载器中被请求脚本的标识。如果存在，那么模块标识必须为顶层的或者一个绝对的标识。
• dependencies ，是一个当前模块依赖的，已被模块定义的模块标识的数组字面量。
• factory，是一个需要进行实例化的函数或者一个对象。 使用require获取依赖模块，使用exports导出API。

1. 模块加载 require([modules],callback); modules是一个数组 ，里面的成员就是要加载的模块，callback是加载完成之后执行的回掉函数

   //加载一个math模块，然后调用方法 math.add(2, 3);
    require(['math'], function(math) {
     math.add(2, 3);
    });
   复制代码

2. RequireJS

通过一个函数来将所有所需要的或者说所依赖的模块实现装载进来，然后返回一个新的函数（模块），我们所有的关于新模块的业务代码都在这个函数内部操作，其内部也可无限制的使用已经加载进来的以来的模块。 define用于定义模块，RequireJS要求每个模块均放在独立的文件之中。按照是否有依赖其他模块的情况分为独立模块和非独立模块。

//独立模块  无依赖
define({
    method1: function(){},
    method2: function(){}
});
//等价于
define(function() {
   return {
       method1: function(){},
       method2: function(){}
   }
});

//非独立模块，对其他模块有依赖。
define([ 'module1', 'module2' ], function(m1, m2) {
   
});
define(function(require){
 var m1 = require('module1'),m2=require('module2')
})
复制代码

CMD

CMD推崇依赖就近，依赖可以就近书写，AMD推崇依赖前置,依赖一开始就写好。

//AMD
define(['./a','./b'], function (a, b) {
    //依赖一开始就写好
    a.test();
    b.test();
});

define(function (requie, exports, module) {
     
    //依赖可以就近书写
    var a = require('./a');
    a.test();
    //软依赖
    if (status) {
     
        var b = requie('./b');
        b.test();
    }
});
复制代码

UMD

UMD 是AMD和COMMONJS的糅合 跨平台的解决方案。

1. AMD以浏览器第一原则发展，异步加载
2. commonJS以服务器第一原则发展，同步加载

UMD先判断是否支持Node.js的模块（exports）是否存在，存在则使用Node.js模块模式。 在判断是否支持AMD（define是否存在），存在则使用AMD方式加载模块。

(function (window, factory) {
  if (typeof exports === 'object') {
   
      module.exports = factory();
  } else if (typeof define === 'function' && define.amd) {
   
      define(factory);
  } else {
   
      window.eventUtil = factory();
  }
})(this, function () {
  //module ...
});
复制代码

转载于:https://juejin.im/post/5b3333896fb9a00e3a5aabe4