plugin
plugin可以用于执行更加广泛的任务,比如打包优化,资源管理,环境变量注入等
-
CleanWebpackPlugin
-
CleanWebpackPlugin用于每次重新打包时删除之前生成的打包文件
`npm i clean-webpack-plugin -D` const path = require('path'); const {CleanWebpackPlugin} = require('clean-webpack-plugin'); module.exports = { entry:'./src/main.js', output:{ filename:'awei.js', path:path.resolve(__dirname,'./build') }, plugins:[ new CleanWebpackPlugin() ] }
-
-
htmlWebpackPlugin
-
直接为项目生成一个或多个HTML文件(HTML文件个数由插件实例的个数决定),并将webpack打包后输出的所有脚本文件自动添加到插件生成的HTML文件中。通过配置,可以将根目录下用户自定义的HTML文件作为插件生成HTML文件的模板。另外,还可以通过向插件传递参数,控制HTML文件的输出。
-
CleanWebpackPlugin用于每次重新打包时删除之前生成的打包文件
`npm i html-webpack-plugin -D` const path = require('path'); const HtmlWebpackPlugin = require('clean-webpack-plugin'); module.exports = { entry:'./src/main.js', output:{ filename:'awei.js', path:path.resolve(__dirname,'./build') }, plugins:[ new HtmlWebpackPlugin({ title:'my app', //可以设置自定义模板,让打包生成的html文件根据自定义模板生成 template:'./public/index.html' }) ] }
-
-
DefinePlugin
- 此插件是内置插件,不需要单独安装,作用是在编译时创建配置的全局常量
const path = require('path'); const {DefinePlugin} = require('webpack'); module.exports = { entry:'./src/main.js', output:{ filename:'awei.js', path:path.resolve(__dirname,'./build') }, plugins:[ new DefinePlugin({ BASE_URL:'"./"' }) ] }
- 此插件是内置插件,不需要单独安装,作用是在编译时创建配置的全局常量
-
copyWebpackPlugin
- 此插件是内置插件,不需要单独安装,作用是在编译时创建配置的全局常量
//插件目前默认安装是11版本,但是运行时报错,所以换了10版本,暂时没找到问题,希望有大佬指点一下 `npm i copy-webpack-plugin@10 -D` const path = require('path'); const {DefinePlugin} = require('webpack'); module.exports = { entry:'./src/main.js', output:{ filename:'awei.js', path:path.resolve(__dirname,'./build') }, plugins:[ new DefinePlugin({ BASE_URL:'"./"' }), new CopyWebpackPlugin({ // 需要copy的配置项 patterns: [ { // 从哪里copy from: "public", // to:'',这里可以省略,自动从output的path去找 globOptions: { ignore: [ // **/必须要加,表示从当前路径忽略 "**/index.html", "**/.DS_Store", ], }, }, ], }), ] }
- 此插件是内置插件,不需要单独安装,作用是在编译时创建配置的全局常量
-
示例代码
https://gitee.com/weiLZ598/webpack-study.git