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'
});
相关推荐
吃饺子不吃馅1 天前
【八股汇总,背就完事】这一次再也不怕webpack面试了
前端·面试·webpack
萌萌哒草头将军1 天前
尤雨溪宣布 oxfmt 即将发布!比 Prettier 快45倍 🚀🚀🚀
前端·webpack·vite
weixin_405023371 天前
webpack 学习
前端·学习·webpack
八月ouc3 天前
每日小知识点:10.14 webpack 有几种文件指纹
前端·webpack
街尾杂货店&3 天前
webpack - 单独打包指定JS文件(因为不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改)
前端·javascript·webpack
jiangzhihao05155 天前
前端自动翻译插件webpack-auto-i18n-plugin的使用
前端·webpack·node.js
_孤傲_5 天前
webpack实现常用plugin
前端·webpack·node.js
Jonathan Star6 天前
Webpack 打包优化与骨架屏结合:双管齐下提升前端性能与用户体验
前端·webpack·ux
细节控菜鸡6 天前
Webpack 核心知识点详解:proxy、热更新、Loader与Plugin全解析
前端·webpack·node.js
dcloud_jibinbin7 天前
【uniapp】体验优化:开源工具集 uni-toolkit 发布
前端·webpack·性能优化·小程序·uni-app·vue