webpack初識！

時間 2019-11-12

標籤 webpack 简体版

原文原文鏈接

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

歡迎使用webpack

這個小教程經過簡單的例子來引導你們使用webpackcss

經過這些這篇文章你能夠學到html

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

安裝webpack　

你的電腦上須要先安裝node.jsjava

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

編碼

在一個空的文件夾裏建立一個文件
添加 entry.jswebpack

document.write("It works.");

添加 index.htmlgit

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

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

$ webpack ./entry.js bundle.jsweb

運行上面命令將會把entry.js編譯爲bundle.js,若是編譯成功就會有下面的提示npm

在瀏覽器裏打開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" }
        ]
    }
};

如今咱們只須要在終端執行