webpack - 笔记

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
]