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'

将所用到的库单独分离出来，在多页面应用中，对减少文件体积很有用 。
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文件处理，所以配置加载器

3.1 安装loader

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

3.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')
    ]
}

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 文件 。
但是在开发环境中不要使用，会影响热重载的速度。

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

5. 其他

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

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

完成 。
项目地址：