如何使用webpack打包JS

qc1iu 发布于2019-08-22 18:10 / 644人阅读

摘要：我们一起学习地址如何使用打包我们在命令行中输入看看的命令行大全告诉我们，用进行打包有三种方法新建为命名的文件，可以直接命令打包入口文件输出文件你自定义的文件名字新建一个目录，新建一个文件，这个文件主要是用暴露一

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]

私有云服务器托管 Webpack打包分块 webpack使用 webpack 使用公用cdn js如何使用json数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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