webpack4 - 配置文件分离(详细教程)

webpack根据开发和生成环境一般可以将配置文件拆分,拆分dev和prod两种环境

bas 复制代码
|- package.json
  |- /build
    |- webpack.base.js
    |- webpack.dev.js
    |- webpack.prod.js

在scripts里修改相应的命令

javascript 复制代码
"dev": "webpack-dev-server --config build/webpack.dev.js",
"build": "webpack --config build/webpack.prod.js"

使用webpack-merge,用以合并通用配置文件与开发环境配置文件

javascript 复制代码
// webpack.dev.js
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base');

module.exports = merge(baseWebpackConfig, {
  mode: 'development',
  devServer: {
    host: '127.0.0.1',
    port: 80,
    contentBase: path.join(__dirname, 'dist'),
    open: false,
    hot: false,
    disableHostCheck: true,
    proxy: {},
    before () {}
  },
  plugins: [
    // 启用 HMR
    new webpack.HotModuleReplacementPlugin({})
  ]
});
javascript 复制代码
// webpack.prod.js
const baseWebpackConfig = require('./webpack.base');
module.exports = merge(baseWebpackConfig, {
  mode: 'production'
});
相关推荐
Komorebi_99991 天前
webpack相关
前端·webpack·node.js
伍哥的传说1 天前
Webpack5 新特性与详细配置指南
webpack·前端框架·vue·vue3·react·webpack5·前端构建
半桶水专家1 天前
webpack和vite对比
前端·webpack·node.js
今天也在写bug5 天前
webpack中SplitChunks的分割策略
前端·webpack·性能优化·代码分割·splitchunks
ᥬ 小月亮5 天前
webpack高级配置
运维·前端·webpack
豆豆(设计前端)5 天前
解决Vue页面黑底红字遮罩层报错:Unknown promise rejection reason (webpack-internal)
前端·vue.js·webpack
拾光拾趣录6 天前
Webpack性能优化:10个杀手级提速技巧
前端·webpack·turbopack
燃烧的土豆6 天前
React 18 全局错误捕获 + React-router 6 动态权限路由
javascript·react.js·webpack
belowfrog7 天前
模块联邦
webpack
拾光拾趣录7 天前
Vite 与 Webpack 热更新原理
前端·webpack·vite