學習筆記一步步瞭解webpack

時間 2019-11-13

標籤學習筆記步步瞭解 webpack 简体版

原文原文鏈接

前言

demo 地址: https://github.com/yy8597/webpack-demosjavascript

以前學習了 broswerify，發現確實很好用。雖然沒有 grunt 那樣豐富的配置和插件，但就是以爲「恩！這就是我想要的結構」。
webpack 感受就是 broswerify 的進階版，怎麼說呢：css

有更多可配置內容
比起 broswerify 一股腦得打成單包更智能。

官方介紹html

安裝

npm install webpack -g

-g 方便咱們在命令行直接使用 webpackjava

使用

基本命令 demo1

首先創建兩個文件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>

執行 webpackgit

$ webpack ./entry.js bundle.js

生成 bundle.js，而後打開 index.html 就能夠看到github

It works.

添加依賴 demo2

增長一個文件web

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

咱們修改 entry.js 加載 content.js 的內容npm

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

一樣執行瀏覽器

$ webpack ./entry.js bundle.js

在瀏覽器中看到

It works from content.js.

done~

webpack 分析你的入口文件(entry.js)所依賴的其餘文件（模塊），這些文件都會被打包到 bundle.js中。webpack 會分配給每一個模塊一個惟一的 Id，在 bundle.js 中經過這個 Id 來訪問每一個模塊。在程序啓動的時候只會處理入口模塊（entry.js）, require 方法會在執行時即時地處理依賴模塊。

打包 css demo3

webpack 只能處理 javascript，要處理 css 就須要安裝css-load來轉換 css 爲 js，還要安裝style-loader 將轉換後的 css 加載到 dom 中。

WHAT ARE LOADERS?

$npm install css-loader style-loader --save

接着增長 css 文件

body {
    background: yellow;
}

修改 entry.js，而後就能看到效果

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

一樣執行

$ webpack ./entry.js bundle.js

It works from content.js.

經過「!style!css!」這樣的前綴，能夠把文件進行一系列的轉化，最終變成 javascript 的一個模塊。

命令行綁定 loaders

若是咱們不想寫過長的 require : require("!style!css!./style.css");，簡化爲require("./style.css")
或者咱們喜歡靈活定製 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 裏面少了個反斜槓，緣由是歎號在 bash 裏有特殊意義

It works from content.js.

添加 webpack.config.js demo4

理解了上面的 demo 之後，接下來咱們就能夠在項目根目錄下新建一個webpack.config.js ，而後經過一句命令$ webpack就能打包咱們的項目。

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

webpack 命令會嘗試讀取同目錄中的 webpack.config.js 文件。

And More

還能夠經過一些參數使得打包過程可視化

$ webpack --progress --colors

--progress 打印打包日誌
--colors -c 帶顏色的日誌（官方是這麼描述的，但我沒看到顏色...）

固然還有 watch 功能

$ webpack --progress --colors --watch

必須的要有 server

$ npm install webpack-dev-server -g
$ webpack-dev-server --progress --colors

~ 完 ~

這裏只是介紹了 webpack 基本的用法
demo 基本都是翻譯自webpack/getting-started
更多詳細和進階的內容仍是推薦去官網看看

參考

相關標籤/搜索

每日一句

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

學習筆記 一步步瞭解webpack

前言

安裝

使用

基本命令 demo1

添加依賴 demo2

打包 css demo3

命令行綁定 loaders

添加 webpack.config.js demo4

And More

~ 完 ~

參考

學習筆記一步步瞭解webpack