Webpack 不同环境下的配置_devserver 多环境-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_50964668/article/details/115273682

本文介绍了如何使用Webpack为开发和生产环境配置不同的打包设置。通过webpack.common.js（公共配置）、webpack.dev.js（开发环境配置）和webpack.prod.js（生产环境配置）三个文件，实现环境间的差异性配置。在开发环境中，启用source map和dev-server；而在生产环境中，关闭source map，使用CleanWebpackPlugin清理旧代码，并应用hash以提示浏览器更新。

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

Webpack 不同环境下的配置

我们在使用 Webpack 去构建我们的项目的时候，我们肯定要区分本地开发环境和线上环境的一些配置，因为它们两者有很多不同的地方，例如线上环境我们就不需要开启 source map 这样的选项来防止别人暴露我们的源代码。所以我们可以通过使用不同配置文件去在不同环境下打包我们的代码。
我们至少需要三个文件去配置我们的项目

webpack.common.js 公共配置
webpack.dev.js 开发环境配置
webpack.prod.js 生产环境配置

这样我们就能使用不同的配置文件去配置不同的环境，这时我们还需要一个插件 webpack-merge 去在开发配置文件和生产配置文件中合并我们的公共配置文件

// 安装 webpack-merge
yarn add webpack-merge --dev

webpack.common.js

这个文件我们可以用来配置一些公共的 webpack 配置

const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin') // 配合 vue-loader 使用，用于编译转换 .vue 文件
const HtmlWebpackPlugin = require('html-webpack-plugin') // 用于生成 index.html 文件

module.exports = {
   
  entry: './src/main.js',
  output: {
   
    filename: 'js/bundle.js'
  },
  module: {
   
    rules: [
      {
   
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // 它会应用到普通的 `.js` 文件
      // 以及 `.vue` 文件中的 `<script>` 块
      {
   
        test: /.js$/,
        use: {
   
          loader: 'babel-loader',
          options: {
   
            pres