【Vue】1-4、打包发布_webpack打包vue命令-CSDN博客

本文介绍了如何在Webpack配置中添加build命令以区分开发和生产环境，将JavaScript和图片文件分别打包到指定目录，以及使用clean-webpack-plugin清理dist目录的旧文件。

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

一、配置 webpack 的打包发

在 package.json 文件的 scripts 节点下，新增 build 命令如下：

"scripts": {
    "dev": "webpack serve"，					// 开发环境中运行 dev 命令
    "build": "webpack --mode production"	// 项目发布时运行 build 命令
}

--mode 是一个参数项，用来指定 webpack 的运行模式。

production 代表生成环境，会对打包生成的文件进行代码压缩和性能优化。

注意：通过 --mode 指定的参数项会覆盖 webpack.config.js 中的 mode 选项

二、把 JavaScript 文件统一生成到 js 目录中

在 webpack.config.js 配置文件中的 output 节点中进行如下的配置：

output:{
	path: path.join(__dirname,'dist'),
	filename: 'js/main.js'
}

三、把图片文件统一生成到 images 目录中

在 webpack.config.js 配置文件中的 url-loader 配置项新增 outputPath 选项即可指定图片文件的输出路径：

{
    test:/\.jpg|png|gif$/, 
    use:['url-loader?limit=14218&outputPath=images'] 
}

四、自动清理 dist 目录下的旧文件

为了在每次打包发布时自动清理掉 dist 目录中的旧文件，可以安装并配置 clean-webpack-plugin 插件：

// 安装清理 dist 目录的 webpack 插件
npm install clean-webpack-plugin@3.0.0 -D

// 按需导入插件、得到插件的构造函数之后，创建插件的实例对象
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()

// 把创建的 cleanPlugin 插件实例对象挂载到 plugins 节点中
plugins:[htmlPlugin,cleanPlugin]

一叶知秋，奥妙玄心