從零搭建webpack4+react+typescript+eslint腳手架(四)

配置webpack開發服務器

打包用的配置基本完成了，現在我們來配置一下開發環境。

首先處理通用配置config.js：

module.exports = {
  // ...configs
  devServer: {
    port: 8080,
    host: 'localhost',
    contentBase: path.join(__dirname, '../public'),
    watchContentBase: true,
    publicPath: '/',
    compress: true,
    historyApiFallback: true,
    hot: true,
    clientLogLevel: 'error',
    open: true,
    overlay: false,
    quiet: false,
    noInfo: false,
    watchOptions: {
      ignored: /node_modules/
    },
    proxy: {}
  }
};

然後增加開發配置：

// webpack.dev.js
const path = require('path');
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const config = require('./config');

module.exports = merge.smart(baseWebpackConfig, {
  mode: 'development',
  output: {
    filename: 'js/[name].[hash:8].js',
    publicPath: config.publicPath
  },
  module: {
    rules: [
      {
        oneOf: []
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: config.indexPath,
      minify: {
        html5: true
      },
      hash: false
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    ...config.devServer
  }
});

在package.json中增加開發環境運行命令：

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server --config ./config/webpack.dev.js"
}

運行npm run dev看看效果吧。

自定義多環境

一般來說，我們在開發應用的時候會面臨多個環境差異的問題，例如，我們有：

• 一個開發環境，提交代碼即可立刻看到效果，它的接口地址可能是http://dev-api.tianzhen.tech
• 一個測試環境，它需要保持一定程度的穩定性，每隔一小時發佈一次新版本，接口地址可能是：https://t1-api.tianzhen.tech
• 預發佈環境，它與生產環境共享持久化數據，在這個環境做最後一次檢查，等待發布
• 生產環境，他需要保持高度穩定，一週發佈一個版本，接口地址可能是：https://api-tianzhen.tech

四套環境，不同的接口地址，不同的訪問地址，可能還涉及到不同的微信、支付寶鑑權。

許多人採用的方案是這樣的，寫幾個不同的配置文件，切換環境時修改引入的配置，但是這樣做經常會忘記切環境導致生產事故。這裏提供一套自動多環境的配置方案。

依然先安裝依賴：

$ npm i -D dotenv dotenv-expand # 從配置文件中讀取並注入環境變量
$ npm i -D interpolate-html-plugin # 向模板注入環境變量

在根目錄下新建幾個環境配置文件：.env，.env.dev，.env.prod，文件名的格式是固定的，符合 .env[.name][.local]即可，同名的配置會按照優先級覆蓋或自動合併，例如環境名稱是dev，那麼優先級就是.env.dev.local，.env.dev，.env.local，.env，高優先級覆蓋低優先級。

我們隨意編寫一個環境變量配置：

// .env.dev
// 變量名要以 REACT_APP_ 開頭
REACT_APP_ENV='dev'
REACT_APP_API_ROOT='http://dev-api.tianzhen.tech'

在config目錄下新建一個env.js文件，用這個腳本來讀取環境變量配置，用於以後注入到react項目中：

const fs = require('fs');
const path = require('path');
const argv = require('yargs').argv;
const dotenv = require('dotenv');
const dotenvExpand = require('dotenv-expand');

const env = argv.env || 'production';
const ENV_FILE_PATH = path.resolve(__dirname, '../.env');

let dotenvFiles = [
  `${ENV_FILE_PATH}.${env}.local`,
  `${ENV_FILE_PATH}.${env}`,
  env !== 'test' && `${ENV_FILE_PATH}.local`,
  ENV_FILE_PATH
].filter(Boolean);

dotenvFiles.forEach((dotenvFile) => {
  if (fs.existsSync(dotenvFile)) {
    dotenvExpand(dotenv.config({
      path: dotenvFile
    }));
  }
});

const REACT_APP = /^REACT_APP_/i;

function getClientEnvironment(publicUrl) {
  publicUrl = process.env.NODE_ENV === 'production' ? publicUrl.slice(0, -1) : '';
  const raw = Object.keys(process.env)
    .filter(key => REACT_APP.test(key))
    .reduce(
      (env, key) => {
        env[key] = process.env[key];
        return env;
      },
      {
        NODE_ENV: process.env.NODE_ENV || 'production', // webpack在production模式下會自動啓用一些配置
        APP_ENV: env,
        PUBLIC_URL: publicUrl
      }
    );
  
  const stringified = {};
  Object.keys(raw).forEach((key, index) => {
    stringified['process.env.' + key] = JSON.stringify(raw[key]);
  });

  return { raw, stringified };
}

module.exports = getClientEnvironment;

修改webpack配置，向react應用和index.html注入環境變量

// webpack.base.js
const InterpolateHtmlPlugin = require('interpolate-html-plugin');
const getClientEnvironment = require('./env');

const env = getClientEnvironment(config.publicPath);

plugins: [
  new HtmlWebpackPlugin(),
  // 注意：注入插件一定要在HtmlWebpackPlugin之後使用
  // 在html模板中能夠使用環境變量
  // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
  new InterpolateHtmlPlugin(env.raw),
  // 在js代碼中能夠使用環境變量(demo: process.env.REACT_APP_ENV === 'dev')
  new webpack.DefinePlugin(env.stringified),
]

配置都做好了，如何讓打包命令知道當前用的哪個環境呢，我們修改一下打包命令，加上env參數：

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server --config ./config/webpack.dev.js --env=dev",
  "build:prod": "cross-env NODE_ENV=production node config/build.js --env=prod --report",
  "build:t1": "cross-env NODE_ENV=production node config/build.js --env=t1 --report",
  "build:dev": "cross-env NODE_ENV=production node config/build.js --env=dev --report"
}

把同樣的配置，分別配置到webpack.prod.js和webpack.dev.js中，然後運行對應打包命令，就可以看到項目中成功注入了環境變量。例如，想要使用.env.dev中的變量，則打包命令中增加參數--env=dev即可，配置將由.env.dev.local，.env.dev，.env.local，.env合併覆蓋生成。

webpack根據NODE_ENV的值來自動選擇production或development模式編譯，因此，如果沒有必須要求，儘量不要以NODE_ENV的值做爲打包環境依據，否則就要自行處理更復雜的webpack配置。

preload，prefetch

preload和prefetch是一組能夠預讀資源，優化用戶體驗的工具，這裏給出一個在首頁預讀字體和圖片的例子，來演示它們結合webpack的使用方法，詳見文檔。

安裝依賴：

$ npm i -D preload-webpack-plugin

修改webpack.prod.js：

const PreloadWebpackPlugin = require('preload-webpack-plugin')

plugins: [
  new PreloadWebpackPlugin({
    rel: 'preload',
    as(entry) {
      if (/\.css$/.test(entry)) return 'style';
      if (/\.woff$/.test(entry)) return 'font';
      if (/\.png$/.test(entry)) return 'image';
      return 'script';
    },
    include: ['app']
    // include:'allChunks'
  }),
]

配置按需加載

配置按需加載，可以將每個頁面或組件拆成獨立的包，減小首頁加載內容的體積，是很好的優化策略。

安裝依賴：

npm i -D @babel/plugin-syntax-dynamic-import

修改webpack.base.js

{
  test: /\.(j|t)sx?$/,
  include: APP_PATH,
  use: [
    {
      loader: 'babel-loader',
      options: {
        plugins: [
          '@babel/plugin-syntax-dynamic-import', // 這是新加入的項
          ['@babel/plugin-proposal-class-properties', { 'loose': true }]
        ],
        cacheDirectory: true
      }
    }
  ]
}

配置完後，就可以用import的方式載入組件了：

// demo
const HelloWorldPage = import('@/pages/demo/HelloWorldDemo/HelloWorldDemoPage');

至此，腳手架已經基本可以使用，並且完成了一部分優化。接下來的文章內容主要是圍繞開發體驗和團隊規範展開的，還會涉及到一個比較優秀的react路由實踐。