Webpack 开发与生产环境并行配置指南

作者：测试鸭时间：2026-10-22 19:03:48浏览：189

本文详解如何在 Webpack 项目中同时配置开发与生产环境。通过区分 devDependencies 与 dependencies，利用 npm install 的不同参数管理依赖。重点介绍如何在 package.json 中配置跨平台（Windows/Mac）的脚本命令，结合环境变量实现开发服务器与生产构建的并行运行，确保项目在不同环境下正确加载资源路径。

依赖类型与安装命令解析

依赖安装的四种命令方式

区分生产与开发依赖

项目通常包含开发及生产两种环境，其对应的依赖配置存在差异

开发依赖：仅用于辅助开发过程，如简化代码或生成兼容设置。在package.json的devDependencies字段中列出，生产环境无需这些包。
生产依赖：如前端使用的jquery等库，需在浏览器中运行，属于最终程序必需的依赖。此类包记录在dependencies字段中。

依赖类型与安装命令解析

npm install jquery

此方式不会在package.json中记录依赖。若项目被复制或他人通过git克隆后执行npm install，将缺失该包导致运行失败，故不推荐此方法。

npm install jquery --save

安装后，该包会出现在package.json的dependencies中，表明其为生产环境所需的依赖包（上线必备）。

npm install jquery --save-dev

安装后，该包会出现在package.json的devDependencies中，表明其为开发环境所需，上线时无需此依赖。

npm install

依据package.json文件，自动安装所有生产及开发依赖包。

npm install --production

仅安装生产环境所需的依赖包。

Webpack 并行环境配置

配置开发与生产环境并行运行

webpack.config.js配置文件


console.log(encodeURIComponent(process.env.type));
if (process.env.type == 'build') {
  var website = {
    publicPath: "http://pengrongjie.top:1717/"
  }  
} else {
  var website = {
    publicPath: "http://192.168.1.9:1717/"
  } 
}

package.json（Windows系统）

"dev":"set type=dev&webpack"


 "scripts": {
  "server": "webpack-dev-server --open",
  "dev":"set type=dev&webpack",
  "build": "set type=build&webpack"
 },

package.json（Mac系统）


"scripts": {
  "server": "webpack-dev-server --open",
  "dev":"export type=dev&&webpack",
  "build": "export type=build&&webpack"
 },

开发环境启动


npm run dev

依赖类型与安装命令解析

生产环境构建


npm run build

依赖类型与安装命令解析

webpack.config.js完整代码示例


const path = require('path');
const glob = require('glob');
const uglify = require('uglifyjs-webpack-plugin');
const htmlPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const PurifyCSSPlugin = require('purifycss-webpack');
console.log(encodeURIComponent(process.env.type));
if (process.env.type == 'build') {
  var website = {
    publicPath: "http://pengrongjie.top:1717/"
  }  
} else {
  var website = {
    publicPath: "http://192.168.1.9:1717/"
  } 
}

module.exports = {
  // devtool: 'source-map',
  // 入口 
  entry: {
    entry: './src/entry.js',
  },
  // 出口
  output: {
    //绝对路径
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    publicPath: website.publicPath
  },
  // 模块
  module: {
    //规则
    rules: [
      // {
      //   test: /\.css$/,
      //   use: [
      //     {
      //       loader:'style-loader'
      //     }
      //   ]
      // },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          // use: "css-loader"
          use: [
            { loader: 'css-loader', options: { importLoaders: 1 } },
            'postcss-loader'
          ]
        })
      },
      {
        test: /\.(png|jpg|gif)/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 5000,
            outputPath: 'images/',
          }
        }]
      }, {
        test: /\.(htm|html)$/i,
        use: ['html-withimg-loader']
      },
      // {
      //   test: /\.less$/,
      //   use: [{
      //     loader: 'style-loader'
      //   }, {
      //     loader: 'css-loader'
      //   }, {
      //     loader: 'less-loader'
      //   }]
      // }
      {
        test: /\.less$/,
        use: ExtractTextPlugin.extract({
          use: [{
            loader: 'css-loader',
            options: { importLoaders: 1 }
          }, {
            loader: 'less-loader'
          },'postcss-loader'],
          fallback: 'style-loader'
        })
      },
      // {
      //   test: /\.scss$/,
      //   use: [{
      //     loader:'style-loader'
      //   },{
      //     loader:'css-loader'
      //   },{
      //     loader:'sass-loader'
      //   }]
      // },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          use: [{
            loader: 'css-loader',
            options: { importLoaders: 1 }
          }, {
            loader: 'sass-loader'
            },
            'postcss-loader'],
          fallback: 'style-loader'
        })
      },
      // {
      //   test:/\.(js|jsx)$/,
      //   use:{
      //     loader:'babel-loader',
      //     options:{
      //       presets:[
      //         'es2015',
      //         'react'
      //       ]
      //     }
      //   },
      //   //过滤掉，不编译node_modules中的文件,
      //   exclude:/node_modules/
      // },
      {
        test:/\.(js|jsx)$/,
        use:{
          loader:'babel-loader',
        },
        //过滤掉，不编译node_modules中的文件,
        exclude:/node_modules/
      }
      
    ]
  },
  //插件
  plugins: [
    // new uglify()
    new htmlPlugin({
      minify: {
        removeAttributeQuotes: true
      },
      hash: true,
      template: './src/index.html'
    }),
    new ExtractTextPlugin("css/index.css"),
    new PurifyCSSPlugin({
      paths:glob.sync(path.join(__dirname,'src/*.html')),
    })
  ],
  //开发服务
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    host: '192.168.1.9',
    compress: true, //服务端是否启用压缩
    port: 1717
  }
}

以上内容为本文全部，希望对学习有所帮助，欢迎支持本站。

作者最新文章

生产环境怎么自动移除JS的console.log语句？

2026-11-03 10:59:54

面试刷题必备：怎么利用在线JS沙箱高效验证算法

2026-11-03 09:11:28

使用 Vite 构建 Phaser.js 项目的配置与资源管理

2026-11-02 10:26:07

webpack 自动清理 dist 文件夹的两种实现方法

2026-10-31 14:14:29

Docker部署Jackett完整指南：CLI与Compose配置及索引器使用

2026-10-31 12:57:10