webpack學習簡單總結

<a href="https://s3.51cto.com/wyfs02/M00/9A/2A/wKiom1lSNCLzne2yAAAYN-kvG4s029.png-wh_500x0-wm_3-wmp_4-s_3676625829.png" target="_blank"></a>

這個報錯說明需要安裝相應的Loader,并在引用時指定相應的loader

執行成功如圖：

<a href="https://s3.51cto.com/wyfs02/M01/9A/2A/wKiom1lSNCziWge8AAAujBht47U969.png-wh_500x0-wm_3-wmp_4-s_3959820103.png" target="_blank"></a>

chunk指相應的區塊。

要是css引入正确：必須引入css-loader，要使改變的css生效，要引入style-loader;

各個js的函數調用隻能在各自的函數中寫，引入隻是合并的意思，但并不能直接使用引入的js的函數。

而且style-loader要寫在css-loader的前面，否則報如下錯誤。

<a href="https://s4.51cto.com/wyfs02/M01/9A/2B/wKioL1lSND3R-FJgAAAf48LhHIQ688.png-wh_500x0-wm_3-wmp_4-s_1619917425.png" target="_blank"></a>

<a href="https://s4.51cto.com/wyfs02/M02/9A/2A/wKiom1lSND3yRbRmAAAdNjWH1zE518.png-wh_500x0-wm_3-wmp_4-s_1743294142.png" target="_blank"></a>

執行成功之後，css插入到了head标簽裡。

loader正确順序：”style-loader!css-loader!./style.css”

loader的加載順序是從右向左加載，是以

loader正确順序：：style-loader!css-loader!postcss-loader!less-loader

sass-loader或者less-loader等語言預編譯loader在webpack中的位置為：

1．最先放sass-loader或者less-loader

2．postcss-loader

3．css-loader

4．style-loader

注意：如果一個css中import導入另一個css,另一個css的postcss-loader沒生效，這時要給css-loader加一個參數，指定import導入css的數量：

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

為了使用簡便，不能每次在引入css的時候加loader，則可以在指令中實作：

webpack hello.js bundle.js --module-bind 'css=style-loader!css-loader'

去掉子產品引入css時加入的loader，1.x可以，3.0依舊會報錯。

--watch

在指令後面加 --watch ，可以不用每次改動都執行指令，而是自動改變

注意：修改了webpack配置需要重新開機，即即使設定了監聽也要手動重新編譯;

關于版本安裝問題：把想要安裝的npm 子產品的名稱和版本号寫在package.json的依賴裡，然後npm install就會自動安裝

但是，每次輸入很多指令依舊很繁瑣，解決辦法：

如果要提前配置好輸入的webpack指令，則在package.json中的script下，定義一個webpack屬性，後面定義所有要輸入的webpack的指令，定義好之後，在指令視窗 運作 指令 npm run webpack即可，定義方式與定義npm run dev中的dev是一樣的。

<a href="https://s5.51cto.com/wyfs02/M02/9A/2A/wKiom1lSNFSiYdGNAAAhxS5ZBaY741.png-wh_500x0-wm_3-wmp_4-s_2200484769.png" target="_blank"></a>

--progress  檢視打包過程

--display-modules 檢視打包的子產品

--colors  打包後的指令加顔色區分

--display-reasons 顯示打包原因

--watch 自動監聽檔案改變，若改動，自動打包，但是修改webpack配置需重新手動編譯。

報錯：

<a href="https://s5.51cto.com/wyfs02/M02/9A/2B/wKioL1lSNGGAAld7AAAWIM2yUks929.png-wh_500x0-wm_3-wmp_4-s_4045632248.png" target="_blank"></a>

output輸出的路徑寫成這樣：

<a href="https://s4.51cto.com/wyfs02/M01/9A/2B/wKioL1lSNHvxBwjbAAAVCkOGV2M991.png-wh_500x0-wm_3-wmp_4-s_3396784820.png" target="_blank"></a>

而不是這樣：

<a href="https://s5.51cto.com/wyfs02/M02/9A/2A/wKiom1lSNIbgUcAAAAANoOd7rFQ815.png-wh_500x0-wm_3-wmp_4-s_3249762308.png" target="_blank"></a>

webpack打包完成之後，顯示打包成功，但是并沒有生産打包的檔案和檔案夾，是以這裡在path中切記首先要寫__dirname+“路徑”

如圖：

<a href="https://s5.51cto.com/wyfs02/M02/9A/2B/wKioL1lSNJnQaB0wAAAZI1TIVC4696.png-wh_500x0-wm_3-wmp_4-s_561672318.png" target="_blank"></a>

個人了解：如果寫成 __dirname+”/path”,則說明現在還沒有要放入的js的檔案夾，這樣會自動建立，否則即使執行成功，但是會看不到打包後的js檔案，如果已經提前建立好要打包的js的存放檔案夾，則不需要寫__dirname. 【常見問題】

如果更改了入口檔案的數量，比如變成數組形式，或者對象形式，則需要重新手動運作npm run webpack。

數組：用數組形式寫多個入口檔案，則會合并成指定的一個打包之後的檔案

對象：分别打包成多個檔案

注意：一個chunk代表一個區塊，則不同的chunk會打包成不同的檔案，如果output寫死成一個路徑，則打包之後第二個區塊會覆寫第一個區塊，解決辦法，chunkname+hash作為占位，則有幾個區塊就打包成幾個區塊 filename: "[name]-[hash].js"

報錯原因：入口檔案的路徑寫成了單引号套雙引号，是以不識别。

<a href="https://s3.51cto.com/wyfs02/M01/9A/2A/wKiom1lSNK7gz8BtAAA8E0K3TTI160.png-wh_500x0-wm_3-wmp_4-s_4223127714.png" target="_blank"></a>

hash值可以了解為版本号，隻有檔案發生改變時，hash值才會變化。

hash值對靜态資源的版本管理很有用。

npm安裝該插件

npm install 插件名 --save-dev

一個很好用的webpack插件：html-webpack-plugin

安裝

<code>npm </code><code>install</code> <code>html-webpack-plugin --save-dev</code>

使用：

首先在webpack.config.js中引入該插件，

var htmlWebpackPlugin = require('html-webpack-plugin');

然後隻需要在webpack配置中modules增加屬性plugins，用來初始化插件。

寫法如下：

<code>plugins: [</code>

<code>new</code> <code>htmlWebpackPlugin() </code>

<code>]</code>

如果要把自己的html頁面打包到對應的打封包件夾下：則給該插件映射一個模版：

<code>new</code> <code>htmlWebpackPlugin({</code>

<code>template:”index.html”</code>

<code>})</code>

如果html頁面想要輸出到打封包件夾最外層目錄，然後js等檔案要輸出到js對應的檔案夾下，則output輸出的時候把js路徑單獨配置到對應的目錄下的filename就可以。

代碼如圖：

<code>output: {</code>

<code>        </code><code>filename: </code><code>"js/[name]-[hash].js"</code><code>,</code>

<code>        </code><code>path: __dirname+</code><code>"/dist"</code>

<code>},</code>

輸出的檔案結構如圖：

<a href="https://s2.51cto.com/wyfs02/M01/9A/2B/wKioL1lSNLngaSsFAAAJ42G4KKg366.png-wh_500x0-wm_3-wmp_4-s_1924461025.png" target="_blank"></a>

插件的屬性：

<code>        </code><code>new htmlWebpackPlugin({</code>

<code>            </code><code>filename:</code><code>"index-[hash].html"</code><code>,</code>

<code>            </code><code>template:</code><code>'index.html'</code><code>,</code>

<code>            </code><code>inject:</code><code>"head"</code><code>,</code>

<code>            </code><code>title:</code><code>"我是title"</code><code>,</code>

<code>            </code><code>date</code><code>:new Date(),</code>

<code>        </code><code>})</code>

通過在plugins中定義的屬性和值，可以在頁面中用&lt;%=  %&gt;模版引擎的方式展現出來。

eg:&lt;%= htmlWebpackPlugin.options.title %&gt;

并且可以取到值之後進行for循環

<code>&lt;% </code><code>for</code> <code>(var key </code><code>in</code> <code>htmlWebpackPlugin.files){ %&gt;</code>

<code>&lt;%= key %&gt; : &lt;%= JSON.stringify(htmlWebpackPlugin.files</code><code>[key]</code><code>) %&gt;</code>

<code>&lt;% } %&gt;</code>

通過周遊files和options可以看到插件對應的都有哪些屬性，這樣頁面中如果有多個js,一些想放到頭部，一些像放到body中，就可以直接在頁面中以模闆引擎的方式引入js了。

eg: &lt;script type=”text/javascript src=”&lt;%= htmlWebPackPlugin.files.chunks.main.entry %&gt;”&gt;

[此時inject要記得設為false]

多頁面配置：chunk:[]

plugin是一個數組，如果要打包成多個頁面，隻需寫多個建立插件對象的執行個體，給每個執行個體裡寫chunk屬性，該屬性是一個數組，每個數組裡對應的js的名稱。

excludeChunks:[]    除一些以外

安裝loader方法:

<code>npm  </code><code>install</code>  <code>xxx-loader  --save-dev</code>

首先安裝html-loader:

<code>npm  </code><code>install</code>  <code>html-loader  --save-dev</code>

在webopack.config.js中配置該loader

1. 首先寫好自己的html代碼，

<code>&lt;</code><code>div</code> <code>style</code><code>=</code><code>"background-color:red;width:100%;height:100%"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>h1</code><code>&gt;模闆檔案處理 測試&lt;/</code><code>h1</code><code>&gt;</code>

<code>&lt;/</code><code>div</code><code>&gt;</code>

<code>2. 然後再對應的js中import導入該html檔案，</code>

<code>import tpl from '../layer.html';</code>

<code>function layer() {</code>

<code>    </code><code>return {</code>

<code>        </code><code>name:'layer',</code>

<code>        </code><code>tpl:tpl</code>

<code>    </code><code>};</code>

<code>}</code>

<code>export </code><code>default</code> <code>layer;</code>

3. 然後去App.js中導入該js檔案，

4. 最後在App.js中渲染到index.html中

<code>import Layer from </code><code>'./layer.js'</code><code>;</code>

<code>const App = </code><code>function</code> <code>() {</code>

<code>    </code><code>var</code> <code>dom = document.getElementById(</code><code>'app'</code><code>);</code>

<code>    </code><code>var</code> <code>Layer = </code><code>new</code> <code>Layer();</code>

<code>    </code><code>dom.innerHTML = Layer.tpl;</code>

<code>};</code>

<code>new</code> <code>App();</code>

有關html-loader的具體代碼，參見官網templating……

對于複雜的模闆引擎，安裝ejs-loader

字尾格式可以是.tpl/.ejs

當引入tpl的模闆檔案的時候，傳回的不是一個字元串，是一個function

webpack配置：

<code>{</code>

<code>    </code><code>test:/\.ejs$/,</code>

<code>    </code><code>loader:</code><code>'ejs-loader'</code>

<code> </code><code>},</code>

app.js

<code>import Layer from </code><code>'./src/js/layer.js'</code><code>;</code>

<code>    </code><code>var</code> <code>layer = </code><code>new</code> <code>Layer();</code>

<code>    </code><code>dom.innerHTML = layer.tpl({</code>

<code>        </code><code>name:</code><code>'John'</code><code>,</code>

<code>        </code><code>arr:[</code><code>"1111"</code><code>,</code><code>"2222"</code><code>,</code><code>"3333"</code><code>]</code>

<code>    </code><code>});</code>

layer.tpl

<code>&lt;</code><code>div</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>div</code><code>&gt;this is &lt;%= name %&gt; layer&lt;/</code><code>div</code><code>&gt;</code>

<code>    </code><code>&lt;% for (var i = 0;i &lt; arr.length; i++) { %&gt;</code>

<code>        </code><code>&lt;%= arr[i] %&gt;</code>

<code>    </code><code>&lt;% } %&gt;</code>

[webpack 3.0 報錯]bundle.js:84 Uncaught TypeError: Cannot set property 'innerHTML' of null

處理圖檔及其他檔案的loader

file-loader

安裝loader

<code>npm </code><code>install</code> <code>file</code><code>-loader --save-dev</code>

webpack配置

<code>     </code><code>test:/\.(png|jpg|gif|svg)$/,</code>

<code>     </code><code>loader:</code><code>'file-loader'</code>

無論是在根目錄下的Index.html中直接引用（絕對路徑沒有問題，相對問題可以被解析），還是css中背景圖檔引用，亦或者是在模版檔案中引用，在file-loader的作用下，都成功被解析。在模版引擎檔案中，src可以以require(“相對路徑”) 的形式 引入，就可以成功引入，但是直接引用相對位址就不可以解析。

url-loader:

當圖檔小于指定大小的時候，使用url-loader，當大于指定大小的時候，自動轉換為file-loader

<code>   </code><code>test:/\.(png|jpg|gif|svg)$/,</code>

<code>   </code><code>loader:</code><code>'url-loader'</code><code>,</code>

<code>   </code><code>query:{</code>

<code>         </code><code>limit:20000, </code><code>//指定大小 ，機關kb</code>

<code>   </code><code>name:</code><code>"src/[name]-[hash:5].[ext]"</code>

<code>  </code><code>}</code>

image-webpack  loader

圖檔壓縮loader

本文轉自 蓓蕾心晴 51CTO部落格，原文連結：http://blog.51cto.com/beileixinqing/1942489，如需轉載請自行聯系原作者