当我们项目开发完成后,需要发布上线,而我们通过webpack-dev-server的插件打包的文件是存在于内存上的,物理磁盘上并不存在,所以我们需要将内存中的项目复制一份到物理磁盘上。
方法:在package.json文件中的scripts中添加以下代码:
"bulid":"webpack --mode production"
然后在终端中运行:
npm run build
注意:我们在项目开发阶段运行的是:npm run dev,这个只能将项目打包在内存中;当项目完成时,需要发布时,我们就运行npm run build
运行完成后就可以在项目根目录中发现新建了一个dist的文件夹,这个时候就代表打包完成了;
然而这样打包也会有一个问题,就是如果再次修改了项目代码,我们再次打包时就得将存在在根目录中的dist文件先删除掉,才能获得最新的文件,所以我们最好先安装一个自动清除的插件
clean-webpack-plugin插件
使用:①安装,在终端中运行以下代码:
npm install --save-dev clean-webpack-plugin
②使用:在webpack.config.js文件中添加以下代码:
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
mode: "development",
plugins:[CleanWebpackPlugin]}
然后就可以在每次打包前清除dist文件了