npm install html-webpack-plugin --save-dev
Execution and installation
D:\[email protected]\vue\day1\html\4. from 0 Start learning VUE\simpleplugin>npm install html-webpack-plugin --save-dev npm WARN [email protected] requires a peer of [email protected]^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of [email protected]^4.0.0 || ^5.0.0 but none is installed. You must install peer dependencies yourself. npm WARN [email protected] requires a peer of [email protected]^5.20.0 but none is installed. You must install peer dependencies yourself. npm WARN [email protected] No description npm WARN [email protected] No repository field. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack-chokidar2\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) + [email protected] 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:\[email protected]\vue\day1\html\4. from 0 Start learning VUE\simpleplugin>
Installation successful
modify webpack.config.js file
// Need from node Introduction of dependency Dependency environment needs to be added
const path = require('path');
// Import webpack Built in plug-ins
const webpack = require('webpack')
// Import HtmlWebpackPlugin plug-in unit
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// Configure source code packaging location
entry: './src/main.js',
// Configure the target location
output: {
// path Only absolute path can be written Can't write relative path But don't just write dead , Need to get the file location dynamically
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']
}
}
},
// increase .vue Of documents loader
{
test: /\.vue$/,
use:['vue-loader']
}
]
},
// Use runtime-compiler
resolve:{
alias:{
'vue$': 'vue/dist/vue.esm.js'
}
},
// plug-in unit
plugins:[
// Copyright plugin
new webpack.BannerPlugin(' The final copyright belongs to the other shore dance !'),
// index.html Packaging plug-in
new HtmlWebpackPlugin({
// Specify template generation Otherwise, No id="app" Of div Also delete the call index.html Medium <script> Expected to add... Automatically , So there's no need to write
template: 'index.html'
})
]
}
modify index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> </div> </body> </html>
Perform packaging
It's a mistake
D:\[email protected]\vue\day1\html\4. from 0 Start learning VUE\simpleplugin>npm run build > [email protected] build D:\[email protected]\vue\day1\html\4. from 0 Start learning VUE\simpleplugin > webpack D:\[email protected]\vue\day1\html\4. from 0 Start learning VUE\simpleplugin\node_modules\webpack\bin\webpack.js:339 throw e; ^ TypeError: Cannot read property 'initialize' of undefined at HtmlWebpackPlugin.apply (D:\[email protected]\vue\day1\html\4. from 0 Start learning VUE\simpleplugin\node_modules\html-webpack-plugin\index.js:40:20) at Compiler.apply (D:\[email protected]\vue\day1\html\4. from 0 Start learning VUE\simpleplugin\node_modules\tapable\lib\Tapable.js:375:16) at webpack (D:\[email protected]\vue\day1\html\4. from 0 Start learning VUE\simpleplugin\node_modules\webpack\lib\webpack.js:33:19) at processOptions (D:\[email protected]\vue\day1\html\4. from 0 Start learning VUE\simpleplugin\node_modules\webpack\bin\webpack.js:329:15) at D:\[email protected]\vue\day1\html\4. from 0 Start learning VUE\simpleplugin\node_modules\webpack\bin\webpack.js:387:2 at Object.Yargs.self.parse (D:\[email protected]\vue\day1\html\4. from 0 Start learning VUE\simpleplugin\node_modules\yargs\yargs.js:533:18) at Object.<anonymous> (D:\[email protected]\vue\day1\html\4. from 0 Start learning 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! [email protected] build: `webpack` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] 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:\[email protected]\vue\day1\html\4. from 0 Start learning VUE\simpleplugin>
The error you see is probably that you can't read the attribute initialize Method , It's an undefined , After looking at the source code , It is found that this method does not exist in the latest version , Later I saw the teacher's version, which is 3.2.0, My is 5.3.1
Switch versions , And then spoil it npm install
Remove warning after successful installation
Perform packaging again
Package successfully
see dist
You can see that there is index.html Of
And there are also id="app" Of div It's automatically inserted script label , Run it dist Medium html
There's no problem running
author ： Dance on the other side
Time ：2021\06\07
It's about ：VUE
This article belongs to the author's original , Without permission , No forwarding
Participation of this paper Tencent cloud media sharing plan , You are welcome to join us , share .