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

完成 。 項目地址：