本文详解如何在 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
}
}以上内容为本文全部，希望对学习有所帮助，欢迎支持本站。