webpack5配置react基礎(chǔ)生產(chǎn)環(huán)境

一、前言

在項目構(gòu)建時不同的環(huán)境下會有不同配置，在前面文章中已經(jīng)使用webpack5配置好了基礎(chǔ)環(huán)境和開發(fā)環(huán)境，但是在生產(chǎn)環(huán)境時有些配置和開發(fā)環(huán)境是不需要的，有些是可以在優(yōu)化的，所以下面繼續(xù)生產(chǎn)環(huán)境的配置。

二、生產(chǎn)環(huán)境配置

1、添加生產(chǎn)環(huán)境基礎(chǔ)配置

首先我們需要在已經(jīng)創(chuàng)建好的文件webpack.prod.js進(jìn)行生產(chǎn)環(huán)境獨(dú)有的配置，然后在引入生產(chǎn)環(huán)境和開發(fā)環(huán)境公用的基礎(chǔ)配置。
修改webpack.prod.js文件，添加生產(chǎn)環(huán)境的基礎(chǔ)配置

// webpack.prod.js
const { resolve } = require('./tools');
const { merge } = require('webpack-merge'); // 引入合并方法
const baseConfig = require('./webpack.base'); // 引入基礎(chǔ)配置

module.exports = merge(baseConfig, {
  mode: 'production', // 設(shè)置模式為production
})

然后修改package.json文件下的build打包指令,將生產(chǎn)環(huán)境打包文件指向config/webpack.prod.js

  // package.json
  "scripts": {
    "build": "webpack --config config/webpack.prod.js",
  },

執(zhí)行 npm run build 命令打包，此時react-refresh/babel會報錯因為熱更新插件在生產(chǎn)環(huán)境的時候應(yīng)該禁用，所以我們先把他注釋掉在執(zhí)行打包命令，此時最最基礎(chǔ)的生產(chǎn)環(huán)境配置就完成了。

2、安裝Live Server 插件查看效果

上面完成了生產(chǎn)環(huán)境最基礎(chǔ)的配置，也成功打包，但是不知道打包后的代碼在加載的時候是不是有問題，所以需要借助第三方的服務(wù)插件查看打包后的頁面效果

在vscode插件商店安裝Live Server 插件

然后修改Live Server 的root地址為dist，這樣我們就可以直接加載打包后的資源

修改好配置后，鼠標(biāo)右鍵選擇index.html文件選擇使用Live Server打開此時就可以直接查看打包效果

3、添加環(huán)境變量

在打包的時候我們需要區(qū)分開發(fā)環(huán)境和生產(chǎn)環(huán)境（如上面熱更新插件的使用），在不通用的配置下我們可以通過配置文件的拆分實(shí)現(xiàn)，在通用配置的時候我們就需要在執(zhí)行打包命令時注入來實(shí)現(xiàn)

使用 cross-env 依賴庫來注入環(huán)境變量，安裝cross-env

npm i cross-env -D

修改package.json 文件下打包指令

  // package.json
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --config config/webpack.prod.js",
    "dev": "cross-env NODE_ENV=development webpack-dev-server -c config/webpack.dev.js"
  },

然后在webpack.base.js 文件下添加打印

console.log(process.env.NODE_ENV, 1111111111);

分別執(zhí)行npm run build 和npm run dev查看變量打印的值

上面成功注入了在打包過程中環(huán)境變量，有時候我們的項目也需要業(yè)務(wù)中全局變量這個時候可以使用webpack中DefinePlugin插件實(shí)現(xiàn)

修改webpack.base.js 文件增加業(yè)務(wù)中全局變量插件配置

// webpack.base.js
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({ // 調(diào)用插件
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      },
    }),
  ]
}

4、根據(jù)變量配置插件

添加完環(huán)境變量后首先根據(jù)環(huán)境變量去處理不同插件和loader的配置

首先提取出一個判斷生產(chǎn)環(huán)境的函數(shù)，修改config/tools.js文件

// tools.js
function isProd() {
  return process.env.NODE_ENV === 'production';
}

module.exports = {
  isProd
};

修改babel.config.js文件根據(jù)變量處理熱更新插件

// babel.config.js
const { isProd } = require('./config/tools');

module.exports = {
  plugins: [
    !isProd() && require.resolve('react-refresh/babel')
  ].filter(Boolean)
}

此時在執(zhí)行npm run build指令進(jìn)行打包正常不在報錯。

在開發(fā)環(huán)境我們處理css文件時使用style-loader將解析后的css插入到head標(biāo)簽中進(jìn)行加載方便調(diào)試和樣式熱替換，在生產(chǎn)環(huán)境中我們會將css抽離出單獨(dú)的文件資源并引入使用可以利用緩存配置。下面使用mini-css-extract-plugin插件完成

// 安裝
npm i mini-css-extract-plugin -D

修改webpack.base.js文件，生產(chǎn)環(huán)境下使用mini-css-extract-plugin插件loader開發(fā)環(huán)境下還使用style-loader

// webpack.base.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 引入抽離css插件
const { isProd } = require('./tools');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // 生產(chǎn)環(huán)境下使用MiniCssExtractPlugin.loader
          isProd() ? MiniCssExtractPlugin.loader : 'style-loader',
          'css-loader',
        ]
      },
      // 當(dāng)使用多個loader處理模塊時，use為數(shù)組格式，并且loader的執(zhí)行順序為從下到上，從后往前。
      {
        test: /\.less$/,
        use: [
          isProd() ? MiniCssExtractPlugin.loader : 'style-loader',
          'css-loader',
          'less-loader'
        ],
        include: resolve("src"),
      },
    ]
  },
}

修改webpack.prod.js文件，進(jìn)行mini-css-extract-plugin插件調(diào)用并設(shè)置抽離出css文件名等

// webpack.prod.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 引入抽離css插件

module.exports = merge(baseConfig, {
  plugins: [
    // 調(diào)用抽離插件
    new MiniCssExtractPlugin({
      // 抽離后的資源名稱和存放路徑
      filename: 'static/css/[name].[contenthash:8].css',
      // 非入口的 chunk 文件名稱
      chunkFilename: 'static/css/[name].[contenthash:8].css',
    })
  ]
})

執(zhí)行npm run build 打包命令，查看live-server上的項目效果

5、代碼壓縮

上面css代碼已經(jīng)被抽離出單獨(dú)文件并且以資源的方式日引入使用，但是這時候我們看dist目錄下已經(jīng)打包好的css文件里面的內(nèi)容沒有被壓縮還是正常展示，在生產(chǎn)環(huán)境上加載資源的大小也影響加載性能。下面我們使用css-minimizer-webpack-plugin插件進(jìn)行壓縮css文件（也可以使用optimize-css-assets-webpack-plugin）

安裝

npm install css-minimizer-webpack-plugin --save-dev

修改webpack.prod.js文件，進(jìn)行css-minimizer-webpack-plugin插件的調(diào)用

// webpack.prod.js
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); // 引入css壓縮插件

module.exports = merge(baseConfig, {
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ],
  },
})

然后執(zhí)行npm run build打包命令,查看打包后的css文件是否壓縮和頁面是否加載正常

css代碼成功壓縮后，下面來配置js代碼壓縮，其實(shí)當(dāng)webpack設(shè)置模式為production時js文件的代碼會自動進(jìn)行壓縮，但是因為我們上面配置optimization.minimizer后這個壓縮就失效了，所以需要我們再次安裝terser-webpack-plugin插件調(diào)用即可

npm install terser-webpack-plugin --save-dev

修改webpack.prod.js文件，調(diào)用terser-webpack-plugin插件

// webpack.prod.js
const TerserPlugin = require("terser-webpack-plugin"); // 引入js壓縮插件

module.exports = merge(baseConfig, {
  optimization: {
    minimizer: [
      new TerserPlugin({
        // 傳入刪除注釋配置
        terserOptions: {
          format: {
            comments: false,
          },
        },
        extractComments: false,
      })
    ],
  },
})

再次執(zhí)行npm run build命令查看打包后的文件和頁面效果是否正常即可。

三、結(jié)語

使用webpack5配置react的生產(chǎn)環(huán)境的基礎(chǔ)也完成了，但是還有許多可以優(yōu)化的細(xì)節(jié)，后面繼續(xù)將可以優(yōu)化的地方加進(jìn)來。文章來源地址http://www.zghlxwxcb.cn/news/detail-412029.html

到了這里，關(guān)于webpack5搭建react框架-生產(chǎn)環(huán)境配置的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！