html5页面文件打包,Webpack入门(四)—

到目前为止，有关Webpack最基础的内容差不多已经讲完了，其中包括Webpack运行的基本流程、CSS的打包和图片的打包，也就是说，当你掌握这几节之后，基本上就能像以前不用Webpack时一样愉快地写代码了。

当然，我们其实还有很多需要优化的地方，就比如本文所要讲到的，如何将HTML进行打包？

在之前的实例中，Webpack虽然能够正常地将各种页面所需要的资源从src目录打包至dist目录，但是我们在最后必须在dist目录中手动去创建HTML页面，并引入这些打包后的资源。

事实上，Webpack能够自动的帮助我们完成这件事，只需要使用html-webpack-plugin插件即可。

1. 安装html-webpack-plugin插件

与安装loader一样，命令行输入以下命令回车即可。

npm i -D html-webpack-plugin

2. webpack.config.js中添加相关配置

const htmlWebpackPlugin = require('html-webpack-plugin'); // 引入html-webpack-plugin插件

module.exports = {

entry: './src/scripts/index.js', // 打包入口

output: {

path: __dirname + '/dist', // 输出路径

filename: 'scripts/index.js' // 输出文件名

module: {

rules: [ // 其中包含各种loader的使用规则

{

test: /\.css$/, // 正则表达式，表示打包.css后缀的文件

use: ['style-loader','css-loader'] // 针对css文件使用的loader，注意有先后顺序，数组项越靠后越先执行

{ // 图片打包

test: /\.(png|jpg|gif|svg)$/,

loader: 'url-loader',

options: {

name: './images/[name].[ext]',

limit: 8192

}

]

plugins: [ // 打包需要的各种插件

new htmlWebpackPlugin({ // 打包HTML

template: './src/index.html' // HTML模板路径

})

watch: true // 监听文件改动并自动打包

};

3. 添加HTML模板文件

HTML模板文件如下：

Hello Webpack

是的，除了HTML本身，其他资源如CSS、图片等均无需手动添加，在打包结束后，所有资源均会自动添加至HTML文件相应位置并进入dist目录。

4. 打包结束

打包后的index.html文件如下：

Hello Webpack

html5页面文件打包,Webpack入门(四)——HTML打包相关推荐

vue移动端html5页面根据屏幕适配的四种解决方法
最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...
如何将一个html网页打包,webpack分离css单独打包的方法
本文介绍了webpack分离css单独打包的方法,分享给大家,具体如下: CHANGELOG 2018-02-08 14:46:06 刚看了下,网上查了 webpack单独打包css,找到的文章,本文 ...
Vue——10 - webpack打包保姆级教程01——打包js、json、css、less、html、背景图片以及图片、字体（Font）文件，devsever，生产环境配置以及css的兼容写法
目录一.webpack打包JS文件 1.新建入口文件index.js和mathUtils.js,index.js是依赖于mathUtils.js 2.然后使用webpack命令打包js文件二.打包 ...
html业内响应,html5页面
Springboot系列(四)web静态资源配置详解 Springboot系列(四)web静态资源配置详解 Springboot系列(四)web静态资源配置往期精彩 SpringBoot系列(一)i ...
React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码等)
本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React多页面应用1(webpack开发环境搭建,包括Babel.热更新等) ----2017 ...
iOS打包framework - Swift完整项目打包Framework，嵌入OC项目使用
场景说明: -之前做的App,使用Swift框架语言,混合编程,内含少部分OC代码. -需要App整体功能打包成静态库,完整移植到另一个App使用,该App使用OC. -所以涉及到一个语言互转的处理, ...
webpack打包原理_webpack打包原理入门探究（四）插件探究（上）
子由风:webpack打包原理入门探究(一)zhuanlan.zhihu.com 子由风:webpack打包原理入门探究(二)基本配置zhuanlan.zhihu.com 子由风:webpack打 ...
webpack入门（四）——webpack loader 和plugin
什么是loader loaders是你用在app源码上的转换元件.他们是用node.js运行的,把源文件作为参数,返回新的资源的函数. 例如,你可以用loaders告诉webpack加载 coffe ...
webpack 保存文件后自动打包_继webpack后又一打包神器Parcel
前言: 在继grunt.gulp实现自动化构建之后,webpack又引领前端打包潮流,众所周知的是,vue-cli的脚手架就是基于webpack进行项目打包的.而webpack还在上升的势头的时候,又 ...

html5页面文件打包,Webpack入门(四)——HTML打包

html5页面文件打包,Webpack入门(四)——HTML打包相关推荐

最新文章

热门文章