成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

chanthuang / 1129人閱讀

摘要：本身就是為了打包所設(shè)計(jì)，作為第一節(jié)，介紹怎么打包。檢驗(yàn)規(guī)范支持支持。創(chuàng)建文件夾，其中和分別用和規(guī)范編寫。收尾打包后的文件會(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。

創(chuàng)建vendor文件夾，其中minus.js、multi.js和sum.js分別用 CommonJS、AMD 和 ES6 規(guī)范編寫。

>>> vendor 文件夾 代碼地址

在入口文件app.js中，我們分別用 3 中規(guī)范，引用vendor文件夾中的 js 文件。

// ES6
import sum from "./vendor/sum";
console.log("sum(1, 2) = ", sum(1, 2));

// CommonJs
var minus = require("./vendor/minus");
console.log("minus(1, 2) = ", minus(1, 2));

// AMD
require(["./vendor/multi"], function(multi) {
  console.log("multi(1, 2) = ", multi(1, 2));
});
2. 編寫配置文件

webpack.config.js是 webpack 默認(rèn)的配置文件名，>>> webpack.config.js 代碼地址，其中配置如下：

const path = require("path");

module.exports = {
  entry: {
    app: "./app.js"
  },
  output: {
    publicPath: __dirname + "/dist/", // js引用路徑或者CDN地址
    path: path.resolve(__dirname, "dist"), // 打包文件的輸出目錄
    filename: "bundle.js"
  }
};

注意output.publicPath參數(shù)，代表：js文件內(nèi)部引用其他文件的路徑。

3. 收尾

打包后的js文件會(huì)按照我們的配置放在dist目錄下，這時(shí)，需要?jiǎng)?chuàng)建一個(gè)html文件，引用打包好的js文件。

然后在 Chrome 打開(這節(jié)課只是打包js,不包括編譯es6)，就可以看到我們代碼的運(yùn)行結(jié)果了。

4. 更多

本節(jié)的代碼地址：>>> 點(diǎn)我進(jìn)入

項(xiàng)目的代碼倉庫：>>> 點(diǎn)我進(jìn)入

歡迎技術(shù)交流，引用請(qǐng)注明出處。
個(gè)人網(wǎng)站：Yuan Xin
原文鏈接：webpack4 系列教程(一): 打包JS

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/96426.html

相關(guān)文章

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

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

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

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

    摘要：對(duì)于大多數(shù)項(xiàng)目，建議本地安裝。打包第一個(gè)文件首先，我們?cè)诟夸浵聞?chuàng)建一個(gè)文件和一個(gè)文件夾。而中的屬性，表示入口的名稱，此處就是。接下來打開文件，來編寫一條命令執(zhí)行的打包。 1. 創(chuàng)建項(xiàng)目 1.1 初始化一個(gè)項(xiàng)目 首先安裝nodejs，打開?nodeJs官網(wǎng)?直接下載安裝即可，安裝完畢后打開命令行工具，進(jìn)入你的項(xiàng)目文件夾，執(zhí)行 npm init 進(jìn)行項(xiàng)目的初始化： showImg(htt...

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

  • webpack4 系列教程(十四)：Clean Plugin and Watch Mode

    摘要：作者按因?yàn)榻坛趟緢D片使用的是倉庫圖片，網(wǎng)速過慢的朋友請(qǐng)移步系列教程十四原文地址。需要注意的是應(yīng)該把放在配置項(xiàng)的最后一個(gè)，因?yàn)榕渲檬堑剐虻淖詈笈渲玫淖钕葓?zhí)行。以保證每次正式打包前，先清空原來遺留的打包文件。 作者按：因?yàn)榻坛趟緢D片使用的是 github 倉庫圖片，網(wǎng)速過慢的朋友請(qǐng)移步《webpack4 系列教程(十四)：Clean Plugin and Watch Mode》原文地址...

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

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

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

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

  • webpack4 系列教程(三): 多頁面解決方案--提取公共代碼

    摘要：文件配置如下多頁面應(yīng)用注意屬性其次打包業(yè)務(wù)中公共代碼首先打包中的文件著重來看配置。個(gè)人網(wǎng)站原文鏈接系列教程三多頁面解決方案提取公共代碼 這節(jié)課講解webpack4打包多頁面應(yīng)用過程中的提取公共代碼部分。相比于webpack3，4.0版本用optimization.splitChunks配置替換了3.0版本的CommonsChunkPlugin插件。在使用和配置上，更加方便和清晰。 >>...

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<