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

給 a/b/c 頁面配置 html 模版，使用相同模版，根文件下的 html 文件

配置多路口-多頁面應用

entry : {

????main:

????a:

????b:

????c:

}

上線地址 output.publicPath

在html中所引用的js路徑 被替換為以publicPath開頭的絕對路徑

上線前壓縮html文件 plugins->htmlWebpackPlugin->minify(很多參數)

https://github.com/kangax/html-minifier#options-quick-reference

minify: {

removeComments: true, // 刪除注釋

collapseWhitespace: true // 刪除空格

}

在自定義的 html 模版文件中使用 ejs 自定義了引用輸出 js 的地方（在head或body引入類似：<script src='<%= htmlWebpackPlugin.files.chunks.main.entry %>'></script>）

因此需要將 inject 設置為 false（默認為 true），避免打包資源的引入混亂

安裝babel插件的命令是npm install --save-dev babel-loader babel-core

代碼分割

通過自定義 html 模版，根據 htmlWebpackPlugin.files.chunks.(filename).entry 自定義輸出模塊的插入地方（head/body）

htmlWebpackPlugin.files 輸出 chunks需要打包的模塊（main/a） css輸出的樣式文件數組 js輸出的腳本文件數組；

其中 chunks 中的 模塊 .entry 屬性，可以獲取輸出的文件路徑

遍歷 htmlWebpackPlugin -> files、options

遍歷 htmlWebpackPlugin.files、htmlWebpackPlugin.options

可能值是對象/數組 JSON.stringify

new?htmlWebpackPlugin({
	filename:?'index.html',
	template:?'index.html',
	inject:?'head',
	title:?'webpack?is?cool~',
	date:?new?Date()
})

webpack 配置文件：添加 title: 'webpack is cool'

自定義 html 模版文件：使用 ejs 模版

<% 'Scriptlet' tag, for control-flow, no output

<% %> 控制流

<%= Outputs the value into the template (HTML escaped)

<%= %> 轉義輸出

<%= htmlWebpackPlugins.options.title %>? title 定義在 option 之下

老師演示的 webpack 版本 1.13.2

npm i [email protected] -D

filename，inject

https://github.com/jantimon/html-webpack-plugin#configuration

filename: 設置 htmlWebpackPlugin 輸出 html 文件的文件名，可以使用占位符 [hash]

reject: 設置打包 js 文件注射的位置，默認插入到 body 最后，設為 head 則插入到 head 最后

new?htmlWebpackPlugin({
	filename:?'index-[hash].html',
	template:?'index.html'
	inject:?'head'
})

<div class="line number1 index0 alt2" ><code class="js plain" >output:?{</code></div><div class="line number2 index1 alt1" ><code class="js spaces" >????</code><code class="js plain" >path:?(</code><code class="js string" >'./dist/js'</code><code class="js plain" >),</code></div><div class="line number3 index2 alt2" ><code class="js spaces" >????</code><code class="js plain" >filename:?</code><code class="js string" >'[name]-[chunkhash].js'</code></div><div class="line number4 index3 alt1" ><code class="js plain" >}</code></div><p>之前的設置，htmlwebpackplugin 會將生成的 html 文件也保存在 dist/js 下，不合適</p><div class="line number1 index0 alt2" ><code class="js plain" >output:?{</code></div><div class="line number2 index1 alt1" ><code class="js spaces" >????</code><code class="js plain" >path:?(</code><code class="js string" >'./dist'</code><code class="js plain" >),</code></div><div class="line number3 index2 alt2" ><code class="js spaces" >????</code><code class="js plain" >filename:?</code><code class="js string" >'js/[name]-[chunkhash].js'</code></div><p ><code class="js plain" >}</code></p><p ><code class="js plain" ><span>修改為如上，將 filename 中添加 js 路徑，刪去 path 下的 js，這樣 html 文件會生成在 dist 目錄下，js 文件生成在 dist/js 目錄下</span></code></p>

new?htmlWebpackPlugin({
????template:?'index.html'
})

webpack 輸出的 index.html 文件以當前配置文件目錄下的 index.html 為模版插入打包好的資源

關于路徑 和運行上下文 context 屬性相關，解析入口文件 entry 和 loaders 的路徑，需要設為絕對路徑，默認為當前配置文件下的目錄。推薦設置。

The base directory, an?absolute path, for resolving entry points and loaders from configuration.

context:?path.resolve(__dirname,?"app")

By default the current directory is used, but it's recommended to pass a value in your configuration. This makes your configuration independent from CWD (current working directory).

plugins:?[
????new?htmlWebpackPlugin()
]

默認在 output.path 目錄下生成一個 index.html 的h5文件，該文件將打包好的 js 文件在 body 下通過 script 標簽引入

The plugin will generate an HTML5 file for you that includes all your?webpack?bundles in the body using?script?tags.?

If you have any CSS assets in webpack's output (for example, CSS extracted with the?ExtractTextPlugin) then these will be included with?<link>?tags in the HTML head.

https://github.com/jantimon/html-webpack-plugin#configuration

但此時和根目錄下自己寫的 html 文件毫無關聯，不符合項目需求...? 需要以自己寫的 html 文件為模版，引入打包文件