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

打包html文件的插件

目前我们的index.html一致是在项目的根目录下的
- 我们知道,在真实发布项目的时候,发布的是dist文件夹中的内容,但是dist文件夹中如果没有index,html,那么打包的js等文件也就没有意义
- 所以我们需要将index.HTML文件也打包到dist文件夹中,这个时候就可以使用HtmlWebpackPlugin插件了
HtmlWebpackPlugin的作用
- 自动生成一个index.html,也可以指定index.html模板
- 将打包的JS文件,自动通过Script标签插入body中
安装HtmlWebpackPlugin

代码语言：javascript复制

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

执行安装

代码语言：javascript复制

D:zhangyugen@jd.comvueday1html4.从0开始学VUEsimpleplugin>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_modulesfsevents):
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_moduleswatchpack-chokidar2node_modulesfsevents):
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.084s

17 packages are looking for funding
  run `npm fund` for details

found 10 vulnerabilities (2 low, 8 moderate)
  run `npm audit fix` to fix them, or `npm audit` for details

D:zhangyugen@jd.comvueday1html4.从0开始学VUEsimpleplugin>

安装成功

修改webpack.config.js文件

代码语言：javascript复制

// 需要从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-compiler
    resolve:{
        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

代码语言：javascript复制

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

执行打包

还是报错了

代码语言：javascript复制

D:zhangyugen@jd.comvueday1html4.从0开始学VUEsimpleplugin>npm run build

> simpleconfig@1.0.0 build D:zhangyugen@jd.comvueday1html4.从0开始学VUEsimpleplugin
> webpack

D:zhangyugen@jd.comvueday1html4.从0开始学VUEsimplepluginnode_moduleswebpackbinwebpack.js:339
                        throw e;
                        ^

TypeError: Cannot read property 'initialize' of undefined
    at HtmlWebpackPlugin.apply (D:zhangyugen@jd.comvueday1html4.从0开始学VUEsimplepluginnode_moduleshtml-webpack-pluginindex.js:40:20)
    at Compiler.apply (D:zhangyugen@jd.comvueday1html4.从0开始学VUEsimplepluginnode_modulestapablelibTapable.js:375:16)
    at webpack (D:zhangyugen@jd.comvueday1html4.从0开始学VUEsimplepluginnode_moduleswebpacklibwebpack.js:33:19)
    at processOptions (D:zhangyugen@jd.comvueday1html4.从0开始学VUEsimplepluginnode_moduleswebpackbinwebpack.js:329:15)
    at D:zhangyugen@jd.comvueday1html4.从0开始学VUEsimplepluginnode_moduleswebpackbinwebpack.js:387:2
    at Object.Yargs.self.parse (D:zhangyugen@jd.comvueday1html4.从0开始学VUEsimplepluginnode_modulesyargsyargs.js:533:18)
    at Object.<anonymous> (D:zhangyugen@jd.comvueday1html4.从0开始学VUEsimplepluginnode_moduleswebpackbinwebpack.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:Usersext.zhangyugen1AppDataRoamingnpm-cache_logs2021-06-03T13_38_42_484Z-debug.log

D:zhangyugen@jd.comvueday1html4.从0开始学VUEsimpleplugin>

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

切换版本,然后宠幸npm install