webpack 配置总结
entry入口文件配置：
配置entry入口配置有三种写法，每一个入口称为chunk。
字符串：
entry: ‘./index/index.js’: 配置模块会被解析为模块，并在启动时加载。chunk名默认为mian，具体打包文件名视output配置而定。数组：
entry: [‘./src/mod1.js’, […,], [./src/index.js]]:所有的模块在启动时按照配置顺序加载，合并到最后一个模块会被导出。chunk默认为main。对象：
entry: { index: ‘…’, login: […]}: 如果传入object，则会生成多个入口打包文件，key是chunk名，value可以是字符串，也可以是数组。
例如：
entry: {
index: './index/index.js',
login: ['./mod/mod1.js', './index/login.js']
}配置输出目录
设置入口配置的文件的输出规则，通过output对象实现，常用配置：
- output.path: 指定输出文件路径，通常设置为__dirname + ‘./build’，
- output.filename: 输出文件名称，有下面列出的四种可选的变量。filename项的配置可以使这几种的任意一种或多种组合。如：output.filename=’[name]-[id].js’，则输出就是index-1.js。
- [id]，chunk的id
- [name]，chunk的名
- [hash]，编译哈希值
- [chunkhash]，chunk的hash值
- output.publicPath:设置为想要的资源访问路径。
配置loader
modules: {
loaders: [
test: /\.js$/,
exclude: /node_modules/, //匹配不希望处理文件的路径
loaders: 'xxx-loader?a=x&b=y' //此处xxx-loader可简写成xxx,?后可以query方式传递给loader参数
]
}- 多loader调用示例：
在js中，如果要直接解析某个文件，你可以采用：
require('jade!./index.jade')如果要解析css，并内联之，需要使用分隔符！
require(!style!css!./style.css)同理，如果要解析less，转换成css之后，再内联之，写法如：
require('!style!css!less./style.less!'); //此语句的含义是，先调用less-lader解析style.less文件，输出结果会被css-loader处理，然后再被style-loader处理同理，在webpack.config.js配置文件中，只需要指定处理的loader序列：
loaders: [
{
test: /\.less$/,
loader: '!style!css!less'
}
]CSS文件单独抽取（extract-text-webpack-plugin）
在webpack默认对css打包压缩的处理中，对css文件经过处理之后是在js文件中然后通过在页面的style中插入。那么如何把css单独抽取成一个文件，同时使js文件不融入css呢？这时需要extract-text-webpack-plugin插件
优点：
1 更少的style tag（IE对此有限制）
2 可以生成便于开发环境测试的CSS source-map
3 减少DOM操作使用
new ExtractTextPlugin(options: filename | object)- 常用配置
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(
"style-loader",
"css-loader?sourceMap"
)
}, {
test: /\.less$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
}
]
},
plugins: [
new ExtractTextPlugin("css/[name].css?[hash]-[chunkhash]-[contenthash]-[name]", {
disable: false,
allChunks: true
})
]
}esLint配置
ESLint是js中目前比较流行的插件化的静态代码检测工具。通过使用它可以保证高质量的代码，尽量减少和提早发现一些错误。使用eslint可以在工程中保证一致的代码风格，特别是当工程变得越来越大、越来越多的人参与进来时，需要加强一些最佳实践。
- 配置
module: {
preLoaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader'
},
],
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader'
}
]
}
//需要配置在webpack-dev-server
eslint: {
configFile: './.eslintrc'
},
- 使用：
需要在根目录中新建一个.eslintrc文件，然后在webpack文件中配置使用。
.eslintrc文件配置：参看
webpack.optimize.commonChunkPlugin的使用介绍
使用
new webpack.optimize.commonChunkPlugin(options | object); module.exports = {
entry: {
'user': '/src/user.js',
'index': '/src/index.js',
'mian'
}
}- 配置一： 传入string类型
默认打包所有文件
new webpack.optimize.commonChunkPlugin('main.js') //默认会把所有入口节点的公共代码提取出来,生成一个common.js- 配置二： 传入字符串，同数组
有选择的提取公共代码
// 提供公共代码
// 默认会把所有入口节点的公共代码提取出来,生成一个common.js
// 只提取main节点和index节点
new webpack.optimize.commonChunkPlugin('main.js', ['index', 'main']) - 配置三： 传入对象
有选择的提取公共代码
// 提供公共代码
// 默认会把所有入口节点的公共代码提取出来,生成一个common.js
// 只提取main节点和index节点
new webpack.optimize.commonChunkPlugin({
name: 'main.js',
chunks: ['index', 'main']
})webpack-dev-server的配置
- hot选项 true
浏览器自动打包并刷新，但并不是全部刷新，也就是刷新更新部分
- inline选项 true
浏览器自动打包并刷新
- iFrame选项 true
自动打包，但是浏览器并不自动刷新
启动热替换 plugins: [new webpack.HotModuleReplacementPlugin()]
一般配置如下：
module.exports = {
···
devtool: 'source-map',
devServer: {
port: 8080,
contentBase: './build',
hot: true, //自动打包，浏览器自动刷新，不完全刷新，改动部分局部刷新
inline: true, //自动打包，浏览器自动刷新
// iFrame: true, //自动打包，但是浏览器不自动刷新
historyApiFallback: true,
publicPath: "",
stats: {
colors: true
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
}
···
}配置开发环境及正式环境
在package.json文件中配置：
"scripts": {
"dev": "webpack-dev-server --progress --colors",
"build": "webpack -p",
"deploy": "set NODE_ENV=production&&webpack -p --progress --colors",
"test": "echo \"Error: no test specified\" && exit 1"
},webpack-dev-server命令与webpack -p的区别：
webpack-dev-server是开发环境，构建在内存之中，同时提供服务器开发；而webpack -p仅仅是构建