webpack打包原理_webpack打包原理入门探究（四）插件探究（上）

子由风：webpack打包原理入门探究（一）zhuanlan.zhihu.com

子由风：webpack打包原理入门探究（二）基本配置zhuanlan.zhihu.com

子由风：webpack打包原理入门探究（三）入口探究zhuanlan.zhihu.com

使用 html-webpack-plugin 打包自动生成 index.html

首先，我们需要安装 html-webpack-plugin

npm install html-webpack-plugin --save-dev

配置 webpack.html.plugin.config.js

let path = require('path')
let htmlWebpackPlugin = require('html-webpack-plugin')
function resolve(o) {return path.resolve(__dirname, o)
}
module.exports = {entry: {main: resolve('src/scripts/main.js'),a: resolve('src/scripts/a.js')}, // 指定入口文件output: {path: resolve('dist/js'),// filename: '[name]-[hash].js'filename: "[name]-[chunkhash].js"},plugins: [new htmlWebpackPlugin()]
}

配置 package.json

运行 npm run webpack.html.plugin

效果如下，在 dist 目录生成 index.html,同事也引入了 a.js, main.js

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Webpack App</title></head><body><script type="text/javascript" src="main-8a0feb42c16e4b4ccc97.js"></script><script type="text/javascript" src="a-a1ad07a706a1b2702814.js"></script></body>
</html>

那如果我们打包的是根目录的 index.html,会发生什么情况呢？

我们修改一下 webpack.html.plugin.config.js

let path = require('path')
let htmlWebpackPlugin = require('html-webpack-plugin')
function resolve(o) {return path.resolve(__dirname, o)
}
module.exports = {entry: {main: resolve('src/scripts/main.js'),a: resolve('src/scripts/a.js')}, // 指定入口文件output: {path: resolve('dist/js'),// filename: '[name]-[hash].js'filename: "[name]-[chunkhash].js"},plugins: [new htmlWebpackPlugin({template: 'index.html', // 指定根目录下的 index.html})]
}

再运行 npm run webpack.html.plugin

dist 下的 index.html 发生了改变

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><script src="main.bundle.js"></script>
<script type="text/javascript" src="main-8a0feb42c16e4b4ccc97.js"></script><script type="text/javascript" src="a-a1ad07a706a1b2702814.js"></script></body>
</html>

根目录下的 index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><script src="main.bundle.js"></script>
</body>
</html>

但是我们会发现，所有的东西都生成在 js 文件中了，继续修改一下配置

let path = require('path')
let htmlWebpackPlugin = require('html-webpack-plugin')
function resolve(o) {return path.resolve(__dirname, o)
}
module.exports = {entry: {main: resolve('src/scripts/main.js'),a: resolve('src/scripts/a.js')}, // 指定入口文件output: {path: resolve('dist'),// filename: '[name]-[hash].js'filename: "js/[name]-[chunkhash].js"},plugins: [new htmlWebpackPlugin({template: 'index.html', // 指定根目录下的 index.html})]
}

再运行一下指令

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>webpack a </title>
</head>
<body>
<script type="text/javascript" src="js/main-8a0feb42c16e4b4ccc97.js"></script><script type="text/javascript" src="js/a-a1ad07a706a1b2702814.js"></script></body>
</html>

嗯，这一节课就讲到这里吧

webpack打包原理_webpack打包原理入门探究（四）插件探究（上）相关推荐

webpack 合并压缩_webpack 打包压缩js和css的方法示例
打包压缩js与css 由于webpack本身集成了UglifyJS插件(webpack.optimize.UglifyJsPlugin)来完成对JS与CSS的压缩混淆,无需引用额外的插件, 其命令 w ...
webpack打包优化_Webpack 构建速度优化
如何输出Webpack构建分析输出Webpack构建信息的 .json文件: webpack --profile --json > starts.json 说明: --profile:记录构建 ...
webpack打包缓存_webpack独立打包与缓存处理
关于微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客知乎专栏:前端呼啦圈前言先前写了一篇webpack入门的文章<webpack入门必知必会>,简单介绍了webpa ...
多个python文件打包成exe_pyinstaller打包python文件成exe(原理.安装.问题)
py文件打包成exe文件的方式一共有三种:py2exe.pyinstaller和cx_freeze 本文分四个步骤来详讲如何用pyinstaller将py文件打包成exe文件 1. pyinstall ...
Android打包APK流程及原理描述
Android的包文件APK分为两个部分:代码和资源,所以打包方面也分为资源打包和代码打包两个方面,这篇文章就来分析资源和代码的编译打包原理. APK整体的的打包流程如下图所示: 具体说来: 通过AA ...
hmr webpack 不编译_Webpack的HMR原理分析
Webpack的HMR原理分析 module.exports = { entry : { main : './src/main.js', home : './src/home.js', common ...
hmr webpack 不编译_Webpack HMR 热更新实现原理深入分析
概述在使用 Webpack 构建开发期时,Webpack 提供热更新功能为开发带来良好的体验和开发效率,那热更新机制是怎么实现的呢? 代码实现 Webpack 配置添加 HotModuleRepla ...
webpack的loader与plugin原理
文章目录 loader原理 loader执行顺序 loader使用方式 loader的实现参数同步loader 异步loader Raw loader Pitching loader loader ...
webpack实现懒加载原理以及如何使用懒加载优化项目
参考: 清晰易懂,可以先看这个:webpack的异步加载原理及分包策略 webpack中的懒加载代码原理解析:https://segmentfault.com/a/1190000020233387 自 ...

webpack打包原理_webpack打包原理入门探究（四）插件探究（上）

使用 html-webpack-plugin 打包自动生成 index.html

那如果我们打包的是根目录的 index.html,会发生什么情况呢？

webpack打包原理_webpack打包原理入门探究（四）插件探究（上）相关推荐

最新文章

热门文章