webpack.config.js区分开发和生产模式(7)

最新推荐文章于 2024-04-14 17:34:14 发布

撒路耶不冷

最新推荐文章于 2024-04-14 17:34:14 发布

阅读量466

点赞数

CC 4.0 BY-SA版权

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/weixin_56817537/article/details/126893621

webpack 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何根据不同环境（开发和生产）对webpack配置进行拆分和管理。通过创建webpack.common.config.js作为公共配置，webpack.dev.config.js和webpack.prod.config.js分别对应开发和生产环境的特定配置。在开发环境中，配置了devServer、热更新和代理服务器；而在生产环境中，添加了清理旧包和复制静态资源的插件。这一做法使得环境配置更加清晰且易于维护。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当前我们的webpack的配置会有一些问题，比如说有一些配置需要在开发环境下使用如：devServe，souremap等，有些需要在生产环境下配置，如每次打包删除原来的包

1，于是我们可以对webpack的配置进行分包，来区分哪个是生产环境使用，哪个开发环境下使用，哪个是公共的，目录结构：

2，然后我们可以在pack.json的script节点下：指定生产和开发环境下webpack.config.js的入口：

3，合并公共配置： 在生产和开发环境下的webpack.config.js，于公共的webpack配置进行合并需要借助webpack提供的插件：npm install webpack-merge -D，进行合并。 贴配置：

①webpack.common.config.js：

const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const { DefinePlugin } = require("webpack");
const { VueLoaderPlugin } = require("vue-loader/dist/index");

module.exports = {
  target: "web", //配合模块热更新，实现刷新
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../build"),
    filename: "js/bundle.js"
  },
  //路径解析模块，配置了之后项目中引入时就不再需要给文件加后缀
  resolve: {
    //项目中引入哪些类型的文件时不用后缀
    extensions: [".js", ".json", ".vue", ".ts", ".jsx"],
    //配置路径别名,把根目录中的src文件夹配置为@
    alias: {
      "@": path.resolve(__dirname, "../src")
    }
  },
  module: {
    rules: [
      {
        test: /\.(less||css)$/,
        use: ["style-loader", "css-loader", "postcss-loader", "less-loader"]
      },
      {
        test: /\.(jpg|svg|png)$/i,
        type: "asset",
        generator: {
          filename: "img/[name]_[hash:6][ext]"
        },
        parser: {
          dataUrlCondition: {
            maxSize: 100 * 1024
          }
        }
      },
      {
        test: /\.(eot|ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "font/[name]_[hash:6][ext]"
        }
      },
      {
        test: /\.js$/,
        use: ["babel-loader"]
      },
      {
        test: /\.vue$/,
        use: ["vue-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./public/index.html",
      title: "模板"
    }),
    new DefinePlugin({
      BASE_URL: "'./'",
      //是否支持vue2的optionsAPI
      __VUE_OPTIONS_API__: true,
      //是否再生产环境支持vue插件
      __VUE_PROD_DEVTOOLS__: false
    }),
    new VueLoaderPlugin()
  ]
};

②webpack.dev.config.js

//开发环境webpack配置
//导入webpack合并公共配置的插件
const { merge } = require("webpack-merge");
//获取公共的webpack配置
const commonConfig = require("./webpack.common.config");

module.exports = merge(commonConfig, {
  mode: "development",
  devtool: "source-map",
  devServer: {
    //当我们的打包后的文件中没有要找的文件，就去./pubilc下去找,只在生产环境有用
    // contentBase: "../public",
    hot: true,
    host: "0.0.0.0",
    port: "9527",
    compress: true,
    proxy: {
      //会开启一台本地代理服务器,通过代理服务器请求，服务器之间不会跨域
      "/api": {
        //请求所去往的地址，请求路径中需要/aip开头才能被代理
        target: "http//www.baidu.com:4000",
        pathRewrite: {
          //匹配以/api开头的请求，把/api重写为""
          "^/api": ""
        },
        //如果要代理https请求
        secure: true,
        //把本地的源改为目标url的源
        changeOrigin: true
      }
    }
  }
});

③webpack.prod.config.js中

//打包时把icon移动到打包后的文件夹
const CopyWebpackPlugin = require("copy-webpack-plugin");
//每次打包清理上次打包的文件
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

//导入webpack合并公共配置的插件
const { merge } = require("webpack-merge");
//获取公共的webpack配置
const commonConfig = require("./webpack.common.config");

module.exports = merge(commonConfig, {
  mode: "production",
  plugins: [
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: "./public",
          globOptions: {
            ignore: ["**/index.html"]
          }
        }
      ]
    })
  ]
});

此时根目录中的webpack.config.js就可以删除了