webpack

實際上，服務器和客戶端沒有任何區別，雖然這裏沒有按鈕點擊操作，也沒有向文本文字鍵入的操作，但是在一個更高的層面上，

事件正在發生。一個連接被建立——事件！數據通過連接接受——-事件！數據通過連接停止——事件！

爲什麼我們可以直接寫require（‘’） ，我們不能這麼寫的，我們之所以這麼寫，是因爲webpack支持，

webpack支持的模塊化的方式是amd commonjs 和es6的模塊化方式所以我們可以直接寫

webpack原生是隻支持js文件的打包的，是不支持css文件類型的，如果要處理css文件就需要合適的loader

css-loader使得webpack可以處理css文件，style-loader通過css-loader處理完的文件，新建一個style標籤插入到HTML文件中的head中生效

webpack打包命令後面追加各種參數可以得到有關打包的更加詳細的信息：

–watch 可以實現每次只要改變文件保存，webpack自動執行打包命令

–progress 可以在命令行窗口看到短暫的打包的進度百分比效果

–display-reasons 可以將‘爲什麼要去打包每個模塊的原因也打印出來’

–display-modules 可以將打包的具體的模塊都顯示出來

靠坑啊，webpack必須必須要全局安裝一個，然後在你的項目中再安裝一個，這是官方推薦的做法。

webpack在打包的過程中會生成一些它需要的內置的函數，比如說webpack_require

發現當沒有安裝css-loader 和style-loader的情況下試圖在js文件中require一個css文件並打包的時候，並不會報錯說缺少loader工具而是直接不打包css文件，就好像是打包的時候直接忽

忽略了require（‘./style.css’）這句話。而安裝了css-loader和style-loader並將管道連接正確後會正確識別對css文件的引入並打包css文件

劃重點，敲黑板了，webpack.config.js中寫的是module.exports = {} 而不是module.export!!!

webpack.config.js是webpack默認的配置的文件名，當執行webpack命令的時候，webpack會自動去尋找並讀取這個配置文件並打包，如果你的配置文件不叫webpack.confg.js而是叫webpack.dev.config.js那麼執行webpack命令的時候需要用config命令來指定要讀取的配置文件的名稱就像這樣 webpack –config webpack.dev.config.js 如此webpack就會自動的去尋找並讀取webpack.dev.config.js了。

那麼如果我還想向之前那樣可以指定一些參數怎麼辦呢，這時候我們可以配置npm的腳步來做的，npm 有一個scripts屬性，可以定義一段腳步，腳本內容可以是webpack的命令： webpack –config webpack.dev.config.js –progress –display-modules –colors –display-reasons

entry: 入口的配置有三種形式

1單入口字符串形式，直接寫entry: ‘src/js/mian.js’ 這樣就是說你的main.js中會require所有的依賴，webpack從這個入口分析所有的依賴來進行打包

2數組形式 entry: [“./entry1”，”./entry2”] 這種情況是webpack解決兩個平行的，不相互依賴的文件卻想打包到一起的情況

哎呦喂，厲害了厲害了，終於知道爲什麼要var path = require(‘path’)

在webpack1中是不需要寫這個的，當是entry是上面的情況2的時候我們配置output(永遠是一個對象，裏面配置path 和filename)的時候可以這樣寫

output: {
path: ‘./dist/js’,
filename: ‘bundle.js’
}
ok在webpack1中，這樣寫是沒有問題的，但是如果是webpack2中（現在都是2了） 打包的時候會報錯說你配置的path不是一個絕對路徑，他要求一個絕對路徑，

你把‘./dist/js’改成’/dist/js’後打包確實不報錯了，但是卻不知道打包到哪裏去了，找不到打包後的結果，所以正確的做法是

var path = require(‘path’)

output: {
path: path.resolve(__dirname,’./dist/js’),
filename: ‘bundle.js’
}
這樣就能成功的將bundle.js打包到dist/js文件夾下了

3對象形式，entry是一個對象，這種情況下就相當於分chunk了，對象中的key代表的是chunk的name,value代表的是chunk的真實的entry，而這裏的entry遵循的規則

跟上面的是一致的既可以傳字符串，也可以傳數組。

情況三是用於多頁面應用的

當entry是情況三的時候，output中的filename不能直接寫死成‘bundle.js，否則兩個chunk打包會相互覆蓋出來只有一個文件叫做bundle.js

正確的方式是使用佔位符來區分兩個chunk，佔位符有三個： name—chunk的name hash: 本次打包的hash chunkhash 每個chunk各自的hash

output: {
path: path.resolve(__dirname,’./dist/js’),
filename: ‘[name]-[hash].js’
}

或者

output: {
path: path.resolve(__dirname,’./dist/js’),
filename: ‘[name]-[chunkhash].js’
}

ok 繼續

我們發現當我們分多個chunk打包的時候，爲了使得多個chunk之間打包出來的模塊不相互覆蓋，我們就需要用hash或者是chunkname來區分，這樣的話我們

對於打包出來的包的名稱就變成不可預知的了，就無法做到提前在HTML文件中引入打包好後的js文件了，怎麼辦呢？使用插件！HTML-webpack-plugin插件就是專門

爲了解決這個痛點而生的，首先我們安裝插件npm install html-webpack-plugin注意別寫錯了哦，

之後在我們的webpack.config.js中引入插件

var htmlWebpackPlugin = require(‘html-webpack-plugin’)

在entry 和output配置項後面追加一個插件的配置 plugins: 它是一個數組，對的，是一個數組

plugins: [
new htmlWebpackPlugin() // 是的只需要在裏面直接new你引進了的插件就可以了
]

這樣插件就會自動生成一個默認名爲index.html的文件並在其中自動引入打包好後的多個chunk打包出來的文件。

在這裏要注意，生成的index.html文件會根據output的配置中寫的生成到dist/js文件夾下，跟所以的js文件同級，但是往往我們希望這個HTML文件單獨領出來

不要跟衆多的js文件混雜在一起，此時我們可以這樣改寫我們的output的配置

output: {
path: path.resolve(__dirname,’./dist’),
filename：‘js/[name]-[chunkhash].js’
}

把js從dist的後面轉移到filename前面，就可以做到將js文件都打包到js文件夾下而，HTML文件愛你單獨在dist的根目錄下了。 是不是很神奇

還有問題，插件生成的HTML不是我們想要的怎麼辦？，我們可以用自己寫好的index.html做爲模塊，讓插件安照我們的模板來生成插入好，

js文件的HTML只需要在plugin 中新建插件時候給他傳參數

new htmlWebpackPlugin({
template： ‘index.html’ // 這樣就能指定安照我們的模塊來生成 HTML了
filename： ‘wathever.html’ // 名字也是可以自己定義的
inject： ‘head’| ‘body’ // 用來指定將生成好的js插入到HTML哪裏
})

我靠厲害了，原來這個插件這麼吊，可以利用類似模板引擎的技術在自己寫的HTML模板文件中，寫<%= %>這種代碼來拿到在webpack.config.js 中html-webpack-plugin

插件中配置的項目，進而在生成的HTML中也就會有配置的項目了，比如說在html-webpack-plugin中配置HTML頁面的title 爲‘你好’ ，那麼可以在自己寫的HTML文件中

<%= htmlWebpackPlugin.options.title%> 這樣來拿到你配置好的名字，然後這樣，打包生成好的dist文件夾下的HTML文件中的title也是一致的

html-webpack-plugin 這個插件中一共有兩個大key 一個是files 一個是options

我們可以指定某個chunk打包出來的文件插入到HTML文件的頭部還是body中，

這行代碼放到head中

這行代碼放到body中

如此就可以做到main chunk打包出來的js文件會插入到生成的HTML中的head中而a chunk 打包出來的文件插入到生成的HTML文件的body了

不過需要注意的是，需要在配置中將inject 設置爲 FALSE 是的必須顯示的設置爲FALSE 而不能只是簡單的省略不寫，省略的話還是會默認插入的，導致重複。

更進一步： 上線地址的設置

output中的 publicPath： ‘http://cdn.com’ 就會在資源的引用前面自動加上配置好的線上地址了

既然要上線那就要把代碼壓縮一下吧，可以在html-webpack-plugin中配置minify 屬性來對生成的HTML文件進行壓縮

loader的使用，loader接受一個資源文件，處理完成返回新的資源

webpack視一切爲資源，所以只需要將資源引入進來，而import 和require都是可以的 用哪個都可以

postcss autofix 處理css文件。厲害了又是一大塊兒， webpack會對css文件中通過@import引入的其他的css文件同樣經過css-loader和style-loader的處理，

但是不會通過postcss的處理，要使得項目的所有css文件經過統一的處理需要使用URL傳參數的方式？importLoaders=1!postcss-loade的方式

如果項目中使用了less那麼需要按照less以及less-loader，在寫less的串聯配置的時候，less-loader要寫在最右邊，就是說less-loader是最先處理的，之後在交給postcss之後

再是css-loader之後再是style-loader，注意的是，如果在less文件中也通過@import引入了其他的less文件，我們是不需要想css文件引入那樣在URL中寫import配置參數的，

也就是說less自己幫我們處理好了@import進來的規則樣式，sass同理，另外，sass文件的後綴是scss 不是sass 靠，這個大坑

ejs模板 ejs-loader

圖像的處理使用file-loader 對應的還有一個URL-loader，作用是當圖片的體積大於某個自己設定的值的時候使用file-loader，而當圖片文件體積小於某個值的時候，

採用base64編碼的方式引入圖片，兩種方式的利弊： base64編碼無疑會導致文件的體積增大，而且如果是很多重複的圖片的情況下情況更糟糕，而不用base64編碼的

情況，對待圖片就是一個http網絡請求，不過如果是很多重複的圖片的情況下，可以有效的利用瀏覽器的緩存，提高性能的。

所以說要視情況而定用那種處理方式：如果圖片較大而且多是重複的圖片則不採用base64編碼而用http請求的方式，如果是很多不同的體積很小的圖片，則應該採用base64編碼的方式。