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