配置webpack開發(fā)服務(wù)器

打包用的配置基本完成了，現(xiàn)在我們來配置一下開發(fā)環(huán)境。

首先處理通用配置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: {}
  }
};

然后增加開發(fā)配置：

// 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中增加開發(fā)環(huán)境運(yùn)行命令：

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

運(yùn)行npm run dev看看效果吧。

自定義多環(huán)境

一般來說，我們?cè)陂_發(fā)應(yīng)用的時(shí)候會(huì)面臨多個(gè)環(huán)境差異的問題，例如，我們有：

• 一個(gè)開發(fā)環(huán)境，提交代碼即可立刻看到效果，它的接口地址可能是http://dev-api.tianzhen.tech
• 一個(gè)測(cè)試環(huán)境，它需要保持一定程度的穩(wěn)定性，每隔一小時(shí)發(fā)布一次新版本，接口地址可能是：https://t1-api.tianzhen.tech
• 預(yù)發(fā)布環(huán)境，它與生產(chǎn)環(huán)境共享持久化數(shù)據(jù)，在這個(gè)環(huán)境做最后一次檢查，等待發(fā)布
• 生產(chǎn)環(huán)境，他需要保持高度穩(wěn)定，一周發(fā)布一個(gè)版本，接口地址可能是：https://api-tianzhen.tech

四套環(huán)境，不同的接口地址，不同的訪問地址，可能還涉及到不同的微信、支付寶鑒權(quán)。

許多人采用的方案是這樣的，寫幾個(gè)不同的配置文件，切換環(huán)境時(shí)修改引入的配置，但是這樣做經(jīng)常會(huì)忘記切環(huán)境導(dǎo)致生產(chǎn)事故。這里提供一套自動(dòng)多環(huán)境的配置方案。

依然先安裝依賴：

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

在根目錄下新建幾個(gè)環(huán)境配置文件：.env，.env.dev，.env.prod，文件名的格式是固定的，符合 .env[.name][.local]即可，同名的配置會(huì)按照優(yōu)先級(jí)覆蓋或自動(dòng)合并，例如環(huán)境名稱是dev，那么優(yōu)先級(jí)就是.env.dev.local，.env.dev，.env.local，.env，高優(yōu)先級(jí)覆蓋低優(yōu)先級(jí)。

我們隨意編寫一個(gè)環(huán)境變量配置：

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

在config目錄下新建一個(gè)env.js文件，用這個(gè)腳本來讀取環(huán)境變量配置，用于以后注入到react項(xiàng)目中：

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模式下會(huì)自動(dòng)啟用一些配置
        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應(yīng)用和index.html注入環(huán)境變量

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

const env = getClientEnvironment(config.publicPath);

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

配置都做好了，如何讓打包命令知道當(dāng)前用的哪個(gè)環(huán)境呢，我們修改一下打包命令，加上env參數(shù)：

"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中，然后運(yùn)行對(duì)應(yīng)打包命令，就可以看到項(xiàng)目中成功注入了環(huán)境變量。例如，想要使用.env.dev中的變量，則打包命令中增加參數(shù)--env=dev即可，配置將由.env.dev.local，.env.dev，.env.local，.env合并覆蓋生成。

webpack根據(jù)NODE_ENV的值來自動(dòng)選擇production或development模式編譯，因此，如果沒有必須要求，盡量不要以NODE_ENV的值做為打包環(huán)境依據(jù)，否則就要自行處理更復(fù)雜的webpack配置。

preload，prefetch

preload和prefetch是一組能夠預(yù)讀資源，優(yōu)化用戶體驗(yàn)的工具，這里給出一個(gè)在首頁預(yù)讀字體和圖片的例子，來演示它們結(jié)合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'
  }),
]

配置按需加載

配置按需加載，可以將每個(gè)頁面或組件拆成獨(dú)立的包，減小首頁加載內(nèi)容的體積，是很好的優(yōu)化策略。

安裝依賴：

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', // 這是新加入的項(xiàng)
          ['@babel/plugin-proposal-class-properties', { 'loose': true }]
        ],
        cacheDirectory: true
      }
    }
  ]
}

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

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

至此，腳手架已經(jīng)基本可以使用，并且完成了一部分優(yōu)化。接下來的文章內(nèi)容主要是圍繞開發(fā)體驗(yàn)和團(tuán)隊(duì)規(guī)范展開的，還會(huì)涉及到一個(gè)比較優(yōu)秀的react路由實(shí)踐。