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

此時的配置文件

老師的babel-core@6.18.0 和 babel-loader@6.2.7 版本號

webpack 使用 babel 之前 npm 安裝 babel， babel 的使用

• npm install --save-dev babel-loader babel-core

• webpack 配置 babel-loader

module:?{
??loaders:?[
????{?test:?/\.js$/,?exclude:?/node_modules/,?loader:?"babel-loader"?}
??]
}

• webpack 配置 evn presets（這點不是很懂），指定 presets ，告訴 babel-loader 怎么處理 js；還可以通過根目錄下創(chuàng)建 .babelrc 配置文件，設(shè)置 { "presets": ["env"] }，官方；還可以在 package.json 文件中添加 "babel": { "presets": ["latest"] } ;

module:?{
??loaders:?[
????{?test:?/\.js$/,?exclude:?/node_modules/,?loader:?"babel-loader",
??????query:?{
??????????'presets':?['latest']
??????}
????}
??]
}

• 安裝 evn presets 插件：npm install --save-dev babel-preset-latest?（官網(wǎng)沒有 lastest 版本，而是 推薦使用 npm install babel-preset-env --save-dev，babel-preset-env replaces es2015, es2016, es2017 and latest）https://babeljs.io/docs/plugins/

http://babeljs.io/docs/setup/#installation

https://doc.webpack-china.org/concepts/loaders#loader-%E7%89%B9%E6%80%A7

loader 的特性和使用方式

修改配置文件中 htmlWebpackPlugin 的 inject: 'body' -> false，因為在 html 模版中通過 ejs 自定義打包模塊注入位置

已經(jīng)通過 excludeChunks，指定排除了不需要的打包模塊

main 打包模塊已經(jīng)自定義在 head 中，所以在 body 中遍歷自身 chunks 的時候需要排除 main 模塊

內(nèi)聯(lián)插入打包后的 main 模塊代碼

完整的輸出 main 模塊打包后的文件內(nèi)容的代碼

<%=?compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source()?%>

設(shè)置了 output.publicPath 后，htmlWebpackPlugin.files.chunks.[chunkname].entry 輸出的是帶有 publicPath 的絕對路徑，但 compilation.assets[file-path].source() 中的 file-path 是不帶有 publicPath 的，因此需要使用 substr(htmlWebpackPlugin.files.publicPath.length) 去裁剪字符串... 輸出類似 "js/a-c7dd2e0674d065ba1d22.js" 的字符串

webpack區(qū)別其他打包工具：1.Code Splitting代碼分割 2.模塊熱更新

模塊化：CMD / AMD / ES6

常見組合：react + webpack + es6

將打包的 js 模塊以內(nèi)聯(lián) inline 方式引入 htmlWebpackPlugin 輸出的 html 文件

html-webpack-plugin/examples/inline/template.jade

doctype?html
html
??head
????meta(http-equiv="Content-type"?content="text/html;?charset=utf-8")
????title?#{htmlWebpackPlugin.options.title}
??body
????each?cssFile?in?htmlWebpackPlugin.files.css
??????style?!{compilation.assets[cssFile.substr(htmlWebpackPlugin.files.publicPath.length)].source()}
????each?jsFile?in?htmlWebpackPlugin.files.js
??????script(type="text/javascript")?!{compilation.assets[jsFile.substr(htmlWebpackPlugin.files.publicPath.length)].source()}

compilation 是 webpack 自身暴露的對象變量

compilation.assets 是 webpack 打包文件輸出的對象， 如下結(jié)構(gòu)

{

? ? "js/a-c7dd2e0674d065ba1d22.js":

? ? {

? ? ? ? "_source": {...},

? ? ? ? "_cachedSize": 1442,

? ? ? ? "_cachedMaps": {}

? ? },

? ? "js/b-b65b8b01068059dd7047.js": {...}

? ? "js/c-6ce24a41e898b7f598cb.js": {...},

? ? "js/main-13e6e64b8f9469134be8.js": {...}

}

通過?compilation.assets[file-path].source() 來輸出打包文件內(nèi)容

excludeChunks: ['b', 'c']

Allows you to skip some chunks (e.g don't add the unit-test chunk)

指定不要引入的打包文件

htmlWebpackPlugin

chunks：['main', 'a']

Allows you to add only some chunks (e.g only the unit-test chunk)

指定添加哪些打包模塊，數(shù)組類型，數(shù)組值為被打包文件的文件名字符串

此時需要注意兩點

1. inject 需要設(shè)為 true | 'body' | 'head'，否則指定的 chunks 無法注射

2. 將自定義的 html 模版中，使用 ejs 自定義引入的打包文件刪去，避免引入混亂

疑問：這樣統(tǒng)一注射打包文件，是不是又無法像 ejs 一樣自定義注射的位置了？

之前配置生成的 html 頁面：三個頁面都引入 main.js，但在末尾引入自己的頁面 js 文件

因為共用的 html 模版在末尾的配置是

<script src='<%= htmlWebpackPlugin.files.chunks.a.entry %>'></script>

默認(rèn)都輸出了 a 的打包文件