webpack基础,入门教程(从安装到打包)

概念:我们可以从下图再次了解一下WebPack的作用:可以构建我们的assets,script,images,styles。用一个名称概括就是静态模块打包工具。他可以根据我们的项目,按照模块进行划分,然后打包成多个js。而我们为什么要用打包工具呢,因为更好的用户体验是我们的宗旨,而打包之后的代码体积更小,运行速度能得到极大的提升。

1.安装WebPack

用win+R打开运行对话框,输入cmd进入命令行模式。然后找到你想开始项目的地方,输入下方代码:

1
2
mkdir webpack_demo
cd webpack_demo

第一句是建立一个文件夹,第二句是进入这个文件夹。
需要注意的是,你在执行下一步时必须安装node,可以通过 node -v来查看node安装情况和版本,如果没有安装,要先安装node才可以继续进行。

1
2
//全局安装
npm install -g webpack

2.对项目目录进行安装

1
npm init

输入完成后,npm终端会问你关于项目的名称,描述……一堆内容,如果你不考虑发布到npm上,这些内容都不重要,而且我们后期还可以用文本的形式修改这些内容。现在我们只要一路回车就完成了初始化。这时用dir命令已经可以看到生成的package.json文件了。
输入下面命令进行项目目录的安装:

1
npm install --save-dev webpack

这里的参数–save是要保存到package.json中,dev是在开发时使用这个包,而生产环境中不使用。

3.demo的制作

在根目录建立两个文件夹,分别是src文件夹和dist文件夹:

  • src文件夹:用来存放我们编写的javascript代码,可以简单的理解为用JavaScript编写的模块。
  • dist文件夹:用来存放供浏览器读取的文件,这个是webpack打包成的文件。
    你可以理解成src是源码文件,dist是我们编译打包好的文件;一个用于开发环境,一个用于生产环境。

在dist文件下手动建立一个index.html文件,接下来在src文件夹下建立entery.js的文件

4.第一次Webpack打包

Webpack其实是可以在终端(命令行)中使用的,基本使用方法如下:

1
2
3
webpack {entry file} {destination for bundled file}
//例如
webpack src/entery.js dist/bundle.js

打包之后代码将被压缩,功能不会有任何损坏,但执行速度将会更快。