一、插件收集：
1.ProvidePlugin
作用：想在所有模块中都可以不用require 就引用某个模块（比如jquery）
eg:
plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery" }) ]
ps:这个插件引入模块的方式是require 而不是import .
2.CommonsChunkPlugin
作用：把每个入口文件的公共依赖单独打到一个文件中去。
eg:
1.var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");module.exports = { entry: { bundle1: './main1.jsx', bundle2: './main2.jsx' }, output: { filename: '[name].js' }, module: { loaders:[ { test: /\.js[x]?$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] } }, ] }, plugins: [ new CommonsChunkPlugin('init.js') ]} 2.var webpack = require('webpack');module.exports = { entry: { app: './main.js', vendor: ['jquery'], }, output: { filename: 'bundle.js' }, plugins: [ new webpack.optimize.CommonsChunkPlugin(/* chunkName= */'vendor', /* filename= */'vendor.js') ]};
3.DefinePlugin
作用：定义一个全局可见的变量，一般用来指明当前的环境。
eg:
var devFlagPlugin = new webpack.DefinePlugin({ __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))}); document.write('<h1>Hello World</h1>');if (__DEV__) { document.write(new Date());}
4.关于分片与按需加载：
http://robin-front.github.io/2016/04/18/react-router%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1%E4%B8%8EWebpack%E5%88%86%E7%89%87thunks/
总结：
(1).使用webpack来将代码分片（chunks），通过require,ensure([],(require)=>{require("my_module")},"myModule") ，来作为分块标识点。
(2).然后再在react-route 里的 Route组件中，通过getComponent方法来实现异步 按需加载。
eg:
<Route path="/home" getComponent={(location,callback)=>{require.ensure([],(require)=>{callback(null,require("./home.jsx"))},"home")}}/>
然后效果就是当访问home 这个路径的时候才会加载home.jsx这部分文件。
(3).同时需要注意的是，在分片的时候常常会把像react 这类的公共组件打到每个chunks中去，这可以使用commonsChunkPlugin（）来解决；
5.html-webpack-plugin:
webpack 自动生成html插件
http://www.cnblogs.com/haogj/p/5160821.html
6.一篇覆盖面很广的webpack文：
关于dllplugin可以看这个：
https://segmentfault.com/a/1190000005770042
7.webpack-dev-server:
https://segmentfault.com/a/1190000006670084
8.extract-text-webpack-plugin
这个插件能把所有的require("xxx.css")都单独提取出来，打成一个文件然后通过link的方式引入
网友评论