webpack入门很简单

目录

什么是webpack

使用webpack需要安装什么

一个简单却又比较全面的例子

为什么会用webpack

随着大前端的来临，传统的MVC架构中的前端只是一个会做交互和静态页的切图仔，但随着WEB架构的变迁，出于项目日益复杂和业务扩展，MV*架构逐渐占领了WEB的光环，其中三大剑客便是Angular,React和Vue，在使用这些js框架开始时，出于代码可维护性的角度出发，不会再像以往那样使用标签引入的方式，而是采用了一种模块的方式去开发，webpack是其中典型的代表。

webpack是什么

webpack是一个模块打包工具，在开发中，各种各样的资源都可以认为是一种独特的模块资源，比如css，js，png，json等。而我们通过webpack，可以将这些资源打包压缩在指定的文件中，需要注意的是，webpack本身是支持js资源的，但我们可以通过loader加载器，来打包除了js之外的资源。Talk is cheap，Let's do it.

在使用webpack打包资源前，我们先来看看怎么搭建webpack开发环境

安装nodejs和npm

nodejs是一种能让js在服务器上跑的运行环境，小伙伴们再也不怕只会js想写后台又得学其他后台语言而烦恼了，npm是nodejs的包管理器，很多社区大神写好的代码，我们想用怎么办，没关系，只要大神把他们的代码上传到npm，我们可以方便的使用，npm install xxx,接下来就是可以在我们的代码上使用了。

安装nodejs

百度nodejs，我们在官网下载合适自己的版本，建议使用左侧的版本，接下来就像安装普通的软件，balabala默认安装就好了，安装了nodejs，软件默认也安装好了npm，接下来我们看看有没有安装成功，在命令行在输入

npm -v

node -v

我们会看到下面的信息

npm version

nodejs version

到这里我们的开发环境就安装好了，接下来开始实战吧

实战

全局安装webpack

npm install -g webpack

初始化我们的文件夹

找到我们的开发目录，在cmd中依次执行

cd D:wampwwwworkspace

d:

mkdir webpack_demo

接下来我们会在文件夹中看见我们的目录

创建文件夹

接下来我们进入切换到我们创建的目录，使用npm初始化我们开发目录

cd webpack_demo

npm init

初始化过程中需要我们填写一下开发目录的一些信息，没有特殊的要求下，我们就是全部选选择默认，接下来我们就会看见文件夹中多了package.json,这个文件夹是用来记录我们在npm仓库中安装了什么代码包和定义一些npm命令用的，现在我们暂时用不着

创建资源模块

接下来我们简单的创建三个文件

src/hello.js

main.js

index.html

接下来我们在这三个文件中写入一些基本内容

index.html很简单，唯一需要注意的就是在代价底部多了一个引入文件bundle.js，这是我们接下来使用webpack打包出阿里的文件。

hello.js前端熟悉的小伙伴们就很好理解了，这里创建了一个p标签节点，给这个节点赋值，让刚刚接触webpack人来说，这里比较陌生的就是

module.exports = function() {}

这是什么东西？简单来说，我们使用webpack开发中，我们需要将各种各样的资源暴露给其他模块使用，在这里使用的是commonjs规范，将一个函数暴露给其他模块，这个函数返回的是一个p标签节点。随便和大家说下，除了commonjs模块开发规范，还有ES6规范和AMD规范，有兴趣可以去了解了解，webpack默认支持commonjs规范。

hello.js

main.js，我们在hellojs模块导出了一个函数，我们怎么使用这个函数呢，mainjs就是我们们接下来要写的，在mainjs中我们同样的使用commonjs规范，将hellojs暴露出来的函数导入进来，导入到该文件的text对象中

const text = require('./hello.js');

接下来我们在mainjs中要做的就是将hellojs暴露出来的函数返回的p节点元素挂载在id为app的节点上

document.querySelector("#app").appendChild(text());

使用webpack打包

写好了个个模块的资源，我们终于可以使用webpack来打包他们了，我们先看看webapck的基本打包命令

webpack {entry file} {destination for bundled file}

entry file是当前cmd目录下入口文件的地址，在这个示例中mainjs为各种各样资源模块的入口，也是唯一的入口，所有的资源最终都会导入到这个入口文件中，这里是将hellojs暴露出来的函数导入到mainjs入口文件中

bundled file是各种各样的资源导入到入口文件mainjs中，通过webpack打包生成能够被html文件直接引入的js文件，在这里我们将资源打包到dist目录下的bundlejs中

webpack main.js dist/bundle.js

webpack打包

执行了这段命令后，我们可以看到dist文件夹下生成了bundlejs文件，接下来是不是迫不及待看看效果，我们使用浏览器打开index.html

打开效果

perfect，完美运行，在这里我们已经会简单使用webpack打包资源了，但每次打包我们都输入

定义webapck命令

长长的代码是不是过于麻烦了，我们可以定义webpack的命令，只需要我们执行webpack便会自动执行打包过程，首先我们创建webpack.config.js文件,目录中我们制定了入口文件和打包生成的文件，单我们执行webpack命令时，webpack会找到webpack.config.js，执行这文件定义好的命令

webpack.config.js

接下来我们把dist目录下的bundlejs删了，执行

webpack

使用npm命令

bundlejs再一次出现在这个文件夹中了，是不是方便多了，这样就够了吗？当然不是，记得我们开始讲到，package.json中除了记录一下安装包的记录外，还可以定义一些npm命令，来执行执行webpack命令

package.json

我们再次删了dist目录下的文件，我们在cmd执行

npm start

发现bundlejs又出现了。