Node.js html-webpack-plugin的使用

tml-webpack-plugin是导入在内存中生成 HTML 页面的 插件。
作用：
1.自动在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle注入到页面底部
2. 自动，把打包好的 bundle.js 追加到页面中去
使用cnpm i html-webpack-plugin -D命令 安装

注：
只要是插件，都一定要放到 plugins 节点中取

webpack.config.js文件

const path = require('path') const webpack = require('webpack');var htmlWebpackPlugin = require('html-webpack-plugin')module.exports = {entry: path.join(__dirname, './src/main.js'),output: { path: path.join(__dirname, './dist'), filename: 'bundle.js' },devServer: { open: true, port: 3000, contentBase: 'src', hot: true },plugins: [ new webpack.HotModuleReplacementPlugin(), new htmlWebpackPlugin({template: path.join(__dirname, './src/index.html'), // 指定模板文件路径filename: 'index.html' // 设置生成的内存页面的名称})] }

使用 npm run dev 命令运行项目

注：
如果没有安装 cnpm
输入 npm install -g cnpm --registry=https://registry.npm.taobao.org 命令安装

总结

以上是生活随笔为你收集整理的Node.js html-webpack-plugin的使用的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。