webpack4打包html,html-webpack-plugin详解

打包html使用插件：html-webpack-plugin

安装

npm i --save-dev html-webpack-plugin

配置文件


const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {entry: __dirname+"/src/index.js", //入口文件,从项目根目录指定output: { //输出路径和文件名，使用path模块resolve方法将输出路径解析为绝对路径publicPath: __dirname + "/build", // js引用路径或者CDN地址path: path.resolve(__dirname, "build"), //打包后的js文件存放的地方 将js文件打包到build的目录filename: "main.js" //打包后输出的js的文件名 将入口文件index.js打包到build/main.js},devServer: {contentBase: './build',//默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到"build"目录）historyApiFallback: true,//在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.htmlinline: true,//设置为true，当源文件改变时会自动刷新页面port: 8080//设置默认监听端口，如果省略，默认为"8080"},plugins: [new HtmlWebpackPlugin({title: 'Custom template',template: './src/index.html', //指定要打包的html路径和文件名filename:'../index.html' ,//指定输出路径和文件名 favicon:'./src/img/apple-touch-icon.png',//给生成的 html 文件生成一个标签<link rel="shortcut icon" href="apple-touch-icon.png">hash: true,//给生成的 js 文件一个独特的 hash 值 <script type=text/javascript src=bundle.js?22b9692e22e7be37b57e></script>showErrors:true,//webpack 编译出现错误minify:{//对 html 文件进行压缩，minify 的属性值是一个压缩选项或者 false 。默认值为false, 不对生成的 html 文件进行压缩removeComments:true, // 去除注释collapseWhitespace: true //是否去除空格}})]
}

index.html

在html的title处填写<title><%= htmlWebpackPlugin.options.title %></title>打包后会自动附上new HtmlWebpackPlugin方法里面的title的值

webpack4打包html,html-webpack-plugin详解相关推荐

把java文件打包成.jar (jar命令详解)
把java文件打包成.jar (jar命令详解) 先打开命令提示符(win2000或在运行框里执行cmd命令,win98为DOS提示符),输入jar Chelp,然后回车(如果你盘上已经有了jdk1. ...
java文件打包jar文件_把java文件打包成.jar (jar命令详解)
把java文件打包成.jar (jar命令详解) 先打开命令提示符(win2000或在运行框里执行cmd命令,win98为DOS提示符),输入jar Chelp,然后回车(如果你盘上已经有了jdk1. ...
ActiveX控件打包、签名、嵌入详解
ActiveX控件打包.签名.嵌入详解前言在我们的一个项目中,使用到了大华网络监控摄像头枪机,网络上下载了其ActiveX插件,但是发现其所提供的类库没有打包处理.这就导致我们每次给用户安装的时候 ...
android项目打包apk,Android Studio将程序打包成APK的步骤详解
第一步:先点击Build选择GenerateSigned APK 第二步:如果之前有编译成APK的话,就直接选择Choose existing已经存在的key:如果没有编译成APK那就选择Create ...
霖呆呆的六个自定义Webpack插件详解-自定义plugin篇(3)
霖呆呆的webpack之路-自定义plugin篇你盼世界,我盼望你无bug.Hello 大家好!我是霖呆呆! 有很多小伙伴在打算学写一个webpack插件的时候,就被官网上那一长条一长条的API给吓 ...
显微镜下的webpack4的新特性：mode详解
webpack4支持的一个新特性就是zero配置,不需要config,也可以打包,这对于懒癌患者很有诱惑力,但是这也意味着我们不清楚零配置发生了写什么,也不知道打包出来的文件是否符合我们的心意,全部都 ...
RPM打包原理、示例、详解及备查
原文地址:https://blog.csdn.net/qq_16542775/article/details/80961213 RPM(Redhat Package Manager)是用于Redhat ...
linux打包解压工具,打包压缩、解压缩工具详解
本文旨在学习打包,压缩,解压缩.学习使用tar.gzip/gunzip/zcat.bzip2/bunzip2/bzcat.xz/unxz/xzcat.zip/unzip.cpio等命令的使用. 前言: ...
Unity 之打包参数 -- Player面板属性详解
Unity 之 Project Setting -- Player 面板属性详解前言一,Player 1.1 属性说明 1.2 效果展示二,ICON(图标) 2.1 属性说明 2.2 使用示例 ...
node项目打包如何隐藏html后缀,详解webpack打包nodejs项目(前端代码)
随着前端体积越来越大,功能越来越丰富,这时候就需要将前端工程化,而webpack就是用于将前端各种文件打包起来.一个简单的webpack应该包含以下几个概念入口起点配置组件加载器模块模块热 ...

webpack4打包html,html-webpack-plugin详解

安装

配置文件

index.html

webpack4打包html,html-webpack-plugin详解相关推荐

最新文章

热门文章