webpack學習（三）：配置HtmlWebpackPlugin
阿新 • • 發佈：2018-12-11
demo地址: https://github.com/Lkkkkkkg/webpack-demo
webpack初步配置參照 https://blog.csdn.net/qq593249106/article/details/84892069
當前目錄結構:
|- /dist //用於放打包後文件的資料夾
|- bundle.js //出口檔案
|- index.html //模板檔案
|- /node_modules
|- /src //用於放原始檔的資料夾
|- index.js //入口檔案
|- package.json
|- webpack.config.js //webpack配置檔案
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack-demo06</title>
</head>
<body>
<script src="bundle.js"></script> <!--這是手動引用的bundle.js-->
</body>
</html>
先前配置的 index.html 中, 手動引用了bundle.js, 如果有多個入口檔案, 則需要手動新增不同的出口檔案, 會比較麻煩, 使用 HtmlWebpackPlugin 外掛就可以使用模板生成html檔案, 這個html檔案會自動引用出口檔案
安裝 HtmlWebpackPlugin 外掛
npm install html-webpack-plugin --save-dev
配置 webpack.config.js
要使用 HtmlWebpackPlugin , 不但要安裝, 還需要在 webpack 配置檔案中配置 plugins 使用這個外掛:
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: 修改一下index.html, 不再手動引用出口檔案bundle.js, 重新構建看看會發生什麼:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack-demo06</title>
</head>
<body>
<!--<script src="bundle.js"></script> 不再手動引入出口檔案-->
</body>
</html>
重新構建
終端輸入 npm run build , 開啟index.html:
打包成功, 成功自動引入了 bundle.js 輸出了內容
測試多入口檔案
在 src 目錄下新增多一個 print.js:
print.js
export default function printMe() {
console.log('I get called from print.js!');
}
當前目錄結構如下:
|- /dist //用於放打包後文件的資料夾
|- bundle.js //出口檔案
|- index.html //模板檔案
|- /node_modules
|- /src //用於放原始檔的資料夾
|- index.js //入口檔案1
|- print.js //入口檔案2
|- package.json
|- webpack.config.js //webpack配置檔案
修改一下 index.js , 在 index.js 中引用 print.js:
index.js
import _ from 'lodash';
import printMe from './print.js';
function component() {
var element = document.createElement('div');
var btn = document.createElement('button'); //新建一個button物件
element.innerHTML = _.join(['Hello', 'webpack'], ' '); //要用到lodash的語法
btn.innerHTML = 'Click me and check the console!';
btn.onclick = printMe; //button觸發的事件是引用的print.js暴露的事件
element.appendChild(btn); //把button物件插入div中
return element;
}
document.body.appendChild(component());
配置 webpack.config.js
配置多個入口檔案:
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js', //多個入口檔案
print: './src/print.js'
},
plugins: [ //webpack 通過 plugins 實現各種功能, 比如 html-webpack-plugin 使用模版生成 html 檔案
new HtmlWebpackPlugin({
filename: 'index.html', //設定生成的HTML檔案的名稱, 支援指定子目錄，如：assets/admin.html
})
],
output: {
filename: '[name].bundle.js', //根據入口檔案輸出不同出口檔案
path: path.resolve(__dirname, 'dist')
}
};
重新構建
終端輸入 npm run build , 開啟index.html:
成功打包, 此時 index.html 也發生了相應的變化:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript" src="app.bundle.js"></script>
<script type="text/javascript" src="print.bundle.js"></script></body>
</html>