如何使用webpack打包JS

qc1iu 發布于2019-08-22 18:10 / 723人閱讀

摘要：我們一起學習地址如何使用打包我們在命令行中輸入看看的命令行大全告訴我們，用進行打包有三種方法新建為命名的文件，可以直接命令打包入口文件輸出文件你自定義的文件名字新建一個目錄，新建一個文件，這個文件主要是用暴露一

GitHub 我們一起學習webpack地址：https://github.com/liangfengbo/learning-webpack

如何使用webpack打包JS

我們在命令行中輸入：webpack -h看看webpack的命令行大全

Usage: webpack-cli [options]
       webpack-cli [options] --entry  --output 
       webpack-cli [options]  --output

webpack告訴我們，用webpack進行打包有三種方法：

1.新建為webpack.config.js命名的文件，可以直接webpack命令打包

2.webpack 入口文件 -o 輸出文件

3.webpack --config 你自定義的文件名字

新建一個目錄，新建一個sum.js文件，這個文件主要是用es6 module暴露一個加法函數方法：

// sum.js
export default function sum(a, b) {
    return a + b;
}

然后新建一個app.js入口文件（webpack要打包這個文件）

// app.js

// es6 module規范
import sum from "./sum"

// 調用
console.log("sum(23,24) = ", sum(23, 24));

下面進行打包：

webpack app.js -o bundle.js

如果打包成功顯示：

Hash: 7e137d767d2665688484
Version: webpack 4.5.0
Time: 588ms
Built at: 2018-6-20 20:30:06
      Asset       Size  Chunks             Chunk Names
0.bundle.js  188 bytes       0  [emitted]
  bundle.js   1.84 KiB       1  [emitted]  main
Entrypoint main = bundle.js
   [0] ./app.js + 1 modules 466 bytes {1} [built]
       | ./app.js 411 bytes [built]
       | ./sum.js 55 bytes [built]
   [1] ./minus.js 54 bytes {1} [built]
   [2] ./muti.js 114 bytes {0} [built]

GPU云服務器云服務器 Webpack打包分塊 webpack使用 webpack 使用公用cdn js如何使用json數據

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

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

Webpack入門到精通（1）

前言什么是webpack 本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。 webpack 有哪些功能(代碼轉換文件優化代碼分割模塊合并 ...

SunZhaopeng 2019-05-23 17:29 評論0 收藏0
Webpack入門到精通（1）

前言什么是webpack 本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。webpack 有哪些功能(代碼轉換文件優化代碼分割模塊合并自...

wangbinke 2019-08-26 13:52 評論0 收藏0
webpack多頁應用架構系列（十一）：預打包Dll，實現webpack音速編譯

摘要：本文首發于的技術博客實用至上，非經作者同意，請勿轉載。原文地址如果您對本系列文章感興趣，歡迎關注訂閱這里前言書承上文多頁應用架構系列十如何打造一個自定義的。終于，發現了這一大殺器，打包時間過長的問題得到完美解決。本文首發于Array_Huang的技術博客——實用至上，非經作者同意，請勿轉載。原文地址：https://segmentfault.com/a/119000000710437...

sixleaves 2019-08-20 11:33 評論0 收藏0
webpack多頁應用架構系列（三）：怎么打包公共代碼才能避免重復？

摘要：在上一篇文章多頁應用架構系列二配置常用部分有哪些中，我介紹了如何配置多頁應用的入口，然而，如果僅僅如此操作，帶來的后果就是，打包生成出來的每一個入口文件都會完整包含所有代碼。的初始化常用參數有哪些，給這個包含公共代碼的命個名唯一標識。本文首發于Array_Huang的技術博客——實用至上，非經作者同意，請勿轉載。原文地址：https://segmentfault.com/a/1190...

oliverhuang 2019-08-22 10:37 評論0 收藏0
如何使用webpack架構項目——新手教程

摘要：博主最近在學習，順便搭建了一個基于的前端項目架構在此寫文記錄一下，同時教會新入坑的小伙伴們如何在項目中玩弄，額玩轉。所以開發環境中會有一個目錄用于我們開發還有一個用來存儲處理后的的模板文件。博主最近在學習react redux，順便搭建了一個基于webpack的前端項目架構,在此寫文記錄一下，同時教會新入webpack坑的小伙伴們如何在項目中玩弄，額！玩轉webpack。github...

sutaking 2019-08-20 10:33 評論0 收藏0