webpack入门（一）

最新推荐文章于 2023-12-28 07:27:28 发布

magicwen007

最新推荐文章于 2023-12-28 07:27:28 发布

阅读量118

点赞数

分类专栏：打包工具文章标签： webpack

本文链接：https://blog.csdn.net/magicwen007/article/details/80981672

版权

打包工具专栏收录该内容

1 篇文章 0 订阅

订阅专栏

webpack简介

这是官方网站的介绍：webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

安装过程

我们通过npm初始化一个名为webpack-test的项目

mkdir webpack-test
cd webpack-test
npm init

全局安装webpack并使用webpack 3

npm install -g webpack@3

项目中安装webpack

npm install webpack@3 --save-dev

打包应用

工程目录创建完了，我们先创建一个最简单的例子，新建一个main.js

function main() {
    alert('hello world');
}
main();

我们的目标是通过webpack打包这个文件，生成一个main.bundle.js

通过webpack命令行工具就可以简单实现

webpack main.js main.bundle.js

打包文件成功生成

Hash: 01108f54d3e806095349
Version: webpack 3.12.0
Time: 51ms
         Asset     Size  Chunks             Chunk Names
main.bundle.js  2.52 kB       0  [emitted]  main
   [0] ./main.js 45 bytes {0} [built]

打开main.bundle.js，我们可以看到main.js里面的内容已经被注入进来，并且标识为0模块

/* 0 */
/***/ (function(module, exports) {

function main() {
    alert('hello world');
}
main();

/***/ })
/******/ ]);

在index.html中引入main.bundle.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack test</title>
    <script type="application/javascript" src="main.bundle.js" ></script>
</head>
<body>
</body>
</html>

chrome打开index.html文件，如预想弹出了hello world~

接下来会介绍webpack的配置文件，敬请期待~

magicwen007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack入门（一）

webpack简介这是官方网站的介绍：webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。安装过程话不多说，我们初始化一个项目。mkdir webpack-te...
复制链接

扫一扫