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的使用相关推荐

安装node.js、webpack、vue 和vue-cli 以及安装速度慢/不成功的解决方法
安装node.js.webpack.vue 和vue-cli 以及安装速度慢/不成功的解决方法参考文章: (1)安装node.js.webpack.vue 和vue-cli 以及安装速度慢/不成功的 ...
Node.js 执行webpack命令出现的错误
安装 npm install webpack-cli -g 全局安装 webpack-cli 模块安装 npm install webpack --save-dev 项目中安装以上两个模块后使用 w ...
php项目webpack打包,利用node.js对webpack打包
本篇文章主要介绍了webpack打包node.js后端项目的方法,现在分享给大家,也给大家做个参考. 本文介绍了webpack打包node.js后端项目的方法,分享给大家,具体如下: 安装依赖npm ...
node.js应用生成windows server的plugin——winser
针对项目中windows server machine 不断重启的问题,进行了许多方面修正的尝试: 第一是查系统日志,确定了重启的原因是系统自动更新而引起的,所以暂时把系统更新关闭了.然而考虑到未知的 ...
Node.js 使用webpack-dev-server工具运行项目实现自动打包编译的功能
npm install -g cnpm --registry=https://registry.npm.taobao.org 安装 cnpm 模块使用 cnpm 命令 cnpm i webpack- ...
OpenJS 基金会推出 Node.js 证书，JS 开发者可以“考证”了
OpenJS 基金会近日在其官方博客公布了最新启动的专业认证计划.据介绍,此项认证计划重点关注 Node.js 开发者在专业环境中构建 Node.js 应用和服务所需的关键技能.开发者通过认证后,可获 ...
Node.js 与 JavaScript 基金会正式合并，JS 喜提新主场
翘首以盼了 6 个月后,JavaScript 终于迎来了自己的"新家落户"--OpenJS 基金会于今日官宣! 图源:Node.js Foundation 如何挑战百万年薪的人工智 ...
Node.js 和npm的安装（插件的安装）
一.node.js是什么?有什么用? 1.概述: a).Node.js是基于Chrome JavaScript运行时建立的一个平台,实际上它是对Google Chrome V8引擎进行了封装,它主要用 ...
webpack VS Node.js - 二者对 require 功能的实现区别
原文 Webpack 被广泛用于大部分前端项目. Webpack 有很多内容,本文我不会全部介绍,但我确实想谈谈某些方面. 调试项目时最重要的信息之一,是了解导致您看到的错误的技术.它可以帮助您更有效 ...
node.js之打包工具webpack
什么是 Webpack Webpack 是一个模块打包器.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 为什么重复造轮子市面上已经存在的模块管理和打包工具并不 ...

Node.js html-webpack-plugin的使用

webpack.config.js文件

Node.js html-webpack-plugin的使用相关推荐

最新文章

热门文章