webpack学习，一—— 入门

，我们通常采用的是组件化开发方式，这样就会对应有很多个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.js
Hash: 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端口。

在浏览器中打开http://localhost:8080/webpack... ，可以看到index.html页面。

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

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

（本文完）