如何使用webpack打包JS

qc1iu 發(fā)布于2019-08-22 18:10 / 731人閱讀

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

GitHub 我們一起學(xué)習(xí)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暴露一個加法函數(shù)方法：

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

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

// app.js

// es6 module規(guī)范
import sum from "./sum"

// 調(diào)用
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]

云服務(wù)器 GPU云服務(wù)器 Webpack打包分塊 webpack使用 webpack 使用公用cdn js如何使用json數(shù)據(jù)

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/95571.html

相關(guān)文章

Webpack入門到精通（1）

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

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

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

wangbinke 2019-08-26 13:52 評論0 收藏0
webpack多頁應(yīng)用架構(gòu)系列（十一）：預(yù)打包Dll，實現(xiàn)webpack音速編譯

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

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

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

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

摘要：博主最近在學(xué)習(xí)，順便搭建了一個基于的前端項目架構(gòu)在此寫文記錄一下，同時教會新入坑的小伙伴們?nèi)绾卧陧椖恐型媾~玩轉(zhuǎn)。所以開發(fā)環(huán)境中會有一個目錄用于我們開發(fā)還有一個用來存儲處理后的的模板文件。博主最近在學(xué)習(xí)react redux，順便搭建了一個基于webpack的前端項目架構(gòu),在此寫文記錄一下，同時教會新入webpack坑的小伙伴們?nèi)绾卧陧椖恐型媾~！玩轉(zhuǎn)webpack。github...

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