，我们通常采用的是组件化开发方式，这样就会对应有很多个js文件，而打包工具的出现则是为了正确处理这些js文件的依赖关系，并生成一个最终的文件，这样，我们最后只需要加载打包以后的文件就可以了，而无须加载许多单个的js文件。接下来我们就试下多个js文件的打包。

新建一个content.js文件，文件内容如下：

document.write('this is the content from content.js')

将entry.js文件修改如下：

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

打包，执行 webpack ./entry.js bundle.js;

刷新index.html页面，可以看到此时其内容已变成this is the content from content.js。

$ webpack ./entry.js bundle.jsHash: 41ba4af12b1844d7deaf Version: webpack 1.13.3 Time: 45ms Asset Size Chunks Chunk Names bundle.js 1.55 kB 0 [emitted] main [0] ./entry.js 40 bytes { 0} [built] [1] ./content.js 44 bytes { 0} [built]

可以看到，webpack以entry.js文件为入口，而entry.js文件又依赖了content.js，这时webpack就会去加载content.js,最后生成bundle.js。

使用loader

上面的例子中可以看到webpack可以对js文件进行很好的处理，然而我们的项目中通常需要用到一些css文件对样式进行调整。那如何使用webpack对样式文件打包呢，就需要使用loader。

我们首先需要将css文件以js模块的方式加载进来，然后将这些样式应用到dom上。这两个过程对应两个加载器：css-loader和style-loader。这两个模块可以通过npm进行安装，注意安装到当前目录即可，不要加-g。

$ npm install css-loader style-loader

这个命令会在当前目录下创建一个node_modules文件夹，该文件夹包括我们用到的包，css-loader和style-loader。

举例：

step1: 新建一个css文件，style.css

body { background: yellow; }

step2: 修改entry.js如下：

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

step3: 打包

$ webpack ./entry.js bundle.js

刷新页面，可以看到背景变为黄色。

!style!css!./style.css指对style.css文件先使用css-loader进行处理，再通过style-loader进行处理。其中css-loader将css文件进行处理，使其可以作为一个js modules被处理；style-loader则解析当前的样式，并应用到dom上。查看生成的bundle.js可以看到如下代码：

function addStylesToDom(styles, options) { for(var i = 0; i < styles.length; i++) { var item = styles[i]; var domStyle = stylesInDom[item.id]; if(domStyle) { domStyle.refs++; for(var j = 0; j < domStyle.parts.length; j++) { domStyle.parts[j](item.parts[j]); } for(; j < item.parts.length; j++) { domStyle.parts.push(addStyle(item.parts[j], options)); } } else { var parts = []; for(var j = 0; j < item.parts.length; j++) { parts.push(addStyle(item.parts[j], options)); } stylesInDom[item.id] = {id: item.id, refs: 1, parts: parts}; } } } ... function createStyleElement(options) { var styleElement = document.createElement("style"); styleElement.type = "text/css"; insertStyleElement(options, styleElement); return styleElement; }

以上步骤略显繁杂，每次打包需要指定入口文件和生成文件，且在使用加载器时也需要手动配置，很不方便。为了解决这个问题，我们可以使用配置文件来解决，即本文的第四部分。

webpack.config.js

这个文件设定了打包的配置，webpack会自动根据该文件来打包。一个基本的配置文件如下所示：

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

这里指定了三个参数，包括entry,output,module，分别对应了入口文件entry.js,打包生成的文件bundle.js,以及模块加载器。有了配置文件，则可以直接打包：

$ webpack

webpack还支持实时监测文件的变化，并在页面中体现出来，无须每次修改文件都重新编译。只需要在打包的时候设置为watch模式即可。

$ webpack --watch

dev server

webpack还为我们提供了webpack-dev-server,它是一个小型的基于node的express服务器。利用webpack-dev-server我们可以轻松地启动服务。且webpack-dev-server默认采用的是watch模式，也就是说它会自动监测文件的变化，并在页面做出实时更新，我们不需要每次都重新编译。

安装webpack-dev-server

为了方便在命令行中使用，同样全局安装。

$ npm install webpack-dev-server -g

启动

$ webpack-dev-server

默认为8080端口。

在浏览器中打开 ，可以看到index.html页面。

修改content.js文件的内容，比如将内容修改为this is another content，保存文件，可以看到index.html页面自动刷新了。

以上内容对webpack的安装和基本的使用方法做了介绍。后续我还会更深入地去学习，并将学习过程中的知识点记录下来，希望能和大家一同学习进步。

（本文完）