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的安装和基本的使用方法作了介绍。后续我还会更深刻地去学习，并将学习过程当中的知识点记录下来，但愿能和你们一同窗习进步。

（本文完）