亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

?npm 本地安裝?html-webpack-plugin?插件后，在 webpack.dev.config.js 中配置 webpack?

var htmlWebpackPlugin = require('html-webpack-plugin');

先建立對插件的引用，commonjs 模塊引用的寫法

plugins 對應值為一個數組

如果要在 webpack 中使用插件，只需要在 webpack 的配置對象中增加一個 plugins 屬性，值為數組類型，插件初始化（看插件自身的實現）

需求背景： webpack 生成的打包文件 [name]-[hash].js 的文件名是不確定的，是否需要每次修改 index.html 中 js 引入的文件名？ —— 利用 webpack 插件解決這個問題： 使用 html-webpack-plugin，先用 npm 本地開發安裝 npm i html-webpack-plugin -D

filename: '[name]-[chunkhash].js'

改為文件chunk自己的hash值，兩個打包模塊都不一樣，這個hash值可以看做是文件自身的版本號，只有當這個文件發生改變的時候這個hash值才會發生變化 —— 這個特征在項目的上線過程中很有用，只上線那些被改過的文件

將filename改為占位符，而不是用靜態字符串： [name]-[chunk].js?

輸出如圖

官網中解釋 multi entry

如果多個chunk，filename中就使用占位符[name]、[hash]、[chunkhash]

[name] 文件名

[hash] 打包時的第一行顯示hash

[chunkhash] 每個chunk自己的hash值

entry 改為對象類型

entry:?{
	main:?'./src/script/main.js',
	a:?'./src/script/a.js'
}

但此時打包輸出的只有一個 bundle.js 文件

和 output 有關

output:?{
	path:?('./dist/js'),
	filename:?'bundle.js'
}

1. 不要在filename中指定絕對路徑，因為在path中會指定，否則兩個會混亂

2. filename 是用于打包后的每個輸出文件，當多輸入時（entry為一個對象，多個chunk），同一個filename會被覆蓋，最后只生成一個文件

entry 對一個對象 （似乎現在官網上沒有提及 entry 可以是數組）

[0] 模塊 multi main，把兩個不相關的模塊 main.js 和 a.js 打包在一起

將webpack.dev.config.js中的 entry 字段設置為數組字符串：

entry:?['./src/script/main.js','./src/script/a.js']

打包結果如圖，打包原因 single entry 單個入口，兩個入口模塊被打到multi main模塊中，最后生成 bundle.js 文件

在 npm package.json 中的 script 字段添加 webpack + 選項? 的簡寫命令

"webpack": "webpack --config webpack.dev.config.js --progress --display-modules --colors --display-reson"

之后只需在命令行運行 npm run webpack即可，不再添加選項

重命名 webpack.config.js 為 webpack.dev.config.js 后，運行 webpack 失效，因為默認的配置文件為 webpack.config.js，此時需要通過 --config 選項指定配置文件

webpack --config webpack.dev.config.js

entry 打包的入口從哪個文件開始

output 打包后的文件保存在什么地方

path 打包后保存的目錄

filename 打包后的文件名

命令行運行 webpack 時會默認讀取根目錄下的 webpack.config.js 或者是通過 --config 選項指定的文件

該配置文件應該導出一個配置對象，如

module.exports?=?{
????//?configuration
}

注意是 exports 不是 export

項目文件結構：

dist 打包輸出

node_modules npm包

src 打包源文件

????script 腳本文件

????style 樣式文件

index.html 原頁面

package.json

webpack.config.js?

--display-reasons?

展示打包這個模塊的原因

cjs require ./world.js [0] ./hello.js 1:0-21? ? hello.js中require這個world.js文件