651 webpack环境分离：区分环境，入口文件解析，配置文件的分离

如何区分开发环境

---

入口文件解析

---

配置文件的分离

---

目录结构

---

package.json

{
  "name": "webpack_devserver",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config ./config/webpack.prod.js",
    "serve": "webpack serve --config ./config/webpack.dev.js",
    "build2": "webpack --config ./config/webpack.common.js --env production",
    "serve2": "webpack serve --config ./config/webpack.common.js --env development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.17",
    "@babel/preset-env": "^7.12.17",
    "@babel/preset-react": "^7.12.13",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.2",
    "html-webpack-plugin": "^5.2.0",
    "react-refresh": "^0.9.0",
    "style-loader": "^2.0.0",
    "vue-loader": "^15.9.6",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^5.23.0",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.7.3"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "vue": "^2.6.12",
    "webpack-dev-middleware": "^4.1.0"
  }
}

---

index.js

import axios from 'axios';

import React from 'react';
import ReactDom from 'react-dom';
import ReactApp from './App.jsx';

import Vue from 'vue';
import VueApp from './App.vue';

import "./math";

console.log("Hello Coderwhy");
console.log("abc");

if (module.hot) {
  module.hot.accept("./math.js", () => {
    console.log("math模块发生了更新~");
  });
}

// React的代码
ReactDom.render(<ReactApp/>, document.getElementById("app"));

// Vue的代码
new Vue({
  render: h => h(VueApp)
}).$mount("#root");

// axios网络请求
axios.get("http://localhost:8080/why/moment").then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
});

// development/production
console.log(process.env.NODE_ENV);

let baseURL = "";
if (process.env.NODE_ENV === "devlopment") {
  baseURL = ""
} else {
  baseURL = ""
}

---

paths.js

const path = require('path');

// node中的api
// 【即--config ./config/webpack.prod.js 中的config目录所在目录 】
const appDir = process.cwd();
// 【传递相对目录】
const resolveApp = (relativePath) => path.resolve(appDir, relativePath);
module.exports = resolveApp;

---

webpack.common.js

const resolveApp = require("./paths");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const { merge } = require("webpack-merge");
const prodConfig = require("./webpack.prod");
const devConfig = require("./webpack.dev");

const commonConfig = {
  entry: "./src/index.js", // 不是 ../
  output: {
    filename: "bundle.js",
    path: resolveApp("./build"),
  },
  resolve: {
    extensions: [".wasm", ".mjs", ".js", ".json", ".jsx", ".ts", ".vue"],
    alias: {
      "@": resolveApp("./src"),
      pages: resolveApp("./src/pages"),
    },
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/i,
        use: "babel-loader",
      },
      {
        test: /\.vue$/i,
        use: "vue-loader",
      },
      {
        test: /\.css/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
    }),
    new VueLoaderPlugin(),
  ]
};

// 【告诉当前的配置文件当前所处的环境，从package.json的"build2": "webpack --config ./config/webpack.common.js --env production"拿到 production 】
module.exports = function(env) {
  const isProduction = env.production; // true或者false
  process.env.NODE_ENV = isProduction ? "production": "development";

  const config = isProduction ? prodConfig : devConfig;
  const mergeConfig = merge(commonConfig, config);

  return mergeConfig;
};

---

webpack.dev.js

const resolveApp = require('./paths');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

const isProduction = false;

console.log("加载devConfig配置文件");

module.exports = {
  mode: "development",
  devServer: {
    hot: true,
    hotOnly: true,
    compress: true,
    contentBase: resolveApp("./why"),
    watchContentBase: true,
    proxy: {
      "/why": {
        target: "http://localhost:8888",
        pathRewrite: {
          "^/why": ""
        },
        secure: false,
        changeOrigin: true
      }
    },
    historyApiFallback: {
      rewrites: [
        {from: /abc/, to: "/index.html"}
      ]
    }
  },
  plugins: [
    // 开发环境
    new ReactRefreshWebpackPlugin(),
  ]
}

---

webpack.prod.js

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const isProduction = true;

module.exports = {
  mode: "production",
  plugins: [
    // 生产环境
    new CleanWebpackPlugin({})
  ]
}

---