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
]