webpack命令
根據(jù)webpack.config.js文件打包
webpack – for building once for development
webpack -p – for building once for production (minification)
webpack --watch – for continuous incremental build
webpack -d – to include source maps
webpack --colors – for making things pretty
打包并且在服務器上運行（相當于webpack + apache）
webpack-dev-server
entry參數(shù)
輸入源杆烁，可多源頭妆距；最后的輸出為bundle.js
entry: './main.js',
entry: {
bundle1: './main1.js',
bundle2: './main2.js'
},
output參數(shù)
輸出位置醉鳖；
output: {
filename: 'bundle.js'
}
output: {
filename: './dist/[name].js'
}
module.loader 參數(shù)
babel-loader
編譯加載器；用于轉(zhuǎn)換到相應語言版本
babel-preset-es2015重編譯es6
module: {
loaders:[
{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015&presets[]=react'
},
]
}
css-loader 參數(shù)
在js文件中，引用css
module: {
loaders:[
{ test: /\.css$/, loader: 'style-loader!css-loader' },
]
}
image-loader
對在js中引用的圖像進行打包;
圖像名稱重命名丙笋；小于8192bytes的圖片直接轉(zhuǎn)成dataURL即base64使用
module: {
loaders:[
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
}
css-module
css作為模塊引用，具有全局性與非全局性
module: {
loaders:[
{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015&presets[]=react'
},
{
test: /\.css$/,
loader: 'style-loader!css-loader?modules'
}
]
}
css文件中的:global()屬性，適用于全局糕韧；其余僅適用于引用該css文件的js文件中使用
plugin參數(shù)
配置引入的webpack插件
使用UglifyJs plugin壓縮輸出的bundle.js文件
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
plugins: [
new uglifyJsPlugin({
compress: {
warnings: false
}
})
]
傳入環(huán)境變量
自定義plugin，使用process.env.CANSHU來控制開發(fā)模式與產(chǎn)品模式的不同分支
var devFlagPlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
});
plugins: [devFlagPlugin]
在項目中設置DEBUG參數(shù) set DEBUG=true喻圃；可以在js中引用DEV參數(shù)
chunk分塊輸出
使用require.ensure定義分離標志
// main.js
// require.ensure告訴webpack萤彩，./a.js文件應該從bundle.js中分離出來，放入單獨的chunk文件(0.bundle.js)
方法1：
require.ensure(['./a'], function(require) {
var content = require('./a');
document.open();
document.write('<h1>' + content + '</h1>');
document.close();
});
方法2：
// 把a.js打包到另一個打包文件中去斧拍，是同步操作雀扶，獲取這個js的exports才往下走
var load = require('bundle-loader!./a.js');:
load(function(file) {
document.open();
document.write('<h1>' + file + '</h1>');
document.close();
});
common chunk提取
存在多個entry源的時候，使用ommonsChunkPlugin插件肆汹，把公共js提取到一個公共文件
把所有js中的公共部分提取愚墓，放進新生成的init.js文件中
plugins: [
new CommonsChunkPlugin('init')
]
vendor chunk引入第三方庫
使用vendor集中儲存第三方庫；
通過使用CommonsChunkPlugin插件昂勉，在待打包文件中引入了第三方庫如jquery等浪册，存在vendor文件中
entry: {
app: './main.js',
vendor: ['jquery'],
},
plugins: [
new webpack.optimize.CommonsChunkPlugin(/* chunkName= */'vendor', /* filename= */'vendor.js')
]
暴露全局變量
data.js內(nèi)保存全局變量；externals用來暴露data.js中的變量岗照，并且映射村象；
// data.js
var data = 'Hello World';
var base = 'ni hao';
// webpack.config.js
externals: {
// require("jquery") is external and available
// on the global var jQuery
// "jquery": "jQuery"
'data': 'data',
'data2': 'base'
}
在js中可以通過require來獲取這些全局變量笆环，可以直接使用
// main.js
var data = require('data');
var base = require('data2');
hot module replacement 熱重載模塊
不需要刷新就可以看到module的變化
方法一：
添加熱模塊替換插件
entry: [
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8080',
'./index.js'
],
plugins: [
new webpack.HotModuleReplacementPlugin()
],
方法二：
webpack-dev-server --hot --inline
說明
--hot: 添加熱模塊替換插件、切換服務器到熱加載模式
--inline: 把webpack-dev-server運行時間也打包進bundle.js
--hot --inline: also adds the webpack/hot/dev-server entry.
