Webpack學習筆記二

專案結構：

總所周知，css的規則都是全域性的，任何乙個元件的樣式規則，都對整個頁面有效。產生區域性作用域的唯一方法，就是使用乙個獨一無二的class名字，不會與其他選擇器重名。這個就是css module的做法。

接下來，我們來看看webpack中是怎麼實現的：

var react = require('react');
var reactdom = require('react-dom');
reactdom.render(  ,
document.getelementbyid('example')
);

.h1
:global(.h2)

構建工具會將類名style.h1編譯成乙個雜湊字串，like this:

._1yzb3q5xe45rpofl-yjao3
:global(.h2)

這樣一來，這個類名就獨一無二了，只對example元件有效了，這裡就形成了css區域性作用域。

我們來看看webpack.config.js中的**：

module.exports =
,  module:}}
,,}]
}]}}
;

在上述**中，能夠實現css區域性作用域最關鍵的就是loader: 『style-loader』,它有個配置選項modules:true，表示開啟css modules功能。

專案結構:

webpack允許你使用外掛程式來擴充套件它的功能，這裡的uglifyjs plugin外掛程式就是用來壓縮js**。同樣的，這裡引入的無論是loader還是外掛程式，都需要事先安裝依賴。這裡我們使用的是uglifyjs-webpack-plugin外掛程式。我們來看看webpack.config.js**：

var webpack =
require
('webpack');
var uglifyjsplugin =
require
('uglifyjs-webpack-plugin');
module.exports =
,  plugins:
[new
uglifyjsplugin()]};

凡是需要使用外掛程式，都必須在plugins這個陣列中進行配置，它就是乙個外掛程式列表，陣列中每乙個值就對應乙個外掛程式，在這裡配置好之後，我們打包後的js**就被壓縮了，like this：

!
function
(r)}
;return r[n]
.call
(o.exports,o,o.exports,e)
,o.l=!0
,o.exports}
var t=
;e.m=r,e.c=t,e.d=
function
(r,t,n))}
,e.n
=function
(r):
function()
;return e.
d(t,
"a",t)
,t},e.o=
function
(r,e)
,e.p="",
e(e.s=0)
}([function
(r,e)])
;

專案結構:

我們直接來看看webpack.config.js裡的東西：

這裡引入了html webpack plugin和open browser webpack plugin這兩個外掛程式，html webpack plugin的作用就是幫你書寫index.html檔案，而open browser webpack plugin的作用是用來執行webpack打包後幫你開啟瀏覽器。

plugins外掛程式列表中，外掛程式的配置需要寫在外掛程式的括號內，是乙個配置物件。具體外掛程式的配置物件，可以查詢webpack官網的配置。

在開發中，我們通常會設定一些環境變數供專案使用，但是不同的環境(開發環境、測試環境、生產環境)下，總會有一些不同配置，如果將這些環境所需的配置全部寫在**裡面顯然是不合適的。通常情況下，我們都會有乙個配置檔案，根據不同的環境配置不同的變數，然後當專案啟動時去讀取改檔案。

defineplugin允許我們建立乙個在編譯時可以配置全域性常量：

// webpack.config.js
var webpack =
require
('webpack');
var devflagplugin =
newwebpack.defineplugin()
;module.exports =
,  plugins:
[devflagplugin]
};

這裡配置乙個全域性常量 __ dev __,可以在js檔案中引入這個全域性常量並作一些操作：

// main.js
document.
write(''
);if(__dev__)

給配置的變數賦值:

在一些大型的web專案中，如果將所有的**都打包壓縮到乙個檔案，這顯然是不科學的，這樣對介面渲染、首屏載入時間來說都是很不友好的。webpack允許我們將**分割成多個部分，還可以實現按需載入：

// a.js
module.exports =
'hello world'
;// main.js
require.
ensure([
'./a'],
function
(require)
);

require.ensure方法告訴webpack，a.js應該被分開打包成乙個單獨的檔案。這時，我們就實現了**分割和按需載入了。

Webpack學習筆記二

webpack 完整入門學習筆記（二）

Webpack學習筆記

webpack 學習筆記

Webpack學習筆記 二

webpack 完整入門學習筆記（二）

Webpack學習筆記

webpack 學習筆記

相關推薦

Webpack學習筆記二