亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

webpack4系列教程（二）：創(chuàng)建項(xiàng)目，打包第一個(gè)JS文件

waterc / 1144人閱讀

摘要：對(duì)于大多數(shù)項(xiàng)目，建議本地安裝。打包第一個(gè)文件首先，我們?cè)诟夸浵聞?chuàng)建一個(gè)文件和一個(gè)文件夾。而中的屬性，表示入口的名稱(chēng)，此處就是。接下來(lái)打開(kāi)文件，來(lái)編寫(xiě)一條命令執(zhí)行的打包。

1. 創(chuàng)建項(xiàng)目 1.1 初始化一個(gè)項(xiàng)目

首先安裝nodejs，打開(kāi)?nodeJs官網(wǎng)?直接下載安裝即可，安裝完畢后打開(kāi)命令行工具，進(jìn)入你的項(xiàng)目文件夾，執(zhí)行

npm init 進(jìn)行項(xiàng)目的初始化：

過(guò)程中會(huì)讓你填寫(xiě)項(xiàng)目名、版本、描述、倉(cāng)庫(kù)地址、關(guān)鍵字等信息，可以不填一路回車(chē)，執(zhí)行完畢后會(huì)在根目錄下創(chuàng)建一個(gè) package.json 文件，這樣就初始化結(jié)束了。

1.2 安裝webpack

由于在webpack4中已經(jīng)不再默認(rèn)安裝 webpacl-cli，所以我們要手動(dòng)安裝，在命令行執(zhí)行 npm i webpack webpack-cli -D 即可。對(duì)于大多數(shù)項(xiàng)目，建議本地安裝。這可以使我們?cè)谝肫茐氖阶兏?breaking change)的依賴(lài)時(shí)，更容易分別升級(jí)項(xiàng)目。

2. 打包第一個(gè)JS文件?

首先，我們?cè)诟夸浵聞?chuàng)建一個(gè)?webpack.config.js 文件和一個(gè)src文件夾。然后在src中創(chuàng)建一個(gè) main.js 文件，如下：

在 main.js 中寫(xiě)一行?

alert("hello world")

然后打開(kāi) webpack.config.js ，進(jìn)行webpack的配置：

const path = require("path")

let config = {
  mode: "none",
  entry: {
    main: path.join(__dirname, "./src/main.js")
  },
  output: {
    filename: "[name].bundle.js",
    path: path.join(__dirname, "./dist")
  }
}

module.exports = config

我們?cè)O(shè)置了一個(gè)名為 main 的入口，并以 src 下的 main.js 作為入口文件，然后輸出到根目錄下的 dist 文件夾中。

在webpack4中，我們需要設(shè)置 mode 屬性，用來(lái)決定當(dāng)前是development還是production環(huán)境，webpack會(huì)根據(jù)此值來(lái)進(jìn)行一些默認(rèn)操作，兩種環(huán)境的不同配置后面的博文會(huì)詳解，這里我們?cè)O(shè)置為 "none" ，來(lái)避免默認(rèn)操作。前文已經(jīng)說(shuō)過(guò)，path 是 nodeJs中的核心模塊用來(lái)操作路徑，__dirname 表示文件的當(dāng)前路徑（此時(shí)為根路徑）。而 output中的filename屬性，[name] 表示入口的名稱(chēng)，此處就是 main。

接下來(lái)打開(kāi) package.json 文件，來(lái)編寫(xiě)一條命令執(zhí)行webpack的打包。在 script 中添加：

"build": "webpack --config webpack.config.js --progress --colors"

webpack --config path/to/your/file/file.js 表示執(zhí)行某個(gè)配置文件，--progress可以讓我們看到打包的進(jìn)度 ， --colors 開(kāi)啟命令行顏色顯示，更多的webpack命令參數(shù)大家可以另行查閱。

然后就可以在命令行執(zhí)行：npm run build，執(zhí)行完畢后，我們可以看到，在根目錄下多了一個(gè) dist 文件夾 并有一個(gè) main.bundle.js文件，這就是webpack為我們打包出來(lái)的靜態(tài)資源，而文件路徑就是我們?cè)?output 中設(shè)置的值。

為了演示打包好的?main.bundle.js ，我們?cè)诟夸浵聞?chuàng)建一個(gè) index.html ，并引入main.bundle.js




    
    Title

在瀏覽器中打開(kāi) index.html，可見(jiàn)main.js中的代碼已經(jīng)被執(zhí)行了：

在IDE中打開(kāi)main.bundle.js，代碼的最底部可以看到我們?cè)趍ain.js中寫(xiě)的代碼。

至此，我們的第一次 webpack 打包就成功了。

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

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

相關(guān)文章

  • webpack4系列教程（十）：總結(jié)

    摘要：傳送門(mén)系列教程一初識(shí)系列教程二創(chuàng)建項(xiàng)目，打包第一個(gè)文件系列教程三自動(dòng)生成項(xiàng)目中的文件系列教程四處理項(xiàng)目中的資源文件一系列教程五處理項(xiàng)目中的資源文件二系列教程六使用分割代碼系列教程七使用系列教程八使用審查代碼系列教程九開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境 在前端開(kāi)發(fā)日益復(fù)雜的今天，我們需要一個(gè)工具來(lái)幫助我們管理項(xiàng)目資源，打包、編譯、預(yù)處理、后處理等等。webpack的出現(xiàn)無(wú)疑是前端開(kāi)發(fā)者的福音，我的博文只...

    hqman 評(píng)論0 收藏0

  • webpack4系列教程（五）：處理項(xiàng)目中的資源文件（二）

    摘要：首先安裝在中引入并添加修改和的之后，可見(jiàn)中引入了一個(gè)文件也正是我們?cè)诤椭械拇a可以幫助我們處理，如自動(dòng)添加瀏覽器前綴。在根目錄下創(chuàng)建修改和的在中加入打包之后打開(kāi)，可見(jiàn)瀏覽器前綴已經(jīng)加上了 1. 在項(xiàng)目中使用 less? 在 src/assets/ 下新建 common.less ： body{ background: #fafafa; padding: 20px; } show...

    Channe 評(píng)論0 收藏0

  • webpack-demos：全網(wǎng)最貼心webpack系列教程和配套代碼

    摘要：全網(wǎng)最貼心系列教程和配套代碼歡迎關(guān)注個(gè)人技術(shù)博客。所以我花費(fèi)了個(gè)多月整理了這份教程，一共分成節(jié)，每節(jié)都有講解，并且準(zhǔn)備了配套代碼。奈何深感水平不夠，只有一腔熱情，所以直接開(kāi)放了教程和源碼。 webpack-demos：全網(wǎng)最貼心 webpack 系列教程和配套代碼 歡迎關(guān)注個(gè)人技術(shù)博客：godbmw.com。每周 1 篇原創(chuàng)技術(shù)分享！開(kāi)源教程(webpack、設(shè)計(jì)模式）、面試刷題（偏前...

    LMou 評(píng)論0 收藏0

  • webpack4 系列教程(二): 編譯 ES6

    摘要：今天介紹怎么編譯的各種函數(shù)和語(yǔ)法。對(duì)于相關(guān)的匹配規(guī)則，除了匹配結(jié)尾的文件，還應(yīng)該去除文件夾下的第三庫(kù)的文件發(fā)布前已經(jīng)被處理好了。它需要在我們項(xiàng)目的入口文件中被引入，或者在中配置。個(gè)人網(wǎng)站原文鏈接系列教程二編譯 今天介紹webpack怎么編譯ES6的各種函數(shù)和語(yǔ)法。敲黑板：這是webpack4版本哦, 有一些不同于webpack3的地方。 >>> 本節(jié)課源碼 >>> 所有課程源碼 1....

    graf 評(píng)論0 收藏0

  • webpack4 系列教程(一): 打包JS

    摘要：本身就是為了打包所設(shè)計(jì)，作為第一節(jié)，介紹怎么打包。檢驗(yàn)規(guī)范支持支持。創(chuàng)建文件夾，其中和分別用和規(guī)范編寫(xiě)。收尾打包后的文件會(huì)按照我們的配置放在目錄下，這時(shí)，需要?jiǎng)?chuàng)建一個(gè)文件，引用打包好的文件。個(gè)人網(wǎng)站原文鏈接系列教程一打包 webpack 本身就是為了打包js所設(shè)計(jì)，作為第一節(jié)，介紹怎么打包js。 1. 檢驗(yàn)webpack規(guī)范支持 webpack支持es6, CommonJS, AMD。...

    chanthuang 評(píng)論0 收藏0

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

0條評(píng)論

閱讀需要支付1元查看
<