學(xué)點(diǎn)Webpack吧

邱勇發(fā)布于2019-08-20 18:53 / 1894人閱讀

摘要：下的包含很多匹配規(guī)則正則表達(dá)式，每一條代表加載什么類型的資源文件，上面寫的就是加載樣式文件，并使用和加載?，F(xiàn)在問題來了，我想喝瓶茅臺(tái)自動(dòng)添加瀏覽器產(chǎn)商前綴。沒問題，強(qiáng)大的生態(tài)圈給你提供了，一個(gè)更高大上的。

開始 webpack 之旅

npm install webpack --save-dev

這里如果沒有指定 -g全局安裝，那么需要調(diào)用 node_modules 下的 webpack.js 來執(zhí)行，因?yàn)榉侨职惭b沒有添加環(huán)境變量

嘗嘗鮮，做點(diǎn) webpack

必須的第一步：編寫 webpack.config.js

// webpack.config.js
module.exports = {
  // 兩個(gè)必須參數(shù)：
  entry: "", // 入口文件，寫路徑即可
  output: {  // 打包后文件，有兩個(gè)參數(shù)：
    filename: "",   // 文件名，"[name]"表示使用原名，"[hash]"使用哈希值
    path: "",       // 文件夾路徑，對(duì)著官方敲,path.resolve(__dirname, "文件夾名"),需先導(dǎo)入
    publicPath: "", // 上線地址，例如 http://ningtaostudy.cn
  },
};

現(xiàn)在碗和米飯有了，怎么端起來吃呢

直接在命令行運(yùn)行 webpack，再加點(diǎn)料：

webpack 
    --display-reasons 
    --progress 
    --colors 
    --display-modules 
    --config # webpack 配置文件名（換個(gè)碗吃飯）

在 npm 腳本里寫指令（偷懶讓別人幫你盛飯），接著命令行里運(yùn)行 npm run webpack：

{
    "scripts": {
        "webpack": "webapck --progress --colors"
    }
}

飯吃到了，沒有菜（webpack 插件）怎么行呢

打包 html 的插件 html-webpack-plugin。慣例第一步 npm install，接著在 webpack.config.js 里配置插件，有了 entry 和 output 出頭鳥，我們知道該寫一個(gè) plugin 了：

// webpack.config.js
const htmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  plugins: [
    new htmlWebpackPlugin({
      filename: "[name]-[hash].html",
      template: "index.html",
      inject: "head",
      kill: "bill",
    }),
  ],
};

讓我們來品品小當(dāng)家的菜：

filename 很好，不就入口文件嗎

template 你不用說，我知道是模板，相對(duì)于配置文件的路徑

inject 我就不遵從開發(fā)最佳實(shí)踐，就要在head里加載js文件，打我呀

kill 殺死比爾，純屬虛構(gòu)。這是自定義的模板，模板里調(diào)用，下面舉個(gè)栗子：



<%= htmlWebpackPlugin.options.kill %><title>

<!-- 轉(zhuǎn)化后 -->
<title>bill

上面代碼一樣一樣的。老夫斗膽說一句，這里模板引擎類似 jsp，但還是 js 語法

去官網(wǎng)看看小當(dāng)家

來瓶酒（loaders）吧，生活美滋滋

loader 用來加載資源文件，諸如圖片、css之類的，這樣我們就可以在 .js 里導(dǎo)入 css，你沒聽錯(cuò)，用起來我也沒有在蒙你

最簡(jiǎn)單常用來加載 css 的兩個(gè) loader:

npm install style-loader css-loader --save-dev
# style-loader 用來插入 style 標(biāo)簽
# css-loader 用來加載 css 代碼，此 loader 居下

話不多說，開車：

// webpack.config.js
module.exports = {
  modules: {
    rules: [
      {
        test: /.css$/,
        use: [
          "style-loader",
          "css-loader",
        ],
      },
    ],
  },
};

看起來嵌套挺多的哈，不過很簡(jiǎn)單。modules 下的 rules 包含很多匹配規(guī)則（正則表達(dá)式），每一條代表加載什么類型的資源文件，上面寫的就是加載 .css 樣式文件，并使用 style-loader 和 css-loader 加載。

現(xiàn)在問題來了，我想喝瓶茅臺(tái)（自動(dòng)添加瀏覽器產(chǎn)商前綴）。沒問題，強(qiáng)大的 webpack 生態(tài)圈給你提供了 postcss-loader，一個(gè)更高大上的 loader。這個(gè)時(shí)候我們都知道只需要改一下 use 數(shù)組：

[
  "style-loader",
  {
    loader: "css-loader",
    options: {
      importLoaders: 1
    },
  },
  "postcss-loader"
]

數(shù)組的項(xiàng)可以是對(duì)象，這樣我們的 loader 就能帶 options 里的參數(shù)，等同于：

use: "style-loader!css-loader?importLoaders=1!postcss-loader"

至于為什么要帶這樣的參數(shù)，這是因?yàn)橐粋€(gè) @import 引發(fā)的血案

webpack-dev-server 大廚來也

我是誰，我從哪里來，我又該到哪里去

日益繁重的前端工作下，沒有人能阻擋我們偷懶的步伐。。webpack 只是一個(gè)打包工具，即使我們能帶 --watch 自動(dòng)編譯，但瀏覽器還得手動(dòng)刷新（心中一個(gè)臥槽，尼瑪還有這種操作，曾經(jīng)學(xué)習(xí)的一年里自己起碼動(dòng)手刷新瀏覽器點(diǎn)了 10000 次，忍不住吐槽瀏覽器刷新按鈕就不能做一個(gè)浮動(dòng)的嗎，還得移動(dòng)大半個(gè)屏幕，我鼠標(biāo)少說走了 1000m 了）。很好，在靈長(zhǎng)類動(dòng)物面前都不是問題：

npm install webpack-dev-server -D # 這個(gè)不是重點(diǎn)，縮寫而已

接下來配置 webpack，其實(shí)官網(wǎng)很詳細(xì)了，還帶中文的，比個(gè)贊

// webpack.config.js
module.exports = {
  devServer: {
    contentBase: "./dist", // 根目錄，就像 apache 的 www 文件夾
  },
};

然后呢臥槽？沒錯(cuò)，好了，輸入吧腫瘤君：

webpack-dev-server --open

偷懶神（package.json）在此：

{
    "scripts": {
        "start": "webpack-dev-server --open --color"
    }
}

再運(yùn)行 npm start，這次連 run 都省了，，，

好了，以上就是初步了解 webpack 了，再總結(jié)一下吧

配置項(xiàng)一覽：

// webpack.config.js
module.exports = {
  entry: "",
  output: {},
  module: {
    rules: [],
  },
  plugins: [],
  devServer: {},
  devtool: "inline-source-map", // 開發(fā)環(huán)境下調(diào)試專用，快速定位錯(cuò)誤文件位置
};

常用 loader：

加載 html：html-webpack-plugin、html-loader

加載 css：style-loader、css-loader、sass/less-loader

加載 es6：babel-loader

加載圖片、json 等文件：file-loader、url-loader（轉(zhuǎn)base64）、image-loader（壓縮）、json-loader

上面的這些 loader 都可以去 npmjs 官網(wǎng) 上查看詳細(xì)的配置

-loader 在 webpack 2+ 不能省略；html 插件和 loader（加載模板）不能混著用

云服務(wù)器 GPU云服務(wù)器學(xué)點(diǎn) javascript教學(xué)點(diǎn) 每周學(xué)點(diǎn)大數(shù)據(jù) webpack

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84840.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

邱勇

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

centos7安裝tensorflow

閱讀 1358·2023-04-26 01:28
#11.11#OuLuCloud：全場(chǎng)云服務(wù)器8折優(yōu)惠，充值300送88，高防云服務(wù)器上新！

閱讀 2100·2021-11-08 13:28
FairyHosting：€9.9/月/1核/4GB內(nèi)存/50GB SSD空間/不限流量/1Gbps

閱讀 2352·2021-10-12 10:17
2021年阿里云服務(wù)器報(bào)價(jià)：企業(yè)級(jí)阿里云服務(wù)器報(bào)價(jià)表

閱讀 2343·2021-09-28 09:46
??整理２萬字帶你走進(jìn)C語言（詳細(xì)講解+代碼演示+圖解）??（強(qiáng)烈建議收藏?。。。?/a>

閱讀 4191·2021-09-09 09:33

接口測(cè)試要測(cè)試什么？

閱讀 3757·2021-09-04 16:40
Web前端基礎(chǔ)知識(shí)整理-CSS篇

閱讀 1200·2019-08-29 15:21
WebAssembly 那些事兒

閱讀 2723·2019-08-26 17:17

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

學(xué)點(diǎn)Webpack吧

相關(guān)文章

**趁著課余時(shí)間學(xué)點(diǎn)Python（十四）文件操作**

**【正經(jīng)的AI on Python入門系列】0.來學(xué)點(diǎn)Python吧！從一個(gè)斗圖小工具開始**

前方來報(bào)，八月最新資訊--關(guān)于vue2&3的最佳文章推薦

寫給在迷茫中前行的前端學(xué)習(xí)/工作者

為vue3學(xué)點(diǎn)typescript, 解讀高級(jí)類型

發(fā)表評(píng)論

0條評(píng)論

邱勇

男|高級(jí)講師

TA的文章

centos7安裝tensorflow

#11.11#OuLuCloud：全場(chǎng)云服務(wù)器8折優(yōu)惠，充值300送88，高防云服務(wù)器上新！

FairyHosting：€9.9/月/1核/4GB內(nèi)存/50GB SSD空間/不限流量/1Gbps

2021年阿里云服務(wù)器報(bào)價(jià)：企業(yè)級(jí)阿里云服務(wù)器報(bào)價(jià)表

??整理２萬字帶你走進(jìn)C語言（詳細(xì)講解+代碼演示+圖解）??（強(qiáng)烈建議收藏?。。。?/a>

接口測(cè)試要測(cè)試什么？

Web前端基礎(chǔ)知識(shí)整理-CSS篇

WebAssembly 那些事兒

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

學(xué)點(diǎn)Webpack吧

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！