webpack4入门最简单的例子介绍-创新互联

webpack在目前来说应该是前端用的比较多的打包工具了，那么对于之前没有接触过这块的该怎么办呢？答案很明显嘛，看资料，查文档，自己去琢磨，自己去敲一敲，跑一跑；

创新互联建站是一家专业提供复兴企业网站建设,专注与成都网站建设、做网站、HTML5建站、小程序制作等业务。10年已为复兴众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。

Webpack是当下最热门的前端资源模块化管理和打包工具，它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源，还可以将按需加载的模块进行代码分割，等到实际需要的时候再异步加载。

webpack和Grunt以及Gulp相比有什么特性

Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。

Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译、组合、压缩等任务的具体步骤。

webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。

那么，这边我将以一个最基础的例子来将这个流程跑一边，包括过程中会遇到哪些问题，怎么解决的，也会一一奉上；

第一步：

我们需要安装npm，这个只要你有NodeJS运行环境的肯定会有的；这边这个块也就不作叙述

第二步：

我们接下来会选择在项目目录中进行所有的安装和操作，不去选择全局安装；

在电脑任意盘中新建一个项目文件夹，如：webpackdemo

　　　　　 webpack4 入门最简单的例子介绍

接下来我们通过cmd进入到这个项目文件夹下，并输入执行npm init，回车，进行初始化：

接下来，对于package name之类的配置项，我们完全选择直接回车，到底！

到这一步，就OK了！

此时我们的项目文件夹里就多了一个文件：package.json

第三步：

既然要使用webpack进行打包，那么我们就要来安装webpack了，起初我们就说过都在项目文件夹里完成，不做全局安装；那么接下来输入npm install --save-dev webpack，回车进行安装：

此时我们的项目文件夹，已经又多了一个文件夹和一个json文件：

第四步：

我们现在可以开始写自己的项目了，那么我这边也就按通常各位大牛分享的例子来写，首先，在项目文件夹下，新建两个文件加app和public；

app文件夹中写入test.js和main.js；public文件夹中写入index.html；

借鉴一下别人的例子：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Webpack demo</title>
</head>
<body>
 <div id='root'></div><br><br> 
<!--引入打包之后的文件-->
<script src="bundle.js"></script> 
</body>
</html>

文章标题：webpack4入门最简单的例子介绍-创新互联
浏览路径：https://www.cdcxhl.com/article36/ccgpsg.html

成都网站建设公司_创新互联，为您提供网站改版、App开发、自适应网站、移动网站建设、面包屑导航、网站收录

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容