1. CommonsChunkPlugin
// CommonsChunkPlugin通过这个插件加载的文件为公共文件, 可以被浏览器缓存, 需要手动在html上加载, 而且是先加载 var commonsPlugin = new webpack.optimize.CommonsChunkPlugin({ name: "common", filename: "js/common" + (isHash ? ".[hash]" : "") + ".js" }); ... plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), commonsPlugin ]
2. html-webpack-plugin (三方)
// 打包html页面
var HtmlWebpackPlugin = require('html-webpack-plugin');
var rootJsHtml = "<script>...</script>" plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './common_modules/common/html/checkBrowser.html',
rootJs: rootJsHtml,
inject: false
})
]
-----checkBrowser.html页面
页面里面可以加入这么一句, 可以把rootJSHtml的内容写入页面里面去~~ 真心强大~
<%= htmlWebpackPlugin.options.rootJs %>
3. transfer-webpack-plugin (三方)
// 把指定文件夹下的文件复制到指定的目录
var TransferWebpackPlugin = require('transfer-webpack-plugin');
plugins: [
new TransferWebpackPlugin([
{from: './common_modules/images', to: 'img'},
{from: './common_modules/download', to: 'download'},
{from: './common_modules/html', to: 'html'},
{from: './common_modules/mslot', to: 'mslot'}, {from: './desktop/src/lib/sewise', to: 'sewise'}, {from: './common_modules/json', to: 'json'} ])
]
4. DefinePlugin
// definePlugin 接收字符串插入到代码当中, 所以你需要的话可以写上 JS 的字符串 var GLOBALS = { 'process.env.NODE_ENV': DEBUG ? '"development"' : '"production"', '__DEBUG__': DEBUG, '__DEBUGDATA__': false, //是否使用json数据 '__CRYPTODATA__': true, //是否需要加密传输及接收 '__ASE_KEY__': '"OPyZ03AgyxoJT1xM"', //加密key '__PACKAGE_TIME__': '"' + strPkDt + '"' //打包时间 };
... plugins:[new webpack.DefinePlugin(GLOBALS)]
5. extract-text-webpack-plugin (三方)
// 可以打包css, 貌似还能解释sass(未试验)var ExtractTextPlugin = require("extract-text-webpack-plugin");
var extractCSS = new ExtractTextPlugin('css/css.' + (isHash ? '[hash]' : '[id]') + '.[name].css'); ... module: { loaders: [ test: /.scss$/, loader: extractCSS.extract(['css', 'sass']) ] } ... plugins:[ extractCSS ]