从零开始学VUE之Webpack(Html打包插件的使用)

打包html文件的插件

目前我们的index.html一致是在项目的根目录下的
- 我们知道,在真实发布项目的时候,发布的是dist文件夹中的内容,但是dist文件夹中如果没有index,html,那么打包的js等文件也就没有意义
- 所以我们需要将index.HTML文件也打包到dist文件夹中,这个时候就可以使用HtmlWebpackPlugin插件了

HtmlWebpackPlugin的作用
- 自动生成一个index.html,也可以指定index.html模板
- 将打包的JS文件,自动通过Script标签插入body中

安装HtmlWebpackPlugin

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

执行安装

D:\zhangyugen@jd.com\vue\day1\html\4.从0开始学VUE\simpleplugin>npm install html-webpack-plugin --save-dev
npm WARN css-loader@3.6.0 requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN style-loader@2.0.0 requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN html-webpack-plugin@5.3.1 requires a peer of webpack@^5.20.0 but none is installed. You must install peer dependencies yourself.
npm WARN simpleconfig@1.0.0 No description
npm WARN simpleconfig@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})+ html-webpack-plugin@5.3.1
added 37 packages from 52 contributors and audited 558 packages in 19.084s17 packages are looking for fundingrun `npm fund` for detailsfound 10 vulnerabilities (2 low, 8 moderate)run `npm audit fix` to fix them, or `npm audit` for detailsD:\zhangyugen@jd.com\vue\day1\html\4.从0开始学VUE\simpleplugin>

安装成功

修改webpack.config.js文件

// 需要从node依赖中引入 需要添加依赖环境
const path = require('path');
// 导入webpack内置插件
const webpack = require('webpack')
// 导入HtmlWebpackPlugin插件
const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {// 配置源码打包位置entry: './src/main.js',// 配置目标位置output: {// path 只能写绝对路径 不能写相对路径 但是不要直接写死,需要动态获取文件位置path: path.resolve(__dirname,'dist'),filename: 'bundle.js'},module: {rules: [{test: /\.css$/,use: [ 'style-loader', 'css-loader' ]},{test: /\.js$/,exclude: /(node_modules|bower_components)/,use: {loader: 'babel-loader',options: {presets: ['es2015']}}},// 增加.vue文件的loader{test: /\.vue$/,use:['vue-loader']}]},// 使用runtime-compilerresolve:{alias:{'vue$': 'vue/dist/vue.esm.js'}},// 插件plugins:[// 版权插件new webpack.BannerPlugin('最终版权归彼岸舞所有!'),// index.html打包插件  new HtmlWebpackPlugin({// 指定模板生成 不然没有id="app"的div 同时删除调用index.html中的 <script>应为会自动添加,所以不需要写template: 'index.html'})]
}

修改index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app"></div>
</body>
</html>

执行打包

还是报错了

D:\zhangyugen@jd.com\vue\day1\html\4.从0开始学VUE\simpleplugin>npm run build> simpleconfig@1.0.0 build D:\zhangyugen@jd.com\vue\day1\html\4.从0开始学VUE\simpleplugin
> webpackD:\zhangyugen@jd.com\vue\day1\html\4.从0开始学VUE\simpleplugin\node_modules\webpack\bin\webpack.js:339throw e;^TypeError: Cannot read property 'initialize' of undefinedat HtmlWebpackPlugin.apply (D:\zhangyugen@jd.com\vue\day1\html\4.从0开始学VUE\simpleplugin\node_modules\html-webpack-plugin\index.js:40:20)at Compiler.apply (D:\zhangyugen@jd.com\vue\day1\html\4.从0开始学VUE\simpleplugin\node_modules\tapable\lib\Tapable.js:375:16)at webpack (D:\zhangyugen@jd.com\vue\day1\html\4.从0开始学VUE\simpleplugin\node_modules\webpack\lib\webpack.js:33:19)at processOptions (D:\zhangyugen@jd.com\vue\day1\html\4.从0开始学VUE\simpleplugin\node_modules\webpack\bin\webpack.js:329:15)at D:\zhangyugen@jd.com\vue\day1\html\4.从0开始学VUE\simpleplugin\node_modules\webpack\bin\webpack.js:387:2at Object.Yargs.self.parse (D:\zhangyugen@jd.com\vue\day1\html\4.从0开始学VUE\simpleplugin\node_modules\yargs\yargs.js:533:18)at Object.<anonymous> (D:\zhangyugen@jd.com\vue\day1\html\4.从0开始学VUE\simpleplugin\node_modules\webpack\bin\webpack.js:152:7)at Module._compile (internal/modules/cjs/loader.js:1063:30)at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)at Module.load (internal/modules/cjs/loader.js:928:32)at Function.Module._load (internal/modules/cjs/loader.js:769:14)at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)at internal/main/run_main_module.js:17:47
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! simpleconfig@1.0.0 build: `webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the simpleconfig@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\ext.zhangyugen1\AppData\Roaming\npm-cache\_logs\2021-06-03T13_38_42_484Z-debug.logD:\zhangyugen@jd.com\vue\day1\html\4.从0开始学VUE\simpleplugin>

看到的错误大概是不能读取属性中的 initialize方法,是一个没有定义的,经过查看源码,发现在最新的版本中确实没有这个方法了,后来看了下老师的版本是3.2.0,我的是5.3.1

切换版本,然后宠幸npm install

安装成功后去除警告

再次执行打包

打包成功

查看dist

可以看到是有index.html的

并且也是有id="app"的div的自动插入了script标签,运行一下dist中的html

运行没有问题

作者：彼岸舞

时间：2021\06\07

内容关于：VUE

本文属于作者原创,未经允许,禁止转发

从零开始学VUE之Webpack(Html打包插件的使用)相关推荐

从零开始学VUE之Webpack(JS打包压缩插件的使用)
JS打包压缩插件在项目发布之前,我们必然需要对js等文件进行压缩处理这里我们就对打包的JS进行压缩我们使用一个第三方插件uglifyjs-webpack-plugin,并且版本号指定1.1.1 ...
从零开始学VUE之IDEA安装VUE插件
IDEA安装VUE插件本身IDEA是不支持VUE的,需要安装插件,在file->settings->plugins中搜索VUE安装即可作者:彼岸舞时间:2021\05\31 内容关于 ...
vue中webpack编译打包使用之Vue知识点归纳(十一)
本文中将描述 webpack 简述 webpack 项目的初始化配置 webpack 打包运行一个 vue 项目 1 什么是webpack,到底需要解决什么问题近几年前端的快速发展,前端已不是简单的 ...
vue -- vue-cli webpack项目打包后自动压缩成zip文件
用vue2.0开发项目,使用npm run build 命令 ,但是只会生成dist文件夹,以下是生成zip压缩包方法 1,插件安装 webpack插件安装 filemanager-webpack-p ...
一起从零开始学VUE（1） VUE基本使用步骤和指令
VUE 特性 1.数据驱动视图:数据的变化会驱动视图自动更新,单向的数据绑定 2.双向数据绑定:在网页中form表单负责采集数据,Ajax负责提交数据 MVVM是VUE实现数据驱动视图和双向数据绑定的 ...
一幅长文细学Vue（一）——Webpack打包工具
1 项目开发工具摘要在本文中,我们会详细讨论webpack是如何打包发布项目,不过对于Vue来说,Vite可以做到和webpack一样的功能. 声明:如果想要看懂此文章,需具备node.js中 ...
vue jsx webpack报错_从零开始，使用webpack高效搭建react工作流
关注后,回复"1"获取文章案例源代码. 很多人想搭建一套属于自己的前端工作流:最开始的时候,我们的工作流萌芽是从写一个项目的时候,拷贝以前写过的一个项目文件夹改完直接使用开始的,后 ...
vue+webpack 安装常见插件
html-webpack-plugin 插件地址:https://www.npmjs.com/package... 安装指令: npm install html-webpack-plugin --sa ...
Vue+Vue Router+Webpack打包网站基础页面
Vue+Vue Router+Webpack打包网站基础页面 1.目录结构 2.package.json所需依赖包 {"name": "vue_router_webpac ...

从零开始学VUE之Webpack(Html打包插件的使用)

打包html文件的插件

从零开始学VUE之Webpack(Html打包插件的使用)相关推荐

最新文章

热门文章