how2j.cn

相关下载
文件名 文件大小
webpack-demo.rar 747b
使用站长秘制下载工具
步骤 1 : 介绍   
步骤 2 : node.js   
步骤 3 : 关于 webpack 版本   
步骤 4 : 创建项目   
步骤 5 : 安装 webpack   
步骤 6 : a.js   
步骤 7 : 使用 webpack 命令打包   
步骤 8 : index.html   
步骤 9 : 打开 index.html   
步骤 10 : 可运行项目   

步骤 1 :

介绍

什么是 webpack? 做过稍复杂一点项目的同学都会知道, 一个包含前端的项目,里面可能有多个 .js, 多个 .css , 多个静态图片, 多个其他前端资源。
一些 js 资源彼此之前存在依赖关系,当一个页面需要加载多个 .js 的话,也会拖累整个页面的加载速度。
所以为了解决这个问题, 如图所示,webpack 就把左边的各种各样的静态资源,打包成了一个所谓的 assets. 这样浏览器加载起来就快多了。
介绍
步骤 2 :

node.js

webpack 的运行,是需要依赖 node.js 的运行环境的,所以请安装 node.js。
对 node.js 不熟悉的同学,请参考 node.js 教程
步骤 3 :

关于 webpack 版本

webpack 现在版本已经出到 4了。 但是很不稳定,有奇奇怪怪的bug. 而且 4 的一些做法与以前各种版本的做法又有相当的出入。 这就导致使用4,使得在网上找到的各种 webpack 教程都无法使用。
不仅如此, webpack 对 windows 的兼容性也不太好,很多时候 在Linux 上跑的好好的,到了 windows 上就怎么都跑不起来。
站长实验了各种版本,最后确定下来,在 windows 里安装, 用 cnpm 方式安装 @1.13.2 版本是可以正常运行的。 这样就给大家节约不少时间,少走站长走的弯路了。
步骤 4 :

创建项目

在如下位置创建项目目录

E:\project\webpack-demo

项目目录名称 不要用 webpack ,会对 webpack 工具的使用产生冲突
创建项目
步骤 5 :

安装 webpack

安装的时候,不要使用 npm, 否则在 windows 上会失败。 请使用 cnpm
cnpm 是一个国内的镜像,不了解的同学,请跳转到 cnpm 教程
接下来安装 webpack,使用全局安装方式:

cnpm install -g webpack@1.13.2


如图所示安装结束后,运行

webpack

会看到很多的命令参数,其中,最开始的地方会看到版本 : webpack 1.13.2
安装 webpack
步骤 6 :

a.js

在项目目录下创建 a.js.
这个js 很简单,就是输出一行 "hello webpack"
document.write("hello webpack");
document.write("hello webpack");
步骤 7 :

使用 webpack 命令打包

在项目目录下运行

webpack a.js bundle.js

其运行导致 a.js 被打包到 bundle.js 文件里。
从生产的角度讲,打包一个.js 文件到另一个 .js 文件没有实际意义,不过这里是演示这个效果,往后面学习机会看到更加复杂和强大的功能了。
使用 webpack 命令打包
步骤 8 :

index.html

准备一个 index.html,运用使用这个 bundle.js 文件。
<html> <head> <script src="bundle.js"></script> </head> </html>
<html>
    <head>
        <script src="bundle.js"></script>
    </head>
</html>
步骤 9 :

打开 index.html

打开 index.html ,即可看到引用 bunlde.js 之后的效果。
打开 index.html
步骤 10 :

可运行项目

在右上角有本知识点对应的可运行项目下载 ,实在自己搞不出来,就下载解压出来比较一下。


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


提问之前请登陆
关于 前端部分-webpack-入门启动 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 620943819
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图