如何使用webpack打包JS

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

摘要：我們一起學(xué)習(xí)地址如何使用打包我們?cè)诿钚兄休斎肟纯吹拿钚写笕嬖V我們，用進(jìn)行打包有三種方法新建為命名的文件，可以直接命令打包入口文件輸出文件你自定義的文件名字新建一個(gè)目錄，新建一個(gè)文件，這個(gè)文件主要是用暴露一

GitHub 我們一起學(xué)習(xí)webpack地址：https://github.com/liangfengbo/learning-webpack

如何使用webpack打包JS

我們?cè)诿钚兄休斎耄?b>webpack -h看看webpack的命令行大全

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

webpack告訴我們，用webpack進(jìn)行打包有三種方法：

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

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

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

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

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

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

// app.js

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

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

下面進(jìn)行打包：

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云服務(wù)器云服務(wù)器 Webpack打包分塊 webpack使用 webpack 使用公用cdn js如何使用json數(shù)據(jù)

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

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

相關(guān)文章

Webpack入門到精通（1）

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

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

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

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

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

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

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

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

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

sutaking 2019-08-20 10:33 評(píng)論0 收藏0