webpack --- html-webpack-plugin

安装

cnpm i html-webpack-plugin -D

在这里插入图片描述

配置 (webpack.config.js)

// webpack 是基于node构建的,webpack的配置文件中,任何合法的Node代码都是支持的
var path = require('path')// 在内存中生成src下的index.html,同时自动将打包好的bundle.js 导入到页面中
var htmlWebpackPlugin = require('html-webpack-plugin')// 当以命令行形式运行webpack 或 webpack-dev-server 的时候,工具会发现,我们并没有提供 要打包的文件的入口和出口文件,此时,他会在webapck.config.js 中寻找 入口和出口文件
module.exports = {entry: path.join(__dirname, './src/main.js'), // 入口文件output: {path: path.join(__dirname, './dist'), // 指定输出文件的名称filename: 'bundle.js' // 指定输出文件的名称},plugins: [// 所有webpack 插件的配置new htmlWebpackPlugin({template: path.join(__dirname, './src/index.html'),filename: 'index.html'})]
}

package.json

{"name": "01WEBPACK-STUDY","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack-dev-server --open --hot --port 3000 --contentBase src"},"keywords": [],"author": "xxxxx<xxxxx>","license": "ISC","devDependencies": {"html-webpack-plugin": "^3.2.0","webpack": "^4.39.3","webpack-cli": "^3.3.8","webpack-dev-server": "^3.8.0"}
}

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Webpack 尝试1.1</title></head><body></body>
</html>