|
|
|
步骤 2 : node.js 步骤 3 : 关于 webpack 版本 步骤 4 : 创建项目 步骤 5 : 安装 webpack 步骤 6 : a.js 步骤 7 : 使用 webpack 命令打包 步骤 8 : index.html 步骤 9 : 打开 index.html 步骤 10 : 可运行项目
什么是 webpack? 做过稍复杂一点项目的同学都会知道， 一个包含前端的项目，里面可能有多个 .js, 多个 .css , 多个静态图片， 多个其他前端资源。
一些 js 资源彼此之前存在依赖关系，当一个页面需要加载多个 .js 的话，也会拖累整个页面的加载速度。 所以为了解决这个问题， 如图所示，webpack 就把左边的各种各样的静态资源，打包成了一个所谓的 assets. 这样浏览器加载起来就快多了。
webpack 的运行，是需要依赖 node.js 的运行环境的，所以请安装 node.js。
对 node.js 不熟悉的同学，请参考 node.js 教程
webpack 现在版本已经出到 4了。 但是很不稳定，有奇奇怪怪的bug. 而且 4 的一些做法与以前各种版本的做法又有相当的出入。 这就导致使用4，使得在网上找到的各种 webpack 教程都无法使用。
不仅如此， webpack 对 windows 的兼容性也不太好，很多时候 在Linux 上跑的好好的，到了 windows 上就怎么都跑不起来。 站长实验了各种版本，最后确定下来，在 windows 里安装， 用 cnpm 方式安装 @1.13.2 版本是可以正常运行的。 这样就给大家节约不少时间，少走站长走的弯路了。
在如下位置创建项目目录
E:\project\webpack-demo 项目目录名称 不要用 webpack ，会对 webpack 工具的使用产生冲突
安装的时候，不要使用 npm， 否则在 windows 上会失败。 请使用 cnpm
cnpm 是一个国内的镜像，不了解的同学，请跳转到 cnpm 教程。 接下来安装 webpack，使用全局安装方式： cnpm install -g webpack@1.13.2 如图所示安装结束后，运行 webpack 会看到很多的命令参数，其中，最开始的地方会看到版本 ： webpack 1.13.2
在项目目录下创建 a.js.
这个js 很简单，就是输出一行 "hello webpack" document.write("hello webpack");
document.write("hello webpack");
在项目目录下运行
webpack a.js bundle.js 其运行导致 a.js 被打包到 bundle.js 文件里。 从生产的角度讲，打包一个.js 文件到另一个 .js 文件没有实际意义，不过这里是演示这个效果，往后面学习机会看到更加复杂和强大的功能了。
准备一个 index.html，运用使用这个 bundle.js 文件。
<html>
<head>
<script src="bundle.js"></script>
</head>
</html>
<html>
<head>
<script src="bundle.js"></script>
</head>
</html>
打开 index.html ，即可看到引用 bunlde.js 之后的效果。
在右上角有本知识点对应的可运行项目下载 ,实在自己搞不出来，就下载解压出来比较一下。
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2024-08-01
关于安装失败、打包失败的解决办法
1 个答案
虚心求学 跳转到问题位置 答案时间：2024-08-01 webpack@3.0 和
webpack-dev-server@2.11.2 是兼容的，亲测有效，热更新也有效。
webpack与webpack-dev-server版本适配对照标表： 在使用webpack时
webpack 3.x 要使用 webpack-dev-server 2.x
webpack 4.x 要使用 webpack-dev-server 3.x
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2021-07-10
小白一个，为什么没视频了。看着有点懵
2021-02-18
关于webpack下载
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
|||||||||||