Webpack4從零搭建React開發環境

實踐文：參考vue-cli配置及網上react相關文章，選用webpack4從零搭建react開發環境。

github項目地址

1、npm init初始化項目

• npm -v可以查看npm版本，我安裝的最新版5.5.1
• 初始化項目後將生成一個package.json文件，如圖：

2、安裝依賴

• 安裝開發環境依賴：npm install --save-dev babel-core babel-loader babel-plugin-import babel-preset-latest babel-preset-react babel-preset-stage-0 clean-webpack-plugin css-loader file-loader html-webpack-plugin node-sass sass-loader style-loader url-loader webpack webpack-cli webpack-dev-server
  a> 其中babel系列支持我們使用ES6語法（具體項目可選）；
  b> webpack系列（包括各種加載器）是我們的模塊打包工具，也是搭建開發環境的重要成員。
  c> webpack4需搭配webpack-cli使用
• 安裝react依賴：npm install --save react react-dom react-router-dom

安裝完成之後package.json中會多出兩個屬性：devDependencies、dependencies，如圖：

3、配置執行命令

package.json中修改scripts屬性爲：

  "scripts": {
    "dev": "webpack-dev-server --hot --inline --progress --colors --config config/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "webpack --progress --colors --config config/webpack.prod.conf.js"
  },

dev字段配置開發環境命令npm run dev：

• webapck-dev-server啓動開發環境服務器，
• --config config/webpack.dev.conf.js表示輸入npm run dev時，實際執行的文件是package.json同級目錄下，config文件夾下的webapck.dev.conf.js文件（自己編寫）。 如果去掉，將執行默認配置，這裏我們將全部使用自己寫的配置，以便更好地發現和解決問題。

4、創建項目目錄

新增目錄文件，並創建Hello World代碼示例。如圖所示：

• config目錄存放webpack配置文件：
  a> webpack.base.conf.js爲公用配置；
  b> webpack.dev.conf.js爲開發環境配置，繼承自webpack.base.conf.js；
  c> webpack.prod.conf.js爲生產環境配置，繼承自webpack.base.conf.js。
• src目錄存放項目代碼：
  a> main.js爲項目入口文件，負責掛載react組件到<div id="app"></div>上；
  b> App.js爲React項目根組件，components爲具體的react組件（這些在環境搭建完成之後纔會做細分）。

5、webpack開發配置

接下來的配置需先安裝依賴： webpack-merge、uglifyjs-webpack-plugin。（更多配置請按需引入）
重點在於入口、出口、plugins，這幾個配好了就可以啓動了。其他的是後期要優化的，比如熱更新、代碼分離等。
webpack.base.conf.js關鍵配置如下：

'use strict'
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 入口起點
  entry: {
    app: './src/main.js',
  },
  // 輸出
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: "[name].js",
  },
  // 解析
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json']
  },
  // loader
  module: {
    rules: [
      {
        test: /\.js|jsx$/,
        exclude: /(node_modules|bower_components)/,// 屏蔽不需要處理的文件（文件夾）（可選）
        loader: 'babel-loader'
      }
    ]
  },
  // 插件
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: 'body'
    })
  ]
};

webpack.dev.conf.js配置如下：

'use strict'
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');

const path = require('path');
const webpack = require('webpack');

module.exports = merge(baseWebpackConfig, {
  // 模式
  mode: "development",
  // 調試工具
  devtool: 'inline-source-map',
  // 開發服務器
  devServer: {
    contentBase: false,// 默認webpack-dev-server會爲根文件夾提供本地服務器，如果想爲另外一個目錄下的文件提供本地服務器，應該在這裏設置其所在目錄
    historyApiFallback: true,// 在開發單頁應用時非常有用，它依賴於HTML5 history API，如果設置爲true，所有的跳轉將指向index.html
    compress: true,// 啓用gzip壓縮
    inline: true,// 設置爲true，當源文件改變時會自動刷新頁面
    hot: true,// 模塊熱更新，取決於HotModuleReplacementPlugin
    host: '127.0.0.1',// 設置默認監聽域名，如果省略，默認爲“localhost”
    port: 8703// 設置默認監聽端口，如果省略，默認爲“8080”
  },
  // 插件
  plugins: [
    // 熱更新相關
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  optimization: {
    nodeEnv: 'development',
  }
});

.babelrc配置如下：

{
  "presets": ["latest", 'react', "stage-2"],
  "plugins": []
}

現在我們嘗試啓動一下npm run dev，報錯如下：

babel-loader版本問題，降級到7.x.x版本（如7.1.5）即可。如下圖所示即運行成功：

6、Webpack生產配置

webpack.prod.conf.js直接繼承webpack.base.conf.js，執行npm run build如圖所示：

生成的app.js文件有110K，對比我們的代碼量來說（main.js只有233B，佔空間4K），這實在太大了！
這時候我們需要的就是webpack的代碼分離了：把代碼分離到不同的 bundle 中，然後可以按需加載或並行加載這些文件。
配置webpack.prod.conf.js如下：

'use strict'
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = merge(baseWebpackConfig, {
  // 模式
  mode: "production",
  // 調試工具
  devtool: '#source-map',
  // 輸出
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: "js/[name].[chunkhash].js",
  },
  // 插件
  plugins: [
    new CleanWebpackPlugin(['dist', 'build'], {
      root: path.resolve(__dirname, '../'),
    }),
    new webpack.HashedModuleIdsPlugin(),
  ],
  // 代碼分離相關
  optimization: {
    nodeEnv: 'production',
    minimizer: [new UglifyJSPlugin()],
    runtimeChunk: {
      name: 'manifest'
    },
    splitChunks: {
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      name: false,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'initial',
        }
      }
    }
  }
});

現在我們再來編譯一次，如圖：

可以看到由原來一個js文件（app.js）變成了三個js文件（manifest.js、vendor.js和app.js），app.js的大小也變成了一個合適的大小1.31k

---

總結：本來是想入坑react，沒想到先研究了一遍webpack的配置。從vue-cli官方定製到純手工一項一項的配置，學到的東西還是挺多的，也更加理解了webpack模塊化的概念。目前算是對熱更新、代碼分離這些有了比較深刻的認識，然而要學的東西還有很多，繼續努力吧~