欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

webpack4打包html和压缩js

程序员文章站 2022-05-30 17:44:06
...

打包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
    ]
}

文件目录:

webpack4打包html和压缩js

index.html不需引入任何js或css,打包后的文件会自动引入,在html的title处填写<%= htmlWebpackPlugin.options.title %>打包后会自动附上new HtmlWebpackPlugin方法里面的title的值。