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

chanthuang 發布于2019-08-23 10:31 / 1081人閱讀

摘要：本身就是為了打包所設計，作為第一節，介紹怎么打包。檢驗規范支持支持。創建文件夾，其中和分別用和規范編寫。收尾打包后的文件會按照我們的配置放在目錄下，這時，需要創建一個文件，引用打包好的文件。個人網站原文鏈接系列教程一打包

webpack 本身就是為了打包js所設計，作為第一節，介紹怎么打包js。

1. 檢驗webpack規范支持

webpack支持es6, CommonJS, AMD。

創建vendor文件夾，其中minus.js、multi.js和sum.js分別用 CommonJS、AMD 和 ES6 規范編寫。

>>> vendor 文件夾代碼地址

在入口文件app.js中，我們分別用 3 中規范，引用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 默認的配置文件名，>>> 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參數，代表：js文件內部引用其他文件的路徑。

3. 收尾

打包后的js文件會按照我們的配置放在dist目錄下，這時，需要創建一個html文件，引用打包好的js文件。

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

4. 更多

本節的代碼地址：>>> 點我進入

項目的代碼倉庫：>>> 點我進入

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

GPU云服務器云服務器 webpack4教程系列一 linux系列教程云服務器建站教程系列

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96426.html

webpack-demos：全網最貼心webpack系列教程和配套代碼

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

LMou 2019-08-23 12:25 評論0 收藏0
webpack4系列教程（二）：創建項目，打包第一個JS文件

摘要：對于大多數項目，建議本地安裝。打包第一個文件首先，我們在根目錄下創建一個文件和一個文件夾。而中的屬性，表示入口的名稱，此處就是。接下來打開文件，來編寫一條命令執行的打包。 1. 創建項目 1.1 初始化一個項目首先安裝nodejs，打開?nodeJs官網?直接下載安裝即可，安裝完畢后打開命令行工具，進入你的項目文件夾，執行 npm init 進行項目的初始化： showImg(htt...

waterc 2019-08-23 14:40 評論0 收藏0
webpack4 系列教程(十四)：Clean Plugin and Watch Mode

摘要：作者按因為教程所示圖片使用的是倉庫圖片，網速過慢的朋友請移步系列教程十四原文地址。需要注意的是應該把放在配置項的最后一個，因為配置是倒序的最后配置的最先執行。以保證每次正式打包前，先清空原來遺留的打包文件。作者按：因為教程所示圖片使用的是 github 倉庫圖片，網速過慢的朋友請移步《webpack4 系列教程(十四)：Clean Plugin and Watch Mode》原文地址...

TalkingData 2019-08-23 12:27 評論0 收藏0
webpack4系列教程（十）：總結

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

hqman 2019-08-26 13:29 評論0 收藏0
webpack4 系列教程(三): 多頁面解決方案--提取公共代碼

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

CarterLi 2019-08-23 10:49 評論0 收藏0