webpack在内存生成html,webpack4：在内存中生成首页之html-webpack-plugin插件

1、安装：

cnpm i html-webpack-plugin -D

2、webpack.config.js中配置plugins属性：

const path = require("path")

const htmlWebpackPlugin = require("html-webpack-plugin") // 导入 在内存中自动生成html文件 的插件

// 创建一个插件的实例对象

const htmlPlugin = new htmlWebpackPlugin({

template: path.join(__dirname, "./src/index.html"), // 源文件

filename: "index.html" // 生成的 内存中首页的 名称

})

module.exports = {

mode: 'production', // development 或 production

plugins: [

htmlPlugin

]

}

其中package.json(和其它地方一样，没什么特殊的)：

{

"name": "wp4-1",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"dev": "webpack-dev-server --open chrome --port 3000 --hot --host 127.0.0.1"

},

"keywords": [],

"author": "",

"license": "ISC",

"devDependencies": {

"html-webpack-plugin": "^3.2.0",

"webpack": "^4.41.5",

"webpack-cli": "^3.3.10",

"webpack-dev-server": "^3.10.1"

}

}

3、cmd中运行：npm run dev

5、查看生成的首页index.html文件的源码，发现插件自动添加了“”：

Document

首页