如何区分开发环境

入口文件解析

配置文件的分离

目录结构

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模块发生了更新~"); |
| }); |
| } |
| |
| |
| ReactDom.render(<ReactApp/>, document.getElementById("app")); |
| |
| |
| new Vue({ |
| render: h => h(VueApp) |
| }).$mount("#root"); |
| |
| |
| axios.get("http://localhost:8080/why/moment").then(res => { |
| console.log(res); |
| }).catch(err => { |
| console.log(err); |
| }); |
| |
| |
| console.log(process.env.NODE_ENV); |
| |
| let baseURL = ""; |
| if (process.env.NODE_ENV === "devlopment") { |
| baseURL = "" |
| } else { |
| baseURL = "" |
| } |
| |
paths.js
| const path = require('path'); |
| |
| |
| |
| 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(), |
| ] |
| }; |
| |
| |
| module.exports = function(env) { |
| const isProduction = env.production; |
| 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({}) |
| ] |
| } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步