webpack 打包压缩-如何在webpack中压缩打包HTML资源

bendan520 2023年8月21日 webpack 0

本文主要讲解“如何在webpack中压缩打包html资源”webpack 打包压缩，有兴趣的同学不妨看一下。本文介绍的方法简单、快捷、实用。接下来就让小编带大家学习一下“如何在webpack中压缩打包html资源”吧！

为什么需要打包html资源

编写代码时，导入src下的js文件。经过webpack打包后，形成入口文件。此时html中的js文件的名称和路径不正确，因此需要webpack将js文件的路径导入到html中替换。

用webpack打包html的好处是：

(1)可以手动将打包好的js文件导入到html中

（2）html打包后，仍然会和打包的js文件一起生成在build文件夹中，这样我们上线的时候，只需要将打包的文件夹复制到线上环境即可。

(3)会帮我们压缩html文件

webpack中如何压缩打包html资源

1.安装插件

Webpack 只能原生理解 JS 和 JSON 文件。要支持打包其他类型的文件，需要安装相应的插件或加载器。

如果我们需要打包HTML文件，首先需要安装html-webpack-plugin插件：

npm install html-webpack-plugin -D

这个插件的作用：

2.webpack.config.js配置

安装html-webpack-plugin插件后webpack 打包压缩，需要在webpack.config.js文件中进行配置：

 // ...
 // 1. 引入插件
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
   // ...
   // 2. 在plugins中配置插件
   plugins: [
     new HtmlWebpackPlugin({
       template: 'index.html', // 指定入口模板文件（相对于项目根目录）
       filename: 'index.html', // 指定输出文件名和位置（相对于输出目录）
       // 关于插件的其他项配置，可以查看插件官方文档
     })
   ]
 }

确保入口模板文件的路径和文件名与配置一致，即可编译。

3. 多个JS入口和多种HTML情况的配置

面对需要编译多个HTML文件，并且文件需要导入不同的JS文件，但是默认情况下，打包的HTML文件会导入所有打包的JS文件，我们可以指定chunks来分配JS。

 const path = require('path');
 // 1. 引入插件
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 module.exports = {
   // ...
   // 2. 配置JS入口(多入口)
   entry: {
     vendor: ['./src/jquery.min.js', './src/js/common.js'],
     index: './src/index.js',
     cart: './src/js/cart.js'
   },
   // 配置出口
   output: {
     filename: '[name].js',
     path: path.resolve(__dirname, 'build/js')
   },
   // 3. 配置插件
   plugins: [
     new HtmlWebpackPugin({
       template: 'index.html',
       filename: 'index.html',
       // 通过chunk来指定引入哪些JS文件
       chunk: ['index', 'vendor']
     }),
     // 需要编译多少个HTML，就需要new几次插件
     new HtmlWebpackPlugin({
       template: './src/cart.html',
       filename: 'cart.html',
       chunk: ['cart', 'vendor']
     })
   ]
 }

提示：这里需要注意的是，需要编译多少个HTML文件，需要new HtmlWebpackPlugin几次。

上述配置编译成功后，输出如下：

 build
 |__ index.html # 引入index.js和vendor.js
 |__ cart.html    # 引入cart.js和vendor.js
 |__ js
      |__ vendor.js # 由jquery.min.js和common.js生成
      |__ index.js    # 由index.js生成
      |__ cart.js       # 由cart.js生成

压缩打包html资源实例

1.webpack.config.js配置

const HTMLWebpackPlugin = require('html-webpack-plugin')
...
 plugins: [
    // html-webpack-plugin  html 打包配置 该插件将为你生成一个 HTML5 文件
    new HTMLWebpackPlugin({
      template: "./index.html", // 打包到模板的相对或绝对路径 （打包目标）
      title: '首页', // 用于生成的HTML文档的标题
      hash: true,//true则将唯一的webpack编译哈希值附加到所有包含的脚本和CSS文件中。主要用于清除缓存,
      minify: {  // 压缩html
        collapseWhitespace: true, // 折叠空白区域
        keepClosingSlash: true,  // 保持闭合间隙
        removeComments: true,   // 移除注释
        removeRedundantAttributes: true, // 删除冗余属性
        removeScriptTypeAttributes: true,  // 删除Script脚本类型属性
        removeStyleLinkTypeAttributes: true, // 删除样式链接类型属性
        useShortDoctype: true, // 使用短文档类型
        preserveLineBreaks: true, // 保留换行符
        minifyCSS: true, // 压缩文内css
        minifyJS: true, // 压缩文内js
      }
    }),
  ],
...

2.此时我们的index.html


  
    
    
    
    webpackDemo
  
  
    
      html 打包配置

3.此时我们的index.js

import './../css/index.less'
function add(x,y) {
 return x+y
}
console.log(add(2,3));

3、在控制台输入webpack进行打包，发现打包输出文件有一个index.html，内容如下


  
    
    
    
    webpackDemo
  
  
    
      html 打包配置

是手动导入的

浏览器打开打包输出的index.html，发现样式有疗效，控制面板也正常输出：

至此，相信你对“如何在webpack中压缩打包html资源”有了更深入的了解了，那么我们来实践一下吧！这是易速云网站。更多相关内容，您可以进入相关渠道查询，关注我们，继续学习！

Vuewebpack项目手动打包压缩成zip文件的方式

更新时间：2019年7月24日 08:59:42 作者：邸红万艳

本文主要介绍手动将Vue--webpack项目打包压缩成zip文件的方式。本文为您详细介绍，具有一定的参考价值。有需要的同学可以参考以下

这段时间我使用Vue2.0来开发项目。每次打包的时候都使用npmrunbuild命令，每次部署的时候都要自动zip压缩前端分包。功能测试临时加急的时候，三天内可能会打包很多次，很烦人。所以只需在执行npmrunbuild命令时将其打包成zip文件即可webpack 打包压缩webpack 打包压缩，方便又省事！

1.外挂武器

webpack插件：filemanager-webpack-plugin，该插件可以在构建前后进行打包、复制、联通、删除文件和新建文件夹等操作。

安装：

npm install filemanager-webpack-plugin --save-dev
或
cnpm install filemanager-webpack-plugin --save-dev

2.webpack配置

①在项目根目录build/webpack.base.config.js中添加头变量声明区域

const FileManagerPlugin = require('filemanager-webpack-plugin')

②在根目录build/webpack.base.config.js中找到module.exports。然后将其添加到plugins中

new FileManagerPlugin({
 onEnd: {
  delete: [
   './dist/control-operate.zip',
  ],
  archive: [
   {source: './dist', destination: './dist/control-operate.zip'},
  ]
 }
})

注：如果插件不存在，则新建插件，插件为链表格式。

3、落实疗效

配置完成后，再次执行npmrunbuild命令。执行完成后，可以在dist文件夹中看到压缩后的zip文件包（之前配置的目标目录就是dist文件夹）。

4.其他功能

module.exports = {
 ......
 plugins: [
  new FileManagerPlugin({
   onEnd: {
    copy: [
     {source: '/path/from', destination: '/path/to'},
     {source: '/path/**/*.js', destination: '/path'},
     {source: '/path/fromfile.txt', destination: '/path/tofile.txt'},
     {source: '/path/**/*.{html,js}', destination: '/path/to'},
     {source: '/path/{file1,file2}.js', destination: '/path/to'},
     {source: '/path/file-[hash].js', destination: '/path/to'}
    ],
    move: [
     {source: '/path/from', destination: '/path/to'},
     {source: '/path/fromfile.txt', destination: '/path/tofile.txt'}
    ],
    delete: [
     '/path/to/file.txt',
     '/path/to/directory/'
    ],
    mkdir: [
     '/path/to/directory/',
     '/another/directory/'
    ],
    archive: [
     {source: '/path/from', destination: '/path/to.zip'},
     {source: '/path/**/*.js', destination: '/path/to.zip'},
     {source: '/path/fromfile.txt', destination: '/path/to.zip'},
     {source: '/path/fromfile.txt', destination: '/path/to.zip', format: 'tar'},
     {
      source: '/path/fromfile.txt',
      destination: '/path/to.tar.gz',
      format: 'tar',
      options: {
       gzip: true,
       gzipOptions: {
        level: 1
       }
      }
     }
    ]
   }
  })
 ],
 ......
}

总结

以上就是小编介绍的手动打包Vuewebpack项目并压缩成zip文件的方式。希望对您有所帮助。如果您有疑问，请给我留言，编辑会及时回复您。非常感谢您对情景之家网站的支持！

webpack 打包压缩-如何在webpack中压缩打包HTML资源

发表评论

发表回复取消回复

相关文章

发表评论

发表回复 取消回复

发表回复取消回复