Webpack之Hello World

QQ: 380800878, 微信: kittenll

最近自己在做一些项目的时候使用Restful和react来做到前后端分离，感受到开发效率的成倍提升，故在此分享一下前端使用webpack作为前端的构建工具。

Webpack是一个前端资源加载，编译，打包工具，可以把多个分散的功能模块javascript, css打包压缩到一个模块当中；合并图片。Webpack使用使用各种的loader来加载编译对应的资源，在网上也有非常多的loader。

0、安装

全局安装：

1

npm install webpack -g

还有一个开发者工具，此工具非常实用，后面介绍：

1

npm install webpack-dev-server -g

也可以使用本地模式随源码一起发行：

1
2
3


npm init
npm install webpack --save-dev
npm install webpack-dev-server --save-dev

随源码一起发行的好处就是不需要别人也强制全局安装，别人拿到源码后直接npm update后即可使用

1、简单使用

在介绍使用配置文件之前，先来看一下官方给出的最简单的编译例子：

新建一个目录hello，进行到hello目录，新建一个javascript文件entry.js，内容如下：

1

document.write("It works.");

然后新建一个index.html文件，内容如下：

1
2
3
4
5
6
7
8


<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

编译entry.js到bundle.js：

1

webpack ./entry.js bundle.js

如果正常编译通过，你会看到如下的输出（这是我自己的输出，你的输出可能会不太一样）：

1
2
3
4
5
6


Hash: a41c6217554e666594cb
Version: webpack 1.13.1
Time: 67ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main
   [0] ./entry.js 29 bytes {0} [built]

使用浏览器打开index.html，你将会看到网页上呈现It works.

2、多文件

现在假设咱们的代码写了非常多，一个文件看起来已经非常长而且混乱不便于维护，这时候就需要把不同的功能代码分开到不同的文件，最终使用webpack编译打包压缩到一个文件。

在hello目录新建一个content.js文件，内容如下：

1

module.exports = "It works from content.js.";

把entry.js修改成下面的内容，这一行是包含content.js的功能，然后写到网页上面：

1

document.write(require("./content.js"));

编译：

1

webpack ./entry.js bundle.js

刷新浏览器打开的index.html，你将会看到如下内容：

1

It works from content.js.

3、CSS

是的你没有看错，webpack也可以加载编译打包压缩css文件。

再来新建一个css文件style.css，内容如下，把内页的背景变成黄色：

1
2
3


body {
    background: yellow;
}

修改entry.js，在原来的内容上面添加一行包含css文件：

1
2


require("!style!css!./style.css");
document.write(require("./content.js"));

继续编译：

1

webpack ./entry.js bundle.js

这时候你会看到一个错误信息：

1
2


ERROR in ./entry.js
Module not found: Error: Cannot resolve module 'style' in ......

是时候loader出场了，因为在entry.js里面require了css代码，但是前面安装的webpack里面不带有css loader，所以编译css的时候会出错，解决办法就是：

1

npm install css-loader style-loader

再编译后，再次刷新浏览器打开的index.html，你将会看到网页的背景颜色全部变成了黄色。

css-loader加载、编译css资源文件，而style-loader会把编译之后的css内容放入到<style>标签内插入到dom的head里面。

在entry.js里面使用了!style!css!./style.css来告诉webpack需要使用css-loader和style-loader来处理style.css，也可以不写!style!css!，而在编译的时候指定，简化entry.js文件如下：

1
2


require("./style.css");
document.write(require("./content.js"));

这时候编译需要指定多一个参数了--module-bind 'css=style!css'：

1

webpack ./entry.js bundle.js --module-bind 'css=style!css'

4、配置文件

webpack使用的配置文件名是webpack.config.js，在hello新建此文件，内容如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" }
        ]
    }
};

entry：是入口程序，从哪个文件开始编译 output：指定编译后的输出目录和文件名 module里面的loaders数组指定各种loader，处理各种css, image, url, ttf等待文件。

这里指定的入口是entry.js文件，输出到当前目录的bundle.js文件，如果碰到代码require的css代码（在test处配置，这后面可以写任何js的正则表达式），使用style-loader和css-loader加载编译。

编译：

1

webpack

有了配置文件这里只需要使用一个webpack的命令就可以进行编译，省了不少打字的时间。

5、watch

现在在命令行里面输入：

1

webpack --watch

然后修改一下代码，webpack会实时的帮你编译，是不是又省了不少打字的时间。

6、webpack-dev-server

这是一个神器，特别是结合React的时候可以做到源代码修改的时候，不需要刷新浏览器就可以看到修改后的结果，这又省了不少时间，还可以做到可视化编程。费话不多说，首先需要安装：

npm install webpack-dev-server -g

命令行会输出类似如下的内容：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from /Users/Dragon/awesome/Javascript/hello
Hash: ad76e97b228926df8b02
Version: webpack 1.13.1
Time: 812ms
    Asset     Size  Chunks             Chunk Names
bundle.js  11.8 kB       0  [emitted]  main
chunk    {0} bundle.js (main) 9.9 kB [rendered]
    [0] ./entry.js 66 bytes {0} [built]
    [1] ./style.css 927 bytes {0} [built]
    [2] ./~/.0.23.1@css-loader!./style.css 197 bytes {0} [built]
    [3] ./~/.0.23.1@css-loader/lib/css-base.js 1.51 kB {0} [built]
    [4] ./~/.0.13.1@style-loader/addStyles.js 7.15 kB {0} [built]
    [5] ./content.js 46 bytes {0} [built]
webpack: bundle is now VALID.

在浏览器输入http://localhost:8080/webpack-dev-server/，在最上方会有一个App ready.的黑条条，下面的iframe加载的就是index.html的内容。

把entry.js修改成如下的内容：

1
2
3


require("./style.css");
document.write(require("./content.js"));
document.write('<br>Hello World!');

回到浏览器你会发现，网页的内容已经改变了，下面多了一行Hello World!。

这个Hello World!有点长，呵呵！^_^

文章目录