webpack 2 基本配置,DevServer 配置
说明
最近重构代码时,把 webpack 升级到了 2.2.1,结果完全无法运行,正好看到了这份文档,讲解的很详细,所以就学习了一下,应用到项目中。
列出版本
- “webpack”: “^2.2.1”,
- “webpack-dev-server”: “^2.4.1”,
- “webpack-md5-hash”: “0.0.5”,
- “webpack-merge”: “^4.0.0”
配置
1. 整体
webpack 配置文件就是 JavaScript 文件导出的一个对象,webpack 根据定义的属性来进行解析。
2. entry(入口)
入口文件告诉webpack 从哪里开始进入文件,顺着依赖关系打包文件,一般设置成应用的启动文件
entry 的值 可以是 string | Array 或者是一个对象,包含入口文件的路径,或者模块名
一般写法
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
复杂一点的写法,分离应用程序和公共库
entry: {
app: './app/js/index.js'
vendor: ['react', 'react-router', 'redux', 'react-redux', 'react-dom']
},
3. output(出口)
webpack 打包文件后,还要告诉他,打包后的文件名变化,输出位置,注:可以有多个入口,但是出口配置只有一个
output 的值是一个对象,具有以下属性
output.path
对应文件打包后的输出目录,需要绝对路径,可使用 node.js path 模块
path.resolve([from...],to)
实现
output.filename
指定每个输出文件的文件名格式,如果配置了多个入口文件,或者拆分了模块,可以通过 [name]、[hash]或者[chunkhash] 替换相应的文件名。
output.chunkFilename
非入口模块 chunk 的文件名, 路径相对于 output.path 目录。同理,可以用 [id]、[name]、[hash]、[chunkhash],作为输出文件名设置
output.publicPath
最后转换为 html 引入的模块的 url 的前半部分,开发时 设置为 ‘/’ 就可以了,生产环境下要设置为产品上线时的地址 ‘http://xxx.xx’
例子
output: {
path: path.resolve(__dirname, 'dev'),
filename: 'js/bundle.js',
publicPath: '/',
chunkFilename: '[name].chunk.js'
},
4. loader(加载器)
loaders 是将对应程序中的文件进行转换,然后返回新的文件,这样可以打包 JavaScript 之外的其他文件。
注意:webpack 1.x 中的 module.loaders 已经改成了 module.rules,写法上稍有不同
module.rules 允许你在 webpack 中指定几个 loader
module: {
// loaders: [] // 2.x 兼容
rules: [ // rules 代替 loaders
{
test: /\.(scss|sass)$/, // test 定义文件匹配规则
include: APP_PATH, // 表示必须匹配选项
// exclude: 'node_modules' 表示必须不匹配选项
// enforce: 'pre'|'post' 表示 loader 的前置和后置
use: [ // use 代替 loaders 更加明确,以loaders 数组的形式展现
'style-loader',
'css-loader',
'postcss-loader',
'sass-loader?outputStyle=expanded' // ? 后边跟 loader 的配置选项,也可以使用 options
]
},
{
test: /\.css$/,
use: [
{ loader: 'style-loader'},
{
loader: 'css-loader'},
options: { // 属性 跟 query 一样,可以传递到 loader 中,代表 loader 的选项
modules: true
}
}
]
}
]
}
5. resolve(解析)
用来设置模块如何被解析
resolve.alias
创建 import 或 require 的别名,来确保模块引入变得更简单。例如,一些常用模块:
resolve: {
alias: {
Request$: path.resolve(__dirname, 'app/js/request.js')
}
}
// 使用前
import Request from 'app/js/request.js';
// 使用后
import Request from 'Request';
resolve.extensions
自动解析确定的扩展,能够使用户在引入时不带扩展
resolve: {
extensions: ['.js', '.json', '.scss', 'css']
}
// 使用后
import File from './app/js/utils/request';
resolve.modules
告诉 webpack 解析模块时,应该搜索的目录
resolve: {
modules: [
path.resolve(__dirname, 'app'),
'node_modules'
]
}
6. devtool(开发工具)
定义如何生成 Source Map
devtool: 'cheap-module-source-map'
跟多 Source Map 可以看官方文档
7. plugins(插件)
扩展功能
常用插件
-
html-webpack-plugin
按照模板生成 HTML,动态添加 js 和 css,(2.x没有变化)
-
webpack-merge
非插件,用于将两个 webpack 配置文件合并为一个,(2.x新增)
-
extract-text-webpack-plugin
抽取 CSS 模块 生成单独文件,(2.x写法有变化)
-
chunk-manifest-webpack-plugin
配合webpack.optimize.CommonsChunkPlugin
,将 manifest 提取到一个单独的json 文件中,解决长效缓存的问题
-
webpack-md5-hash
使生成的 hash 值 是基于文件内容的
-
webpack.optimize.CommonsChunkPlugin
用于提取公共模块,单独打包成一个文件,(2.x写法略有不同)
-
webpack.DefinePlugin
用于定义环境变量,(2.x没有变化)
-
webpack.LoaderOptionsPlugin
代替 1.x 版本中 loader 的扩展配置功能,(2.x新增)
-
webpack.optimize.UglifyJsPlugin
js 代码压缩,(2.x更改了默认配置)
-
webpack.HotModuleReplacementPlugin
开启全局的模块热替换(HMR)
-
webpack.NamedModulesPlugin
当模块热替换(HMR)时在浏览器控制台输出对用户更友好的模块名字信息
8. devServer
便于快速开发应用程序
devServer.contentBase
告诉服务器从哪里提供内容,默认情况下,将使用当前工作目录作为提供内容的目录
contentBase: path.resolve(__dirname, 'dev'),
devServer.publicPath
此路径下的打包文件可在浏览器中访问。注:确保 publicPath 总是以斜杠(/)开头和结尾。
在热模块替换中,必须设置此项,而且需要和 output.publicPath 一致
publicPath: '/',
devServer.historyApiFallback
react 项目开发,设置可以从任意的URL 访问
historyApiFallback: true,
devServer.clientLogLevel
减少控制台无用的信息打印
devServer.host|port
可以用来设置服务器外部可以访问的 ip 和 端口
devServer.open|hot|inline|compress
设置 打开一个新的浏览器窗口|启用 webpack 的模块热替换特性|启用内联模式|启用gzip压缩
devServer.stats
控制 bundle 信息展示,可以自定义展示规则,参考文档