简单封装webpack中development和production两种模式的切换

bamnyt

于 2019-11-22 23:36:39 发布

阅读量861

点赞数

CC 4.0 BY-SA版权

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.youkuaiyun.com/bamnyt/article/details/103208808

这篇博客介绍了如何简单封装webpack的development和production两种模式的切换，包括创建config文件夹，配置webpack.config.js，以及修改package.json以支持不同模式的运行。通过这种方法，可以在调试和生产环境中快速切换，无需频繁更改配置文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单封装webpack中development和production两种模式的切换

自己写的代码在webpack的development模式下调试好之后想换成production模式生成相应这文件，这使得要改相当的代码或者写多一份webpack.config.js文件，出于方便，就封装了一个简单的模板。

1、创建一个config文件夹

用于存放配置webpack.development.js和webpack.production.js

//webpack.development.js代码如下：

const HtmlWebpackPlugin=require("html-webpack-plugin");
module.exports={
   
   
  mode: 'development',
  output: {
   
   
  	//输出文件，在development下生成的文件在内存中，故不指定输出路径
    filename: 'bundle.js'  
  },
  devtool: 'source-map'