webpack打包 html 資源
轉載請注明 來源:http://www.eword.name/
Author:eword
Email:eword@eword.name
webpack打包 html 資源
一、打包 html文件的核心配置
// webpack.config.js webpack的配置文件
// 路徑: ./webpack.config.js
//……
const HtmlWebpackPlugin = require('html-webpack-plugin');
//……
// plugins的配置
plugins: [
//詳細的plugins配置
//html-webpack-plugin
//功能:默認公創建一個空的HTML, 自動引入打包輸出的所有資源(JS/CSS)
//需求:需要有結構的HTML文件
new HtmlWebpackPlugin({
//復制../src/index.html'文件,并自動引入打包輸出的所有資源(JS/CS5)
template: './src/index.html'
})
],
//……
二、安裝對應插件
# 安裝 html-webpack-plugin 插件
> npm i html-webpack-plugin -D
三、運行
> webpack
- 結論:
1、打包
html文件需要使用html-webpack-plugin插件2、
html-webpack-plugin需要復制一個有結構的HTML文件,否則默認會創建一個空的HTML3、
html-webpack-plugin會自動在打包的html文件中引入打包輸出的所有資源(JS/CSS)

浙公網安備 33010602011771號