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'
将所用到的库单独分离出来，在多页面应用中，对减少文件体积很有用 。
react-hot-loader 的3.0 版本的get start 刚刚更新 。 单独打包了补丁，所以react-hot-loader 作为一个生产依赖安装 。
这样基本的输入输出就完成了 。
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文件处理，所以配置加载器
4.1 安装loader
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
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"] }
transform-decorators-legacy 这个插件用来转化es7 中的装饰器，比如 autobind，connect 等 。
postcss.config.js
module.exports = { plugins: [ require('autoprefixer') ] }
5. 插件
插件是webpack 中非常重要的一部分 。
5.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, }),
5.2 CommonsChunkPlugin 插件将单独的部分作为chunk 提出去，减小文件体积，这里的name 要和 entry中对应 。
new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'js/vendor.js' }),
5.3 webpack 模块热替换插件 HotModuleReplacementPlugin
new webpack.HotModuleReplacementPlugin()
5.4 ExtractTextPlugin 分离css 文件
在这个插件加载以前，css 文件是放在js文件中，在解释js时，将文本插入到style节点中 。
使用这个插件以后，就直接可以单独分离css 文件 。
但是在开发环境中不要使用，会影响热重载的速度。
ExtractTextPlugin 的插件配置相对复杂 。首先包裹loaders，注意这里已经不能再使用style-loader了，因为提取css的任务插件完成了 。当提取失败时，使用style-loader 。
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 处理别名 。
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