webpack初識！

本文轉載自查看原文 2016-03-04 10:33 1694 webpack/ 翻譯/ javascript

最近在使用webpack 感覺棒棒噠下面這個簡單的教程可以讓你走入webpack的世界

歡迎使用webpack

這個小教程通過簡單的例子來引導大家使用webpack

通過這些這篇文章你可以學到

如何安裝webpack
如何使用webpack
如何使用加載器
如何使用開發服務器

安裝webpack

你的電腦上需要先安裝node.js

$ npm install webpack -g
這樣就可以使用webpack命令

編碼

在一個空的文件夾里創建一個文件
添加 entry.js

document.write("It works.");

添加 index.html

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

在當前文件夾下輸入下面命令

$ webpack ./entry.js bundle.js

運行上面命令將會把entry.js編譯為bundle.js,如果編譯成功就會有下面的提示

在瀏覽器里打開index.html

第二個文件

接下來我們把一些代碼移到另一個文件
添加 content.js

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

修改 entry.js

-  document.write("It works");
+  document.write( require("./content.js));

然后繼續編譯

$ webpack ./entry.js bundle.js

刷新瀏覽器

> *webpack 會分析你的entry文件所依賴的其他文件，這些文件(也叫模塊)也會被包含在你的bundle.js中，webpack會給每個模塊一個唯一的id並且通過這些id很容易的保存所有模塊到bundle.js。在啟動時只有入口模塊被調用執行，一個簡單的運行提供了所需的功能並且在需要其他模塊時執行依賴*

第一個加載器

我們希望在我們的應用里添加css文件
WebPack只能處理JavaScript本身，所以我們需要CSS加載器來處理CSS文件。我們還需要的樣式裝載在CSS文件應用的樣式。
在控制台之行

npm install css-loader style-loader

來安裝加載器（需要本地安裝所以不需要-g 在項目文件夾里安裝）安裝后會在項目文件里創建一個node-modules 文件夾

接下來我們創建一個　style.css

body{background:＃ff0000;}

修改 entry.js

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

繼續執行上面那句編譯命令再刷新瀏覽器

通過前綴加載器這個模塊兒以某種渠道被加載這些加載器通過特殊的方式轉換文件內容轉換后成為javascript模塊

捆綁加載器

我們不希望寫require("!style!css!./style.css");這么長么長的require
那么我們可以為加載器綁定文件擴展名之后我們就可以直接寫require("./style.css")這樣

修改entry.js

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

編譯

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

有些環境可能要在"css=style!css" 加雙引號

配置文件

我們希望把所有的配置都放在一個配置文件里面

添加webpack.config.js文件

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

現在我們只需要在終端執行