webpack入門

本來是想看看vue的入門唆垃，結果發(fā)現(xiàn)vue依賴于webpack，所以只好先來安裝webpack鳍咱，簡單了解一下降盹，emmmm，然后谤辜，在安裝webpack的時候又發(fā)現(xiàn)需要安裝node.js蓄坏，需要用到npm，emmmm然后又安裝了node丑念。涡戳。。脯倚。艱辛的前奏貌似才結束（因為還不知道后邊又會需要安裝什么玩意渔彰。。推正。噗）

安裝node.js

網(wǎng)址：https://nodejs.org/en/

1恍涂、下載并安裝（安裝基本就是一直下一步下一步（next）就好，好像也就改了存儲地址植榕，再也沒改啥再沧，如遇到有更多問題，emmmm尊残，動動大手找找度娘炒瘸。）

image.png

2、檢查

在鍵盤按下【win+R】鍵寝衫，輸入cmd顷扩，然后回車，打開cmd窗口

image

輸入 node -v 顯示node.js的版本說明已經(jīng)安裝成功
輸入 npm -v 顯示npm版本說明npm也已經(jīng)安裝成功

說明一下：npm不需要專門安裝慰毅，Node.js自帶npm隘截，安裝Node.js時會一起安裝，npm的作用就是對Node.js依賴的包進行管理汹胃，也可以理解為用來安裝/卸載Node.js需要裝的東西

（如安裝出現(xiàn)問題婶芭，具體問題具體百度，或者重新安裝统台，我自己安裝的時候npm安裝不合適雕擂，重裝node后合適了啡邑。）

安裝完成后的目錄如下：

image.png

關于配置環(huán)境變量贱勃，emmm，新版本都不需要設計環(huán)境變量了，軟件會自動寫入環(huán)境變量贵扰。舊版本配置的話自行百度吧仇穗。。戚绕。emmm和java的環(huán)境變量配置雷同

3纹坐、測試，安裝模塊

配置完后舞丛，打開cmd窗口耘子，輸入命令進行模塊的全局安裝：
比如：我們就安裝最常用express模塊，命令如下：
npm install express -g
-g是全局安裝的意思
(就不上圖了球切，因為忘了截圖2333333)

嗯谷誓，沒錯，到這里吨凑。捍歪。。我們的node安裝才差不多結束鸵钝，如果有小伙伴安裝途中遇到什么亂七八糟的問題糙臼，動動大手找找度娘。恩商。

安裝webpack

安裝完node安裝webpack就很簡單了
依舊【win+R】輸入cmd打開命令行变逃，現(xiàn)在我們已經(jīng)有了npm，所以我們就輸入npm install webpack -g 來安裝webpack

webpack安裝.png

emmm痕届，出來兩個WARN韧献，不曉得什么原因，不過百度過之后說WARN 不影響使用研叫，所以暫時就先不管這兩個警告锤窑，后邊出現(xiàn)問題在解決吧。
安裝好webpack之后我們可以輸入命令webpack -h看看是否安裝成功嚷炉，出現(xiàn)結果如下：

webpack命令.png

由于 npm 網(wǎng)址在國外渊啰，安裝速度慢，我們可以使用淘寶的鏡像及其命令 cnpm
輸入命令npm install cnpm -g 安裝淘寶鏡像
再使用 cnpm 安裝 webpack：
使用命令cnpm install webpack -g安裝申屹，其實也就是把剛才npm安裝的webpack轉移到cnpm的目錄下

創(chuàng)建項目

接下來我們簡單創(chuàng)建一個目錄 app試用一下webpack：
mkdir app
在 app 目錄下添加 runoob1.js 文件绘证，代碼如下：
document.write("It works.");
在 app 目錄下添加 index.html 文件，代碼如下：

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

接下來我們使用 webpack 命令來打包：
webpack runoob1.js bundle.js
執(zhí)行以上命令會編譯 runoob1.js 文件并生成bundle.js 文件哗讥，成功后輸出信息如下所示：

Version: webpack 3.10.0
Time: 140ms
    Asset    Size  Chunks             Chunk Names
bundle.js  2.5 kB       0  [emitted]  main
   [0] ./runoob1.js 28 bytes {0} [built]

瀏覽器輸出

創(chuàng)建第二個 JS 文件

接下來我們創(chuàng)建另外一個 js 文件 runoob2.js嚷那，代碼如下所示：
module.exports = "It works from runoob2.js.";
更新 runoob1.js 文件，代碼如下：
document.write(require("./runoob2.js"));
接下來我們使用 webpack 命令來打包：
webpack runoob1.js bundle.js
顯示如下

網(wǎng)頁顯示：

警告８松贰Ｎ嚎怼８骸：小伙伴敲代碼的時候細心點，队询，派桩，千萬別出錯了，自己由于粗心路徑整錯了蚌斩，找了好久好久找不到铆惑，求助學長，學長一語點破送膳。员魏。。

webpack 根據(jù)模塊的依賴關系進行靜態(tài)分析叠聋，這些文件(模塊)會被包含到 bundle.js 文件中逆趋。Webpack 會給每個模塊分配一個唯一的 id 并通過這個 id 索引和訪問模塊。在頁面啟動時晒奕，會先執(zhí)行 runoob1.js 中的代碼闻书，其它模塊會在運行 require 的時候再執(zhí)行。

Webpack 本身只能處理 JavaScript 模塊脑慧，如果要處理其他類型的文件魄眉，就需要使用 loader 進行轉換。
所以如果我們需要在應用中添加 css 文件闷袒，就需要使用到 css-loader 和 style-loader坑律，他們做兩件不同的事情，css-loader 會遍歷 CSS 文件囊骤，然后找到 url() 表達式然后處理他們晃择，style-loader 會把原來的 CSS 代碼插入頁面中的一個 style 標簽中。
接下來我們使用以下命令來安裝 css-loader 和 style-loader也物。
cnpm install css-loader style-loader -g
執(zhí)行以上命令后宫屠，會再當前目錄生成 node_modules 目錄，它就是 css-loader 和 style-loader 的安裝目錄滑蚯。
接下來創(chuàng)建一個 style.css 文件浪蹂，代碼如下：

body {
    background: yellow;
}

修改 runoob1.js 文件，代碼如下：

require("!style-loader!css-loader!./style.css");
document.write(require("./runoob2.js"));

接下來我們使用 webpack 命令來打包：

在瀏覽器訪問如下

配置文件

我們可以將一些編譯選項放在配置文件中告材，以便于統(tǒng)一管理：
創(chuàng)建 webpack.config.js 文件坤次，代碼如下所示：

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

接下來我們只需要執(zhí)行 webpack 命令即可生成 bundle.js 文件：

webpack 命令執(zhí)行后，會默認載入當前目錄的 webpack.config.js 文件斥赋。

插件

插件在 webpack 的配置信息 plugins 選項中指定缰猴，用于完成一些 loader 不能完成的工。
webpack 自帶一些插件疤剑，你可以通過 cnpm 安裝一些插件滑绒。
使用內置插件需要通過以下命令來安裝：
cnpm install webpack --save-dev

比如我們可以安裝內置的 BannerPlugin 插件胰舆，用于在文件頭部輸出一些注釋信息。
修改 webpack.config.js蹬挤，代碼如下：

var webpack=require('webpack');

module.exports = {
   entry: "./runoob1.js",
   output: {
       path: __dirname,
       filename: "bundle.js"
   },
   module: {
       loaders: [
           { test: /\.css$/, loader: "style-loader!css-loader" }
       ]
   },
   plugins:[
   new webpack.BannerPlugin('菜鳥教程 webpack 實例')
   ]
};

然后運行:
webpack

打開 bundle.js鹃共，可以看到文件頭部出現(xiàn)了我們指定的注釋信息玉雾。

開發(fā)環(huán)境

當項目逐漸變大巷疼，webpack 的編譯時間會變長胰蝠，可以通過參數(shù)讓編譯的輸出內容帶有進度和顏色狭握。
webpack --progress --colors
如果不想每次修改模塊后都重新編譯这刷，那么可以啟動監(jiān)聽模式胚想。開啟監(jiān)聽模式后于微，沒有變化的模塊會在編譯后緩存到內存中蹋嵌，而不會每次都被重新編譯育瓜，所以監(jiān)聽模式的整體速度是很快的。
webpack --progress --colors --watch

當然栽烂，我們可以使用 webpack-dev-server開發(fā)服務躏仇，這樣我們就能通過 localhost:8080 啟動一個 express 靜態(tài)資源 web 服務器，并且會以監(jiān)聽模式自動運行 webpack腺办，在瀏覽器打開 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以瀏覽項目中的頁面和編譯后的資源輸出焰手，并且通過一個 socket.io 服務實時監(jiān)聽它們的變化并自動刷新頁面。

安裝 cnpm install webpack-dev-server -g

運行 webpack-dev-server --progress --colors

在瀏覽器打開 http://localhost:8080/ 輸出結果如下：
（emmmm 菜鳥教程輸出如下我的出現(xiàn)問題解決了再來更新）