webpack html发布,使用webpack插件HtmlWebpackPlugin发布html文件

参考

HtmlWebpackPlugin

在webpack中使用HtmlWebpackPlugin来帮助打包html文件，并输出一个包含所有编译打包后的资源的HTML5文件到dist目录下；

配置

1.创建本地项目webpack-demo

mkdir webpack-demo

cd webpack-demo

2.在webpack-demo的根目录下创建package.json文件

npm init -y

安装webpack依赖包

npm i webpack webpack-cli webpack-dev-server --save-dev

模块说明：

webpack

webpack核心

webpack-cli

webpack的脚手架(启动器)

webpack-dev-server

开发环境下用于实时加载依赖

4.修改package.json文件的scripts属性值,进行打包资源的配置

"scripts": {

"dev": "webpack-dev-server --open --mode development",

"build": "webpack --mode production"

},

5.安装插件

npm install --save-dev html-webpack-plugin

6.在webpack.config.js文件中进行配置

const path = require('path');

// 显示进程的完成进度

var ProgressBarPlugin = require('progress-bar-webpack-plugin');

// 设置进度字体颜色

const chalk = require('chalk');

// 以树图的方式展示打包后的文件

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

// 输出html

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

mode: 'production',

entry: {

app: './src/app.js'

},

output: {

path: path.resolve(__dirname, '../dist'),

filename: '[name].[hash].min.js'

},

module: {

rules: [

{

test: /\.jsx?$/,

use: [

{loader: 'babel-loader'}

]

}

]

},

plugins: [

new HtmlWebpackPlugin({

title: 'Webpack Study Demo',

filename: 'index.html',//指定生成的HTML文件名

template: path.join(__dirname, './public/index.html') // 指定模板路径

}),

new ProgressBarPlugin({

format: chalk.green('Progressing') + '[:bar]' + chalk.green(':percent') + '(:elapsed seconds)',

clear: false

}),

new BundleAnalyzerPlugin()

]

}

7.结果展示