webpack 3 & React 的配置 。

今天真是难过的一天😞😞

webpack3 的配置相对于webpack2 又有了一些新的变化，这里讲其记录下来，备查 。

package.json 的完整文件在结尾 。

1. 安装

npm init
yarn add webpack webpack-dev-server -D

2. 配置简单输入输出

webpack.config.js

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'

3. webpack-dev-server

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文件处理，所以配置加载器

3.1 安装loader

yarn add babel-loader less-loader postcss-loader css-loader style-loader  -D
yarn add react-hot-loader

3.2 配置loader

webpack.config.js

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

{
"presets": ["es2015", "stage-0", "react"],
"plugins": ["transform-decorators-legacy"]
}

postcss.config.js

module.exports = {
plugins: [
require('autoprefixer')
]
}

4. 插件

插件是webpack 中非常重要的一部分 。

3.1 HtmlWebpackPlugin 插件 。

自动生成html文件，并自动引入script文件 。有几个页面就要new 几个插件， 自动引入同名的js文件。

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,
}),

3.2 CommonsChunkPlugin 插件将单独的部分作为chunk 提出去，减小文件体积，这里的name 要和 entry中对应 。

new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'js/vendor.js'
}),

3.3 webpack 模块热替换插件 HotModuleReplacementPlugin

new webpack.HotModuleReplacementPlugin()

3.4 ExtractTextPlugin 分离css 文件

在这个插件加载以前，css 文件是放在js文件中，在解释js时，将文本插入到style节点中 。

使用这个插件以后，就直接可以单独分离css 文件 。

但是在开发环境中不要使用，会影响热重载的速度。

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"
}),

5. 其他

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/')
}
}

5.package.json

{
"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"
}
}

完成 。

项目地址：