webpack 自查文档

1. babel

babel不会转换Set，Map，Generator，Promose等，因此需要借助polyfill方案解决。

可以使用@babel/polyfill 或者@babel/plugin-transform-runtime，二选一即可

@babel.polyfill是core-js库的别名，随着core-js@3的更新，@babel/polyfill无法从2过渡到3，因此@babel/polyfill在使用core-js@3已经被放弃。

modules: “amd/cdm/commonjs...”，配置为false, 对es6的模块文件不做转换，以便使用tree shaking，sideEffects等

useBuildIns：

• false: 不对polyfill操作，如果引入了polyfill，则无视配置的浏览器兼容，引入所有的polyfill
• entry: 需要在入口文件手动添加 (使用于core-js:3)

import 'core-js/stable';import 'regenerator-runtime/runtime';

• usage: 会根据浏览器兼容，以及代码API中用到的API来进行polyfill，实现按需加载

@babel/preset-env: 认读ES6+代码，在使用这个插件之前，babel是无法认识ES6代码的

@babel/plugin-transform-runtime 和 @babel/polyfill: 转换新的API

            @babel/polyfill: 纯运行时的包。会直接改写全局变量

            @babel/plugin-tranform-time（devDependencies，开发环境）: 这个插件必须和                       @babel/runtime （dependencies ，生产环境）这个包一起。 一般写第三方库的时候                用这个， 不会污染全局对象

2. externals

如果不想第三方库打包到bundle中，就需要用externals配置排除

  externals: {
        jquery: "jQuery",
        lodash: {
            commonjs: 'lodash',
            commonjs2: 'lodash',
            amd: 'lodash',
            root: '_'
        }
    },

3. resolve

  resolve: {
    mainFields: ['browser', 'main'] // 改变入口的文件字段    
    modules: ['./src/components', 'node_modules'],
    extensions: ['.js','.json'], //没有带后缀的顺序
    alias: {
      'bootstrap': 'bootstrap/dist/css/bootstrap.css'
    }
  }

4. output > library & libraryTarget

开发一个库，使得该库可以通过commonjs和amd的方式使用，也可以用过script标签使用。

output: {
      path: path.resolve(__dirname, "build"),
      filename: '[name].js',
      chunkFilename: "[name].min.js",
      libraryTarget: "umd",
      library: "tools"
    }