【Vue】1-4、打包发布

一、配置 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 [email protected] -D

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

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

 

一  叶  知  秋，奥  妙  玄  心