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

重整目錄重新建立了一些之后需要用的文檔

講解了官網的一些loader的介紹

從12:50開始后面講解的是，如何根據webpack的一些屬性在HTML中獲取到一些chunk中初始化的腳本直接顯示在HTML中而不是通過一個連接去獲取

多頁面應用中，通過一個模板打包生成多個html文件，且每個文件引用自己所對應的打包后的js文件：

如果遇到更復雜的多頁面應用，一個頁面中需要使用到多個chunk時，用以上方法一一添加就比較繁瑣，則我們采取如下方法：（chunk就是本頁面引入的js塊）

可以在html文件中顯示插件中特定的數據

最后在生成的index.html文件中相應的位置就會天上相應的插件中定義的數據

使用html-webpack-plugin（插件），解決html中引用的文件名稱為隨機的時候，自動生成與之對應的隨機文件名稱。

先通過命令行安裝npm install html-webpack-plugin --save-dev

使用插件時的，其他參數配置：

在項目中，webpack的配置是默認在webpack.config.js中定義的，簡單的配置如下：

直接在命令行輸入webpack就可進行打包

如果你想在其他文件中進行配置，則在命令行中使用webpack --config webpack.dev.config.js指定新的配置文件

如果想進行上一小節的相關沒配置，在這樣的項目結構中，做法如下：

之后再命令行中輸入 npm run webpack 就可運行上述腳本

webpack和npm run webpack的區別：前者是webpack默認的基本命令，后者是執行package.json里面的scripts標簽。

npm init? ?（初始化之后 會提供一些問答選項 結束后才會產生package.json文件）

npm install webpack --save-dev 安裝webpack

npm install [email protected] --save-dev 安裝指定版本的webpack（因為在上述方式安裝會安裝新的版本，而在利用新版本進行打包時會發生各種錯誤，故我安裝了指定的這個）

此外還需安裝webpack-cil （因為版本到了4.0）?npm install webpack-cli -D

webpack 原文件名 編譯后的文件名

使用require可以在一個文件中導入另外一個文件中的內容

打包css文件是需要指定安裝相應的loader

require('style-loader!css-loader!./style.css') 給文件類型指定一種loader方式

'style-loader' 使html能夠引入css文件

'css-loader' 使webpack能夠編譯css文件

也可在命令行給所有的css文件統一指定loader

當文件更新后，使webpack自動打包更新：

一些參數的含義：

• chunks

• excludeChunks

• webpack github ======> example

  • compilation.assets
    

可以使用命令行的形式代理require中的loader引用

npm init

npm install webpack --save-dev 安裝webpack

webpack 原文件名 編譯后的文件名

require('style-loader!css-loader!./style.css') 給文件類型指定一種loader方式

'style-loader' 使html能夠引入css文件

'css-loader' 使webpack能夠編譯css文件

webpack hello.js hello.bundle.js --module-bing 'css=style-loader!css-loader' --watch 命令行中綁定loader方式

loader:'style-loader!css-loader?importLoaders=1!postcss-loader'

在less文件中@import? 不許要制定importantLoaders=1 （處理flex瀏覽器兼容問題的時候）

處理瀏覽器兼容的css屬性

npm install postcss-loader --save-dev

npm install autoprefixer --save-dev

postcss:[ require('autofixer')({broswer:['last 5versions']})]

package.json中定義“babel”:{

preset:}

npm i --save-dev babel-loader babel-core

npm i --save-dev babel-preset-latest

配置文件中屬性modules:{

????????????????????????loaders:[

????????????????????????test:/\.js$/,

????????????????????????loader:'babel',

????????????????????????query:{

????????????????????????????presets['latest']}

]

}

inject 將JS 文件注入在BODY 或者head里面

chunks? 【】可以將entry內容動態添加

excludeChunks[] 排除用不上的chunks

compilation.assets[路徑].sourse()