js學習筆記：webpack基礎入門（一）

時間 2019-11-19

原文原文鏈接

以前據說過webpack，今天想正式的接觸一下，先跟着webpack的官方用戶指南走：

在這裏有：javascript

如何安裝webpack
如何使用webpack
如何使用loader
如何使用webpack的開發者服務器

1、安裝webpack

你須要以前安裝node.jscss

$ npm install webpack -g

安裝成功後，即可以使用webpack命令行了。html

ok，開始工做！

2、新建一個空目錄，名字爲myApp，文件以下

entry.jsjava

document.write("It works.");

index.html文件node

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

此時並無bunble.js文件，咱們經過webpack命令來生成：webpack

$ webpack ./entry.js bundle.js

這句命令會編譯entry.js文件爲新文件bunble.js。若是執行成功的話，會有以下結果：web

Version: webpack 1.12.2
Time: 43ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main
chunk    {0} bundle.js (main) 28 bytes [rendered]
    [0] ./tutorials/getting-started/setup-compilation/entry.js 28 bytes {0} [built]

而後，打開index.html，便會看出輸出到屏幕上的It works.。npm

3、使用模塊的形式，進行簡單的模塊導出與加載

新建文件：content.js瀏覽器

module.exports = "It works from congtent.js";

而後，編輯entry.js文件：服務器

var content = require("./content.js");
document.write(content);

而後，繼續用webpack進行編譯：

$ webpack ./entry.js bundle.js

此時瀏覽器變回輸出It works from congtent.js。

webpack會本身分析你的入口文件是否依賴其餘文件，這些文件（或者模塊）會引入到bundle.js中。webpack會給每一個模塊一個惟一的id，而後會在bundle.js中保存訪問這些模塊的id。剛開始的時候只有入口文件被執行，當碰到require的時候就會加載依賴。

4、使用第一個加載器

在目錄中新建一個css文件，webpack本身只能處理js文件，須要css－loader來處理css文件，同時也須要style－loader去讀取css文件中的樣式。
安裝這些加載器：

npm install css-loader style-loader

安裝完成後，會在目錄下多了一個node_modules文件夾，這些加載器就被下載到這裏面。

新建style.css文件：

body {
    background: yellow;
}

而後編輯入口文件：entry.js

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

此時，從新編譯文件，刷新瀏覽器，會發現背景色變成黃色了。

$ webpack ./entry.js bundle.js

在引入css的時候，咱們寫了!style!css!，其實也能夠不用寫，能夠將加載器綁定在webpack的命令中：

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

而後，執行命令的時候把加載器一塊兒輸入：

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

而後刷新瀏覽器，會發現結果是同樣的。

5、利用配置文件

經過以上的方式，咱們每次添加文件，都要寫一個規則，而後在編譯執行，確實很麻煩，webpack能夠經過配置文件來簡化這些事情：

新建webpack.config.js文件，並利用以下規則

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

而後執行命令的時候只須要一個webpack便可：