自动化构建工具——12.webpack 压缩html和js

最新推荐文章于 2024-01-30 11:31:32 发布

yoliu

最新推荐文章于 2024-01-30 11:31:32 发布

阅读量199

点赞数

分类专栏：自动化构建工具——webpack

本文链接：https://blog.csdn.net/weixin_42377203/article/details/107138459

版权

自动化构建工具——webpack 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

压缩html和js

1. js压缩

生产环境下会自动压缩js代码，所以js压缩只需要将配置文件中的mode设置为production即可

1.1 配置文件

const {
  resolve
} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  // 生产环境下会自动压缩js代码
  mode: 'production'
}

1.2 运行webpack，查看构建结果

在这里插入图片描述

可以看到js代码都被压缩至一行

2. html压缩

html不需要进行兼容性处理，只需要压缩

html压缩通过HtmlWebpackPlugin实现

2.1 配置文件

const {
  resolve
} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      // 压缩html代码
      minify: {
        // 移除空格
        collapseWhitespace: true,
        // 移除注释
        removeComments: true
      }
    })
  ],
  // 生产环境下会自动压缩js代码
  mode: 'production'
}

2.2 index.html源代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 只是一个注释 -->
  <h1>hello webpack</h1>
</body>
</html>

2.3 运行webpack，查看构建结果

在这里插入图片描述

可以看到构建好的index.html被压缩至一行，注释也被移除

yoliu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自动化构建工具——12.webpack 压缩html和js

压缩html和js1. js压缩生产环境下会自动压缩js代码，所以js压缩只需要将配置文件中的mode设置为production即可1.1 配置文件const { resolve} = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = { entry: './src/js/index.js', output: { filename: 'js/bui
复制链接

扫一扫