從零開始學VUE之Webpack(Html打包插件的使用)

時間 2021-08-14

標籤 css html vue node webpack web npm babel app ide 欄目 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

執行安裝css

 
      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.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.com\vue\day1\html\4.從0開始學VUE\simpleplugin> 
     

安裝成功html

修改webpack.config.js文件vue

 
      // 須要從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.htmlnode

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

執行打包webpack

仍是報錯了web

 
      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
> webpack

D:\zhangyugen@jd.com\vue\day1\html\4.從0開始學VUE\simpleplugin\node_modules\webpack\bin\webpack.js:339
                        throw e;
                        ^

TypeError: Cannot read property 'initialize' of undefined
    at 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:2
    at 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.log

D:\zhangyugen@jd.com\vue\day1\html\4.從0開始學VUE\simpleplugin> 
     