目录
什么是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又出现了。