webpack4打包html和压缩js

水深无声 2022-05-19 08:13 296阅读 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

发表评论取消回复

表情：

评论列表（有 0 条评论，296人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack怎样打包js

首先要在自己电脑安装webpack和webpack-cli然后才可以接着下面的操作。安装之后新建一个js文件，和一个webpack.config.js 接下来

迈不过友情╰/ 2023年06月06日 03:57/ 0 赞/ 3 阅读

相关 webpack 打包html文件

webpack 打包html文件 `webpack.config.js`配置文件内容为： / loader: 1. 下载 2. 使用（配置）

一时失言乱红尘/ 2023年01月09日 03:43/ 0 赞/ 241 阅读

相关 webpack4打包html和压缩js

打包html使用插件[html-webpack-plugin][] 压缩js使用插件[uglifyjs-webpack-plugin][] 配置文件： const

水深无声/ 2022年05月19日 08:13/ 0 赞/ 297 阅读

相关 webpack4打包多个js文件

默认文件目录： ![70][] 1.多个js文件不合并打包(分别打包) 配置文件./conf/webpack.dev.js const path = requi

谁借莪１个温暖的怀抱￠/ 2022年05月19日 03:09/ 0 赞/ 253 阅读

相关 Webpack打包HTML

1、包装html-webpack-plugin插件并在webpack.config.js中添加插件 npm install html-webpack-plugin

忘是亡心i/ 2022年04月06日 08:12/ 0 赞/ 376 阅读

相关 webpack4 css打包压缩问题

这两天一直在练习这个webpack4, 发现有好多问题和坑，做开发嘛，一定要有喜欢出问题并喜欢解决问题，坚决踩个坑填个坑的不怕死小强精神！ webpack4 在配置上其实是可

谁借莪１个温暖的怀抱￠/ 2022年02月27日 04:10/ 0 赞/ 349 阅读

相关 gulp 压缩打包css、html和图片

1、压缩打包css文件 (1)cnpm install -D gulp-minify-css (2)在gulpfile.js

你的名字/ 2021年07月24日 23:30/ 0 赞/ 580 阅读

相关 webpack4 打包图片

1、下载 cnpm install url-loader file-loader html-loader@0.5.5 -D 其中url-loader

╰+哭是因爲堅強的太久メ/ 2021年07月24日 18:24/ 0 赞/ 486 阅读

相关 webpack4 多进程打包耗时loader、并行压缩

多进程打包 1、下载 cnpm install -D thread-loader 2、使用这个loader放置

墨蓝/ 2021年07月24日 16:02/ 0 赞/ 687 阅读

相关 webpack4 打包html资源

1、下载插件 cnpm i -D html-webpack-plugin 2、引入插件 const X = require('ht

绝地灬酷狼/ 2021年07月24日 13:43/ 0 赞/ 528 阅读