webpack學習簡單總結

webpack使用總結：

入門使用：

 

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

執行成功如圖：

 

chunk指相應的區塊。

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

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

並且style-loader要寫在css-loader的前面，不然報以下錯誤。

 

 

執行成功以後，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是同樣的。

 

--progress  查看打包過程

--display-modules 查看打包的模塊

--colors  打包後的命令加顏色區分

--display-reasons 顯示打包緣由

--watch 自動監聽文件改變，若改動，自動打包，可是修改webpack配置需從新手動編譯。

webpack 配置文件

報錯：

 

output輸出的路徑寫成這樣：

 

而不是這樣：

 

webpack打包完成以後，顯示打包成功，可是並無生產打包的文件和文件夾，因此這裏在path中切記首先要寫__dirname+「路徑」

如圖：

 

我的理解：若是寫成 __dirname+」/path」,則說明如今尚未要放入的js的文件夾，這樣會自動建立，不然即便執行成功，可是會看不到打包後的js文件，若是已經提早建立好要打包的js的存放文件夾，則不須要寫__dirname. 【常見問題】

 

若是更改了入口文件的數量，好比變成數組形式，或者對象形式，則須要從新手動運行npm run webpack。

數組：用數組形式寫多個入口文件，則會合併成指定的一個打包以後的文件

對象：分別打包成多個文件

注意：一個chunk表明一個區塊，則不一樣的chunk會打包成不一樣的文件，若是output寫死成一個路徑，則打包以後第二個區塊會覆蓋第一個區塊，解決辦法，chunkname+hash做爲佔位，則有幾個區塊就打包成幾個區塊 filename: "[name]-[hash].js"

 

報錯緣由：入口文件的路徑寫成了單引號套雙引號，因此不識別。

 

hash值能夠理解爲版本號，只有文件發生改變時，hash值纔會變化。

hash值對靜態資源的版本管理頗有用。

webpack插件

npm安裝該插件

npm install 插件名 --save-dev

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

安裝

npm install html-webpack-plugin --save-dev

使用：

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

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

而後只須要在webpack配置中modules增長屬性plugins，用來初始化插件。

寫法以下：

plugins: [

new htmlWebpackPlugin() //初始化插件實例

]

若是要把本身的html頁面打包到對應的打包文件夾下：則給該插件映射一個模版：

plugins: [

new htmlWebpackPlugin({

template:」index.html」

})

]

若是html頁面想要輸出到打包文件夾最外層目錄，而後js等文件要輸出到js對應的文件夾下，則output輸出的時候把js路徑單獨配置到對應的目錄下的filename就能夠。

代碼如圖：

output: {

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

        path: __dirname+"/dist"

},

輸出的文件結構如圖：

 

插件的屬性：

plugins: [

        new htmlWebpackPlugin({

            filename:"index-[hash].html",

            template:'index.html',

            inject:"head",

            title:"我是title",

            date:new Date(),

        })

]

經過在plugins中定義的屬性和值，能夠在頁面中用<%=  %>模版引擎的方式展示出來。

eg:

<%= htmlWebpackPlugin.options.title %>

而且能夠取到值以後進行for循環

<% for (var key in htmlWebpackPlugin.files){ %>

<%= key %> : <%= JSON.stringify(htmlWebpackPlugin.files[key]) %>

<% } %>

經過遍歷files和options能夠看到插件對應的都有哪些屬性，這樣頁面中若是有多個js,一些想放到頭部，一些像放到body中，就能夠直接在頁面中以模板引擎的方式引入js了。

eg: <script type=」text/javascript src=」<%= htmlWebPackPlugin.files.chunks.main.entry %>」>

[此時inject要記得設爲false]

minify：壓縮 【具體可參照官網 www.npmjs.com  中的htmp-webpack-plugin】

多頁面配置：chunk:[]

plugin是一個數組，若是要打包成多個頁面，只需寫多個建立插件對象的實例，給每一個實例裏寫chunk屬性，該屬性是一個數組，每一個數組裏對應的js的名稱。

excludeChunks:[]    除一些之外

 

處理模板文件的loader

安裝loader方法:

npm  install  xxx-loader  --save-dev

首先安裝html-loader:

npm  install  html-loader  --save-dev

在webopack.config.js中配置該loader

1. 首先寫好本身的html代碼，

<div style="width:100%;height:100%">

    <h1>模板文件處理 測試</h1>

</div>

1. 而後再對應的js中import導入該html文件，

import tpl from '../layer.html';

function layer() {

    return {

        name:'layer',

        tpl:tpl

    };

}

export default layer;

1. 而後去App.js中導入該js文件，
2. 最後在App.js中渲染到index.html中

import Layer from './layer.js';

const App = function () {

    var dom = document.getElementById('app');

    var Layer = new Layer();

    dom.innerHTML = Layer.tpl;

};

new App();

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

 

對於複雜的模板引擎，安裝ejs-loader

後綴格式能夠是.tpl/.ejs

當引入tpl的模板文件的時候，返回的不是一個字符串，是一個function

webpack配置：

{

    test:/\.ejs$/,

    loader:'ejs-loader'

 },

 

app.js

import Layer from './src/js/layer.js';

const App = function () {

    var dom = document.getElementById('app');

    var layer = new Layer();

    dom.innerHTML = layer.tpl({

        name:'John',

        arr:["1111","2222","3333"]

    });

};

new App();

layer.tpl

<div class="layer">

    <div>this is <%= name %> layer</div>

    <% for (var i = 0;i < arr.length; i++) { %>

        <%= arr[i] %>

    <% } %>

</div>

 

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

 

處理圖片及其餘文件的loader

file-loader

安裝loader

npm install file-loader --save-dev

webpack配置

{

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

     loader:'file-loader'

 },

 

不管是在根目錄下的Index.html中直接引用（絕對路徑沒有問題，相對問題能夠被解析），仍是css中背景圖片引用，亦或者是在模版文件中引用，在file-loader的做用下，都成功被解析。在模版引擎文件中，src能夠以require(「相對路徑」) 的形式 引入，就能夠成功引入，可是直接引用相對地址就不能夠解析。

url-loader:

當圖片小於指定大小的時候，使用url-loader，當大於指定大小的時候，自動轉換爲file-loader

{

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

   loader:'url-loader',

   query:{

         limit:20000, //指定大小 ，單位kb

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

  }

 },

 

image-webpack  loader

圖片壓縮loader