webpack 學習筆記 02 快速入門

時間 2019-11-29

標籤 webpack 學習筆記快速入門简体版

原文原文鏈接

webpack 的目標

將依賴項分塊，按需加載。
減小web app的初始加載時間。
使每個靜態集合都可以做爲組件使用。
有能力集成第三方庫，做爲組件使用。
高度可配置化。
適用於大型項目。

INSTALLING WEBPACK

在已安裝node.js的狀況下，輸入如下命令行：javascript

npm install webpack -g

SETUP THE COMPILATION

建立一個空的文件夾，分別建立如下文件：css

entry.js
index.htmlhtml

js中寫入以下內容：java

document.write("webpack works.");

html內容以下：node

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

在控制檯中，咱們運行以下指令：webpack

webpack ./entry.js bundle.js

webpack將會編譯，生成捆綁文件。結果以下：
程序員

MUTI FILE

讓咱們再增長一個js，如下是文件名與內容web

content.js
module.exports = "It works from content.js.";npm

很是典型的CommonJs式的代碼，對吧。
修改entry.js的內容app

去掉 document.write("It works.");
增長 document.write(require("./content.js"));

從新運行編譯指令，就能夠在本地訪問index.html看到新的結果了。

THE FIRST LOADER

webpack 除了能夠解決js的依賴外，還能解決css的引用，壓縮的問題。
這時，咱們須要使用loader，使用css-loader來處理css文件，使用style－loader來支持改動樣式。
運行指令

npm install css-loader style-loader

更新entry.js的內容

require("!style!css!./style.css");
document.write(require("./content.js"));

咱們經過!style!css!這樣的形式，來指定Loader的傳輸管道，通過了一系列的loader處理後，結果將會是一個js組件。

編譯

webpack ./entry.js bundle.js

從新瀏覽頁面，就能夠看到這樣的結果。

BINDING LOADERS

經過在命令行中指定須要的loader，咱們能夠避免在剛纔require部分的代碼中，寫出!style!css!

webpack ./entry.js bundle.js --module-bind "css=style!css"

這樣，咱們能夠將entry.js修改，並不影響結果

require("./style.css");
document.write(require("./content.js"));

CONFIG FILE

程序員老是討厭繁瑣的人工操做，咱們能夠將剛纔的--module-bind "css=style!css"轉由配置文件完成。
目錄下添加webpack.config.js

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
};

這時，咱們只須要輸入命令webpack就能夠獲得相同的結果啦。