webpack

1.webpack就是代码打包工具，将js, css, img, vue, react,等整合到一起，压缩代码

2.将main.js编译成bundle.js

  module.exports = {

     entry: './main.js',

    output: {

    filename: 'bundle.js'

  }

  };

 //多个

 module.exports = {

     entry: {

    bundle1: './main1.js',

    bundle2: './main2.js'

  },

  output: {

        filename: '[name].js'

  }

  };

3.babel-loader在webpack 打包前将jsx,es6文件编译成普通js 文件

4.css-loader 预处理成可读的css 文件，style-loader 把代码插入到<style>标签中

5.url-loader 将小于8192b 的数据转换成data url ,大于的转换成正常的图片地址

6.:global(selector) 这个可以提供本地范围的css

7.new UglifyJsPlugin（） 简化代码的插件

8.html-webpack-plugin可以index.html为你创建，而open-browser-webpack-plugin可以在Webpack加载时打开一个新的浏览器选项卡。

9.对于大型Web应用程序，将所有代码放入单个文件中效率不高。Webpack允许您将大型JS文件拆分为多个块。特别是，如果在某些情况下仅需要某些代码块，则可以按需加载这些块。

// main.js

require.ensure(['./a'], function (require) {

var content = require('./a');

document.open();

document.write('

' + content + '

');

document.close();

});

也可以使用bundle-loader进行代码分割

10.当多个脚本具有公共块时，您可以使用CommonsChunkPlugin将公共部分提取到单独的文件中，这对于浏览器缓存和节省带宽非常有用

11.可以使用CommonsChunkPlugin将脚本中的供应商库提取到单独的文件中。

plugins: [

new webpack.ProvidePlugin({

$: 'jquery',

jQuery: 'jquery'

})

]