webpack简介

我们都知道，Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

一、安装nodejs

因为Webpack也是基于Nodejs的，当然，首先我们就需要安装nodejs了。

1、直接去官网地址(https://nodejs.org/en/download/)下载安装文件安装即可，跟安装普通软件一样简单。

2、通过如下命令测试是否成功安装nodejs和npm

打开windows命令提示符(在运行中输入cmd即可打开)，输入命令：node -v

回车，出现nodejs的版本号，说明nodejs安装成功。

输入命令：npm -v

回车，出现npm的版本号，说明npm也安装成功了。

说明：因为node安装包中已集成了npm,所以在安装nodejs的同时也安装了npm。

如果你已经安装好Nodejs和npm了，这一步就可以跳过了。

二、 全局安装webpack

用 npm 安装 Webpack，命令如下：

npm install webpack -g

这时，我们已经把webpack 安装到全局环境了，大家可以通过命令行 webpack -v 查看版本号(2.2.1)。

三、 本地项目安装webpack

首先，在安装webpack前，我们先要确保package.json文件已经就绪，如果没有package.json文件，我们先要通过 npm init创建package.json，因为package.json里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等。

然后，我们通过如下命令，将webpack安装到我们项目的依赖中聊，这样我才可以使用项目本地版本的 webpack，命令如下：

npm install webpack --save-dev

到这我们的准备都做好了，下面我们就可以开始用webpack了。

四、使用webpack

在使用webpack，我们先创建一个项目，本例是通过如下命令创建的，当然大家可以通过手动创建的方法创建的。

最后生成的项目如图所示：

说明：

1、src，是本例用来存放源文件的目录(也就是没有打包的文件)，里面的scripts存放js等文件，style是存放css文件。

2、dist，是本例用来存放打包后文件的目录。

为了演示如何使用webpack，我们先来创建1个js文件hello.js和index.html，一个样式style.css。

hello.js代码如下：

function yuan(){

var yuan="我是一个js文件啊，刚被创建";

document.getElementById("yuan").innerHTML=yuan;

}

yuan();

index.html:

Document

style.css

body{

margin: 0;

padding: 0;

}

#yuan{

width: 300px;

height: 100px;

background: red;

color: #fff;

font-size: 20px;

font-weight: 600;

text-align: center;

margin: 0 auto;

}

下面我们来使用webpack打包我们的文件hello.js ,如下的命令

webpack src/scripts/hello.js dist/js/build.js

如上图所示：说明我们把helloj.s打包成功了，此时，我们发现我们的dist/js目录下已经有了build.js了。如图所示

以上是我们最简单的使用webpack的方法，只是简简单单地打包一个文件，下面，我们来多增加一个文件main.js，然后再把style.css也打包进去(webpack可以把css打包到js文件里的，是不是很奇怪？放心吧，它就这么干的，后面你就会慢慢知道了)，先来看是如何使用的？

main.js原代码

function yuan1(){

var yuan1="我是的第二个函数";

console.log(yuan1);

}

这时我们来把main.js作为入口文件改改，改为

require("./hello.js");

require("style-loader!css-loader!../style/style.css");

function yuan1(){

var yuan1="我是的第二个函数,现在我是入口文件了";

console.log(yuan1);

}

这个时候，你会发现，啥？怎么引入css多个style-loader、css-loader了？

其实是，在webpack中，我们想在js文件中通过require的方式来引入css，那就需要通过css-loader来实现。而style-loader的作用是在html中以style的方式嵌入css(到时候我们引用的这个style.css文件会直接插入到index.html的head标签里)。如果不引入这些loader去处理，那么我们直接require(“../style/style.css”)，那么会报错的。

我们在使用style-loader、css-loader之前，先要安装好它们，下面我们通过如下命令安装它们，

npm install css-loader style-loader --save-dev

当我们引入好以后，然后我们就可以在命令里运行了：(这时我们是main.js)

webpack src/scripts/main.js dist/js/new-build.js

如图所示：打包成功了

这时你会发现在我们的new-build.js里，多了main.js的代码和css的代码，css代码如下

// module

exports.push([module.i, "body{\r\n margin: 0;\r\n padding: 0;\r\n}\r\n#yuan{\r\n width: 300px;\r\n height: 100px;\r\n font-size: 20px;\r\n font-weight: 600;\r\n text-align: center;\r\n margin: 0 auto;\r\n}\r\n", ""]);

为了看效果，我们把index.html的引用文件改为new-build.js。打开index.html，效果如图：

如上图所示，查看我们的源代码：是不是已经把style.css里面的样式添加到head里了。

五、后记

上面的main.js，我们是直接在require里写入css-loader和style-loader的(require(“style-loader!css-loader!../style/style.css”))，

其实我们还可以在webpack.config.js配置文件中使用

{ test: /\.css$/, loader: ‘style-loader!css-loader’ }

详细内容后续会记录。

有时候我们不断的修改css或者js，需要不断地在命令行输入这些命令进行打包，挺繁琐的，那有没有简单的方法，不用每次都输入，修改完成后文件后自动打包更新呢？可以的，在上面基础上，我们可以在命令后面加上–watch，如下：

webpack src/scripts/main.js dist/js/new-build.js --watch

此后，我们可以随时修改我们的css和js文件了，然后watch会自动监控这些更新，然后打包，我们只需在浏览器刷新我们的index.html就马上可以看到效果了。