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'
});
相关推荐
百思可瑞教育17 小时前
Vue.config.js中的Webpack配置、优化及多页面应用开发
前端·javascript·vue.js·webpack·uni-app·北京百思教育
歪歪10017 小时前
webpack 配置文件中 mode 有哪些模式?
开发语言·前端·javascript·webpack·前端框架·node.js
歪歪10017 小时前
如何配置Webpack以实现按需加载模块?
开发语言·前端·webpack·node.js
谢尔登1 天前
【Webpack】模块联邦
前端·webpack·node.js
Yvonne爱编码3 天前
构建高效协作的桥梁:前后端衔接实践与接口文档规范详解
前端·git·ajax·webpack·node.js
会有钱的-_-4 天前
基于webpack的场景解决
前端·vue.js·webpack·安全性测试
xiaopengbc4 天前
在Webpack中,如何在不同环境中使用不同的API地址?
前端·webpack·node.js
ningmengjing_5 天前
webpack打包方式
前端·爬虫·webpack·node.js·逆向
Yuner20005 天前
Webpack开发:从入门到精通
前端·webpack·node.js
passer9816 天前
基于webpack的场景解决
前端·webpack