webpack打包html插件html-webpack-plugin的使用
1.创建这样的测试目录结构
1)index.html是即将被打包的文件,你可以随便写一些内容
2)index.js是打包的入口文件,你可以写或不写内容
/**
* 压缩html需要插件:html-webpack=plugin
* 插件使用方法:下载,引入,使用
* loader使用方法:下载,使用
*/
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 导入插件
const {
resolve
} = require('path'); // 使用resolve处理绝对地址
const config = {
// 入口文件
entry: './src/index.js',
output: {
// 输出文件名
filename: 'bundle.js',
// resolve处理绝对路径
// __dirname代表当前文件的绝对路径,输出文件放到该路径的dist中
path: resolve(__dirname, 'dist')
},
module: {
rules: [
// loader 配置
]
},
plugins: [
// HtmlWebpackPlugin默认功能为创建空的html文件,并引入输出的js文件
// 通过配置template将指定文件的body内容加入到创建的html文件中
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
// 指定为开发模式
mode: "development"
};
module.exports = config;
3.安装插件html-webpack-plugin到开发环境
cnpm install html-webpack-plugin -D
4.运行打命令
webpack
如果没有装webpack和webpack-cli需要安装一下,代码如下:
cnpm install webpack webpack-cli -D