webpack4打包html和压缩js 水深无声 2022-05-19 08:13 256阅读 0赞 打包html使用插件[html-webpack-plugin][] 压缩js使用插件[uglifyjs-webpack-plugin][] 配置文件: const path = require("path"); const uglifyjs = require('uglifyjs-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: "development", //打包为开发模式 entry: "./src/js/main", //入口文件,从项目根目录指定 output: { //输出路径和文件名,使用path模块resolve方法将输出路径解析为绝对路径 path: path.resolve(__dirname, "../dist/js"), //将js文件打包到dist/js的目录 filename: "main.js" }, module: {}, plugins: [ new HtmlWebpackPlugin({ title: 'Custom template', template: './src/index.html', //指定要打包的html路径和文件名 filename:'../index.html' //指定输出路径和文件名 }), new uglifyjs(), //压缩js ] } 文件目录: ![70][] index.html不需引入任何js或css,打包后的文件会自动引入,在html的title处填写<%= htmlWebpackPlugin.options.title %>打包后会自动附上new HtmlWebpackPlugin方法里面的title的值。 [html-webpack-plugin]: https://github.com/jantimon/html-webpack-plugin#configuration [uglifyjs-webpack-plugin]: https://github.com/webpack-contrib/uglifyjs-webpack-plugin [70]: /images/20220519/287931c0e7404409916daedbb05deb21.png
还没有评论,来说两句吧...