第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

配置多路口-多頁面應(yīng)用

entry : {

????main:

????a:

????b:

????c:

}

上線地址 output.publicPath

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

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

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 設(shè)置為 false（默認(rèn)為 true），避免打包資源的引入混亂

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

代碼分割

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

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

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

遍歷 htmlWebpackPlugin -> files、options

遍歷 htmlWebpackPlugin.files、htmlWebpackPlugin.options

可能值是對(duì)象/數(shù)組 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)

<%= %> 轉(zhuǎn)義輸出

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

老師演示的 webpack 版本 1.13.2

npm i webpack@1.13.2 -D

filename，inject

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

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

reject: 設(shè)置打包 js 文件注射的位置，默認(rèn)插入到 body 最后，設(shè)為 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>之前的設(shè)置，htmlwebpackplugin 會(huì)將生成的 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 文件會(huì)生成在 dist 目錄下，js 文件生成在 dist/js 目錄下</span></code></p>

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

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

關(guān)于路徑 和運(yùn)行上下文 context 屬性相關(guān)，解析入口文件 entry 和 loaders 的路徑，需要設(shè)為絕對(duì)路徑，默認(rèn)為當(dāng)前配置文件下的目錄。推薦設(shè)置。

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()
]

默認(rèn)在 output.path 目錄下生成一個(gè) index.html 的h5文件，該文件將打包好的 js 文件在 body 下通過 script 標(biāo)簽引入

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

但此時(shí)和根目錄下自己寫的 html 文件毫無關(guān)聯(lián)，不符合項(xiàng)目需求...? 需要以自己寫的 html 文件為模版，引入打包文件