webpack的小插件
1.clean-webpack-plugin:由于每次打包的时候有可能文件名称不一样,打包后的文件就叠加到dist目录下了,clean-webpack-plugin作用就是在每次打包之前,先把dist目录删掉,创建最新的目录,避免不需要的文件还留在dist目录下。
安装:npm install clean-webpack-plugin -D
使用:
//引入clean-webpack-plugin的包 const { CleanWebpackPlugin } = require('clean-webpack-plugin'); //在plugins中配置 plugins: [new CleanWebpackPlugin()]
2.copy-webpack-plugin:如果我们想要把一个文件夹里的内容也拷贝到dist目录下,可以使用copy-webpack-plugin插件。
安装:npm install copy-webpack-plugin -D
使用:
const copyWebpackPlugin = require('copy-webpack-plugin'); plugins: [ new copyWebpackPlugin([ //从doc目录下拷贝到dist根目录下 //注意,如果写的是to:'./dist',则会在dist目录下再创建一个dist文件夹,然后将拷贝的文件放在里面 {from:'./doc',to:'./'} ]) ]
3.BannerPlugin:版权声明插件,是webpack自带的内置插件,不需要安装
使用:
const webpack = require('webpack'); plugins: [ //打包后这条信息就会插入到每个js文件的头部 new webpack.BannerPlugin('make 2019 by ***') ]
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步