免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

Webpack入門(mén)

2021-03-03    分類(lèi): 網(wǎng)站建設(shè)

由于 JavaScript 應(yīng)用程序的復(fù)雜性不斷增加,構(gòu)建工具已成為 web 開(kāi)發(fā)中不可或缺的一部分。Bundlers 允許我們?nèi)ゴ虬⒕幾g和管理現(xiàn)代 web 項(xiàng)目需要的眾多資源文件和依賴(lài)庫(kù)。



在本教程中,我們將了解 webpack,一個(gè)強(qiáng)大的開(kāi)源打包和預(yù)處理器,可以處理大量復(fù)雜多樣的任務(wù)。我們將向您展示如何去編寫(xiě) modules, bundle 代碼和使用一些 loader 插件。本教程為 webpack 初學(xué)者設(shè)計(jì)的,要求有一些 JavaScript 基礎(chǔ)。



<figcaption></figcaption>

為什么選擇 Webpack?

就像 web 開(kāi)發(fā)的其它方面一樣,構(gòu)建工具的也沒(méi)有一個(gè)標(biāo)準(zhǔn)。現(xiàn)在開(kāi)發(fā)者可以在 Webpack、Gulp、Bowserify、NPM scripts、Grunt 等類(lèi)似的十余種構(gòu)建工具。所有這些工具在在底層實(shí)現(xiàn)有所不同,但總體還是非常相似的,所以大多數(shù)時(shí)候你可以根據(jù)個(gè)人喜好和開(kāi)發(fā)的項(xiàng)目,來(lái)選擇合適的構(gòu)建工具。

你可以通過(guò)以下優(yōu)缺點(diǎn),來(lái)判斷 webpack 是否合適:

優(yōu)點(diǎn):

  • 可以很好的用于單頁(yè)應(yīng)用
  • 同時(shí)支持 require() 和 import 模塊語(yǔ)法
  • 允許非常前沿的 code splitting 特性
  • 熱加載 可以讓 React、Vue.js 和其它類(lèi)似框架的本地開(kāi)發(fā)更快
  • 它是《2016 JavaScript 調(diào)查》中最受歡迎的構(gòu)建工具

缺點(diǎn):

  • 不適合 web 開(kāi)發(fā)的初學(xué)者
  • 對(duì)于 CSS、圖片和其它非 JS 資源文件時(shí),需要先混淆處理
  • 文檔可以再優(yōu)化
  • 變化很大,甚至 2016 年的教程都已經(jīng)算過(guò)時(shí)了

1. 安裝

安裝 webpack 最簡(jiǎn)單的方式是通過(guò)包管理器。我們將使用 npm 你也隨意使用 Yarn 或其它熟悉的替代。不管是 npm 還是 Yarn,你都需要現(xiàn)有一個(gè)帶 Node.js 的運(yùn)行環(huán)境和 package.json 文件再繼續(xù)。

推薦局部安裝(不帶 -g 標(biāo)簽),確保每個(gè)人運(yùn)行你的項(xiàng)目時(shí)都是一樣的 webpack 版本。

npm install webpack --save-dev
 

一旦我們安裝完,最好通過(guò) Node.js 腳本來(lái)運(yùn)行 webpack,可以在添加以下代碼到你的 package.json:

//...
 "scripts": {
 "build": "webpack -p",
 "watch": "webpack --watch"
 },
//...
 

現(xiàn)在我們可以通過(guò)在命令行輸入 npm run build 來(lái)讓 webpack 打包我們的文件(-p 選項(xiàng)可以壓縮生產(chǎn)環(huán)境下打包后的代碼)。運(yùn)行 npm run watch 將啟動(dòng)一個(gè)進(jìn)程,當(dāng)檢測(cè)到文件更改時(shí),會(huì)自動(dòng)打包我們的文件。

設(shè)置的最后一部分是告訴 webpack 要打包哪些文件,推薦新創(chuàng)建一個(gè)配置文件。

2. Webpack 配置文件

在這我們看一下配置文件最基礎(chǔ)的寫(xiě)法,不要被誤導(dǎo) - webpack 配置文件非常強(qiáng)大,在不同的項(xiàng)目中變化很大,在某些情況下會(huì)變得非常復(fù)雜。

在你項(xiàng)目的根目錄下新增一個(gè)名為 webpack.config.js 的文件。

webpack.config.js

var path = require('path');
module.exports = {
 entry: './assets/js/index.js',
 output: {
 filename: 'bundle.js',
 path: path.resolve(__dirname, 'dist')
 }
};
 

entry 選項(xiàng)告訴webpack哪個(gè)是我們 Javascript 主文件。配置 entry 有許多不同的策略,但在大多數(shù)情況一個(gè)入口就足夠了。

在 output 中我們指定打包的名稱(chēng)和路徑。在 webpack 運(yùn)行完后我們將把所有 JavaScript 放在一個(gè)名為 bundle.js 的文件中,這個(gè)唯一的 script 文件可以鏈接在我們的 HTML 文件:

<script src="./dist/bundle.js"></script>
 

這個(gè)設(shè)置足以讓我們開(kāi)始,稍后我們會(huì)向其添加更多的內(nèi)容,但首先讓我們先來(lái)看看模塊是如何工作的。


3. Webpack 模塊

Webpack 提供了多種使用模塊的方法,大多數(shù)時(shí)候你可以選擇一個(gè)你喜歡的。 在這個(gè)教程中我們會(huì)使用到 ES6 的 import 語(yǔ)法。

我們想要添加一個(gè)模塊來(lái)迎接我們的用戶(hù),我們創(chuàng)建一個(gè)名為 greeter.js 文件,將它導(dǎo)出為一個(gè)簡(jiǎn)單的函數(shù)

greeter.js

function greet() {
 console.log('Have a great day!');
};
//在此我向大家推薦一個(gè)前端全棧開(kāi)發(fā)交流圈:582735936 突破技術(shù)瓶頸,提升思維能力
export default greet;
 

為了使用這個(gè)模塊,我們必須引入它并在 entry 中調(diào)用它,你可以在 index.js 中看到配置文件。

index.js

import greet from './greeter.js';
console.log("I'm the entry point");
greet();
 

當(dāng)我們 npm run build 運(yùn)行打包時(shí),在瀏覽器中打開(kāi)我們的 HTML 可以看到:



在我們的 entry 和 greeter 模塊已經(jīng)編譯成一個(gè)名為 bundle.js 的文件,且已經(jīng)在瀏覽器生效。這是迄今為止發(fā)生事情的簡(jiǎn)單流程圖。



4. 需要的庫(kù)

我們想要讓我們的應(yīng)用程序在一周中的某一天問(wèn)候用戶(hù),我們可以直接在我們的 greeter 模塊引入 moment.js。

首先,我們需要通過(guò) npm 來(lái)安裝這個(gè)庫(kù)

npm install moment --save
 

在我們?cè)俅未虬轮螅跒g覽器的控制臺(tái)我們將收到一下信息:



這時(shí)我們的流程圖是這樣的:



注意,在引入庫(kù)時(shí)有更高級(jí)的用法,不在本文章的范圍內(nèi),你可以點(diǎn)這了解更多。


5.Loaders

Loader 是 webpack 在打包過(guò)程中執(zhí)行任務(wù)對(duì)文件進(jìn)行預(yù)處理或后處理的方式。比如它可以編譯 TypeScript, 加載 Vue.js 組件,渲染模板等等。大多數(shù) loaders 是社區(qū)編寫(xiě)的,受歡迎的 loaders 清單可以看這里

假設(shè)我們想要添加一個(gè) linter 到我們的項(xiàng)目中去檢查我們 JavaScript 代碼的錯(cuò)誤。 我們可以引入 JSHint loader 來(lái)實(shí)現(xiàn),它可以捕獲各種不良實(shí)踐和語(yǔ)法錯(cuò)誤。

首先我們需要安裝 JSHint 和 webpack 的 JSHint loader:

npm install jshint jshint-loader --save-dev
 

之后我們需要在 webpack 配置文件中添加一些代碼,這將初始化 loader, 告訴它要檢查哪些類(lèi)型的文件,以及忽略哪些文件。

webpack.config.js

var path = require('path');
module.exports = {
 entry: './assets/js/index.js',
 output: {
 filename: 'bundle.js',
 path: path.resolve(__dirname, 'dist')
 },
 // Add the JSHint loader
 module: {
 rules: [{
 test: /.js$/, // Run the loader on all .js files
 exclude: /node_modules/, // ignore all files in the node_modules folder
 use: 'jshint-loader'
 }]
 }
};
//在此我向大家推薦一個(gè)前端全棧開(kāi)發(fā)交流圈:582735936 突破技術(shù)瓶頸,提升思維能力 

現(xiàn)在當(dāng) webpack 啟動(dòng)后,它將在命令行顯示一個(gè)警告列表(那些我們所忽略的文件)



因?yàn)?nbsp;moment.js 位于 node_modules 文件中,它不會(huì)被 JSHint loader 檢測(cè)。



延伸閱讀

我們對(duì) webpack 的介紹到此為止。 因?yàn)檫@是一個(gè)針對(duì)初學(xué)者的課程,所以我們嘗試只覆蓋最有用和應(yīng)該知道的 webpack 概念。 我們希望這個(gè)教程有用,不要太混亂,就像標(biāo)題所說(shuō)的在十五分鐘內(nèi)可以消化。

接下來(lái),我們計(jì)劃在本教程中添加第二部分,說(shuō)明如何使用 CSS 模塊和其它更高級(jí)的功能。在此期間,如果你想要學(xué)習(xí)更多關(guān)于 webpack 的信息(還有更多),我們推薦你閱讀這些很棒的資源

  • webpack.js.org - webpack 的官方網(wǎng)站,里面有很多的指南和文檔。
  • Awesome webpack - webpack 資源匯總
  • Webpack Example - 各種webpack配置的列表

名稱(chēng)欄目:Webpack入門(mén)
本文地址:http://m.newbst.com/news4/103954.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供云服務(wù)器定制網(wǎng)站軟件開(kāi)發(fā)移動(dòng)網(wǎng)站建設(shè)搜索引擎優(yōu)化網(wǎng)站排名

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)