webpack3 的配置相对于webpack2 又有了一些新的变化,这里讲其记录下来,备查 。
package.json 的完整文件在结尾 。
1. 安装
1
2
|
npm init
yarn add webpack webpack-dev-server -D
|
2. 配置简单输入输出
webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
module.exports = {
entry: {
ventor: [
'react'
,
'react-dom'
],
index: [
'babel-polyfill'
,
'react-hot-loader/patch'
,
path.resolve(__dirname,
"src/index.js"
)
]
},
output: {
path: path.resolve(__dirname,
"dist"
),
filename:
"js/[name].js"
,
},
devtool:
'source-map'
|
将所用到的库单独分离出来,在多页面应用中,对减少文件体积很有用 。
react-hot-loader 的3.0 版本的get start 刚刚更新 。 单独打包了补丁,所以react-hot-loader 作为一个生产依赖安装 。
这样基本的输入输出就完成了 。
3. webpack-dev-server
1
2
3
4
5
6
7
8
9
10
11
12
13
|
devServer: {
hot:
true
,
// 热重载
inline:
true
,
// 启用inline 模式
port: 46480,
contentBase: path.resolve(__dirname,
"dist"
),
proxy: {
"/api"
: {
target:
"xxxxx"
,
secure:
false
,
// 处理https
changeOrigin:
true
,
// 跨域
}
}
},
|
4. loaders
webpack 将所有的文件都当做js文件处理,所以配置加载器
4.1 安装loader
1
2
|
yarn add babel-loader less-loader postcss-loader css-loader style-loader -D
yarn add react-hot-loader
|
4.2 配置loader
注意,loader 中的 name 都是相对于 output中的path 的 。
postcss-loader是对css 文件做一些预处理,常用就是添加css3属性前缀,用到 autoprefixer 插件 。 配置postcss-loader ,需要 postcss.config.js 文件 。
babel-loader 需要配置option选项,这里单独提出去,放置到.babelrc 文件中 。
webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
module: {
rules: [{
test: /.js$/,
use: [
"react-hot-loader/webpack"
,
"babel-loader"
,
],
exclude: path.resolve(__dirname,
"node_modules"
)
},
{
test: /\.css$/,
use: [
"style-loader"
,
"css-loader"
,
"postcss-loader"
]
},
{
test: /\.less$/,
use: [
"style-loader"
,
"css-loader"
,
"postcss-loader"
,
"less-loader"
]
},
{
test: /\.(gif|png|jpe?g)$/,
use: [{
loader:
"file-loader"
,
options: {
name:
"static/img/[name].[ext]"
}
}]
},
{
test: /\.(ttf|eot|svg|woff)(\?(\w|
#)*)?$/,
use: [{
loader:
"file-loader"
,
options: {
name:
"static/font/[name].[ext]"
}
}]
}
]
},
|
.babelrc
1
2
3
4
|
{
"presets": ["es2015", "stage-0", "react"],
"plugins": ["transform-decorators-legacy"]
}
|
transform-decorators-legacy 这个插件用来转化es7 中的装饰器,比如 autobind,connect 等 。
postcss.config.js
1
2
3
4
5
|
module.exports = {
plugins: [
require(
'autoprefixer'
)
]
}
|
5. 插件
插件是webpack 中非常重要的一部分 。
5.1 HtmlWebpackPlugin 插件 。
自动生成html文件,并自动引入script文件 。有几个页面就要new 几个插件, 自动引入同名的js文件。
1
2
3
4
5
6
7
8
|
const HtmlWebpackPlugin = require(
"html-webpack-plugin"
);
new
HtmlWebpackPlugin({
template: path.resolve(__dirname,
"src/index.html"
),
name:
"index"
,
title:
"webpack config cli"
,
filename:
"index.html"
,
inject:
true
,
}),
|
5.2 CommonsChunkPlugin 插件将单独的部分作为chunk 提出去,减小文件体积,这里的name 要和 entry中对应 。
1
2
3
4
|
new
webpack.optimize.CommonsChunkPlugin({
name:
'vendor'
,
filename:
'js/vendor.js'
}),
|
5.3 webpack 模块热替换插件 HotModuleReplacementPlugin
1
|
new
webpack.HotModuleReplacementPlugin()
|
5.4 ExtractTextPlugin 分离css 文件
在这个插件加载以前,css 文件是放在js文件中,在解释js时,将文本插入到style节点中 。
使用这个插件以后,就直接可以单独分离css 文件 。
但是在开发环境中不要使用,会影响热重载的速度。
ExtractTextPlugin 的插件配置相对复杂 。首先包裹loaders,注意这里已经不能再使用style-loader了,因为提取css的任务插件完成了 。当提取失败时,使用style-loader 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
const ExtractTextPlugin = require(
"extract-text-webpack-plugin"
);
// loader部分
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback:
"style-loader"
,
use: [
"css-loader"
,
"postcss-loader"
]
})
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback:
"style-loader"
,
use: [
"css-loader"
,
"postcss-loader"
,
"less-loader"
]
})
}
// 插件部分
new
ExtractTextPlugin({
filename:
"css/index.css"
}),
|
6. 其他
extensions:用于省略后缀名
alias 处理别名 。
1
2
3
4
5
6
7
8
9
|
resolve: {
extensions: [
" "
,
".js"
,
".jsx"
,
".css"
,
".less"
],
alias: {
components: path.resolve(__dirname,
'src/components/'
),
css: path.resolve(__dirname,
"src/css/"
),
model: path.resolve(__dirname,
'src/model/'
),
store: path.resolve(__dirname,
'src/store/'
)
}
}
|
7.package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
{
"name"
:
"webpack-react-cli"
,
"version"
:
"1.0.0"
,
"description"
:
""
,
"main"
:
"webpack.config.js"
,
"scripts"
: {
"test"
:
"echo \"Error: no test specified\" && exit 1"
,
"dev"
:
"webpack-dev-server --open"
,
"build"
:
"webpack -w"
},
"author"
:
""
,
"license"
:
"ISC"
,
"devDependencies"
: {
"autoprefixer"
:
"^7.1.2"
,
"babel-core"
:
"^6.25.0"
,
"babel-loader"
:
"^7.1.1"
,
"babel-plugin-transform-decorators-legacy"
:
"^1.3.4"
,
"babel-preset-es2015"
:
"^6.24.1"
,
"babel-preset-react"
:
"^6.24.1"
,
"babel-preset-stage-0"
:
"^6.24.1"
,
"css-loader"
:
"^0.28.4"
,
"extract-text-webpack-plugin"
:
"^3.0.0"
,
"file-loader"
:
"^0.11.2"
,
"html-webpack-plugin"
:
"^2.30.1"
,
"less"
:
"^2.7.2"
,
"less-loader"
:
"^4.0.5"
,
"postcss-loader"
:
"^2.0.6"
,
"style-loader"
:
"^0.18.2"
,
"webpack"
:
"^3.0.0"
,
"webpack-dev-server"
:
"^2.5.0"
},
"dependencies"
: {
"babel-polyfill"
:
"^6.23.0"
,
"core-decorators"
:
"^0.19.0"
,
"prop-types"
:
"^15.5.10"
,
"react"
:
"^15.6.1"
,
"react-dom"
:
"^15.6.1"
,
"react-hot-loader"
:
"^3.0.0-beta.7"
}
}
|
原文链接:http://www.cnblogs.com/likeFlyingFish/p/7399704.html?utm_source=tuicool&utm_medium=referral