webpack命令
根据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参数
输入源，可多源头；最后的输出为bundle.js
entry: './main.js',
entry: {
bundle1: './main1.js',
bundle2: './main2.js'
},
output参数
输出位置；
output: {
filename: 'bundle.js'
}
output: {
filename: './dist/[name].js'
}
module.loader 参数
babel-loader
编译加载器；用于转换到相应语言版本
babel-preset-es2015重编译es6
module: {
loaders:[
{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel-loader?presets[]=es2015&presets[]=react'
},
]
}
css-loader 参数
在js文件中，引用css
module: {
loaders:[
{ test: /\.css$/, loader: 'style-loader!css-loader' },
]
}
image-loader
对在js中引用的图像进行打包;
图像名称重命名；小于8192bytes的图片直接转成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参数
配置引入的webpack插件
使用UglifyJs plugin压缩输出的bundle.js文件
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
plugins: [
new uglifyJsPlugin({
compress: {
warnings: false
}
})
]
传入环境变量
自定义plugin，使用process.env.CANSHU来控制开发模式与产品模式的不同分支
var devFlagPlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
});
plugins: [devFlagPlugin]
在项目中设置DEBUG参数 set DEBUG=true；可以在js中引用DEV参数
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内保存全局变量；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.
