webpack初探

時間 2020-01-10

標籤 webpack 初探简体版

原文原文鏈接

原文英文版來自webpack官網
 demo代碼
 本文地址javascript

歡迎瀏覽

這是一篇經過一個小例子給你介紹webpack的文章
你能夠經過這篇文章瞭解到：css

如何安裝webpackhtml
如何使用webpackjava
如何使用裝載器(loaders)node
如何使用開發服務器(development server)webpack

安裝webpack

你須要先安裝node.js。
$ npm install webpack -ggit

上面這句命令成功後，webpack命令行就可使用了。github

(若是你運行這句命令出錯，能夠試試$ cnpm install webpack -g。cnpm須要安裝) web

設置，編譯

建立一個空文件夾。
在文件夾裏先建立兩個文件entry.js，index.html
npm

entry.js

document.write('webpack正常運行');

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
這句命令行將會編譯你的js文件entry.js，而且會建立一個新的js文件bundle.js。
若是編譯成功，將會出現以下提示：

用瀏覽器打開index.html，你能看到webpack正常運行

兩個js文件

下一步，咱們在新的js文件裏添加一些代碼。

content.js

module.exports = "content.js.正常工做";

修改entry.js

// document.write("webpack正常運行");
 document.write(require("./content.js"));

再用下面的命令行編譯一下
$ webpack ./entry.js bundle.js

刷新你的瀏覽器，你能夠看到文字content.js.正常工做

webpack將會分析你的入口文件(entry.js)與其餘js文件的依賴關係。這些js文件（也能夠成爲模塊）也會被打包進bundle.js文件。webpack將會給每個模塊一個惟一的ID，保存到bundle.js文件，經過惟一ID能夠訪問到。只要入口模塊會在執行時被調用。（入口模塊再提到用其它他所依賴的模塊）。執行時，只提供必需的方法模塊，必要時才執行依賴，調用依賴模塊。（恕我語言表達能力有點爛，有疑惑的朋友請移步看我另外一篇文章webpack把你的項目編譯成了什麼）

第一個加載器(loader)

咱們想在應用里加一個css文件。
webpack只能處理Javascript，因此咱們須要css加載器(css-loader)去加載css文件。咱們還須要樣式加載器(style-loader)把css文件應用到style標籤內。
運行npm install css-loader style-loader命令安裝這些加載器(loader)。(不須要安裝到全局，因此不要-g參數)。這個命令將會幫你建立一個node_modules文件夾，加載器都在這個文件夾裏。

一樣也可使用cnpm install css-loader style-loader。cnpm須要安裝)

繼續：

建立一個style.css文件

body {
    background: yellow;
}

*修改 entry.js文件

//document.write("webpack正常運行");
  require("!style!css!./style.css");
  document.write(require("./content.js"));

從新編譯，而後刷新瀏覽器，能夠看到頁面的背景色爲黃色。

經過前置加載器去請求模塊，管道機制處理模塊。這些加載器在特定的方式中改變文件內容。這文件被處理後，最後變成一個JavaScript模塊。

綁定加載器

咱們不想去寫很長的加載代碼require("!style!css!./style.css");。
咱們能夠把文件的後綴名綁定到加載器上，而後咱們只須要寫：require("./style.css")。

修改entry.js文件

//document.write("webpack正常運行");
 //require("!style!css!./style.css");
require("./style.css");
 document.write(require("./content.js"));

運行下面的命令進行編譯：
webpack ./entry.js bundle.js --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

去編譯

漂亮的輸出

隨着該項目的增加，編譯可能須要更長的時間。因此咱們要展現一些進度條。咱們還想要的顏色…咱們經過下面命令行能夠作到：

webpack --progress --colors

觀察模式

咱們不想每一次項目變化都要手動編譯……

webpack --progress --colors --watch

webpack能夠緩存兩次編譯之間沒有變化的模塊和輸出文件。

當咱們使用觀察模式進行編譯的時候。若是檢測到任何更改，webpack將再次運行編譯。若是檢測到某個文件沒有改變就啓用高速緩存，直接使那個模塊webpack緩存。

開發服務器

使用開發服務器開發體驗會更好

npm install webpack-dev-server -g

webpack-dev-server --progress --colors

這將在本地啓動一個8080端口的服務，指向靜態文件index.html以及bundle.js(bundle自動編譯)。每當bundle.js從新自動編譯，會自動刷新瀏覽器（經過websocket機制）。打開瀏覽器 http://localhost:8080/webpack-dev-server/bundle

謝謝

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。