webpack4 系列教程 一 打包JS

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

建立vendor資料夾，其中minus.js、multi.js和sum.js分別用 commonjs、amd 和 es6 規範編寫。

>>> vendor 資料夾 **位址

// 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) );

const path = require("path");

module.exports = ,
output: 
};

打包後的js檔案會按照我們的配置放在dist目錄下，這時，需要建立乙個html檔案，引用打包好的js檔案。

然後在 chrome 開啟(這節課只是打包js,不包括編譯es6)，就可以看到我們**的執行結果了。

專案的**倉庫：>>> 點我進入

個人**：

yuan xin

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

AssetBundle系統之（一）打包

系統所做的事情 1.打包 分析依賴，增量打包 2.載入 依賴關係載入，多版本支援 3.解除安裝 自動解除安裝無引用資源 1.先說一下打包規則 為了打包方便，需要定製一套打包規則。這裡的規則 a.基於資料夾的策略打包 b.打包規則分為 selfname 資源自身名字為包名 c.打包規則分為 forde...

webpack4 系列教程 十一 字型檔案處理

本節課的 目錄如下 本節課的package.json內容如下 複製 為了提取 css 樣式到單獨檔案，需要用到extracttextplugin外掛程式。在專案的入口檔案需要引入style loader和css loader import style loader lib addstyles imp...

webpack4 系列教程 十一 字型檔案處理

本節課的 目錄如下 本節課的package.json內容如下 為了提取 css 樣式到單獨檔案，需要用到extracttextplugin外掛程式。在專案的入口檔案需要引入style loader和css loader import style loader lib addstyles import...