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仅仅是构建