随着前端功能不断丰富，前端代码也越来越复杂难以管理。为了简化开发的复杂度，出现了众多新的处理技术：模块化、组件化、css预处理器（less,scss）等，它们提高了我们开发效率，但众多模块文件的处理打包还是会非常繁琐的。

Webpack是一个nodejs工具，它的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。

webpack {entry file/入口文件}  

{destination for bundled file/存放bundle.js的地方} 

编写它的默认配置文件webpack.config.js，加入简单配置就可以简化上面的命令为webpack(非全局安装需使用node_modules/.bin/webpack)：

module.exports = { 

          entry:  __dirname + "/development/main.js",//已多次提及的唯一入口文件 

          output: { 

            path: __dirname + "/build",//打包后的文件存放的地方 

            filename: "bundle.js"//打包后输出文件的文件名 

          } 

接上一步，继续修改该node的配置文件package.json，加入如下配置就可以使用更简单的命令npm start：

"scripts": { 

    "start": "webpack"  

    ...... 

}, 

这就是webpack的简单用法了，下面开始详细介绍webpack的配置文件。

一、.webpack的配置文件其实就是一个node的module，用commonJS风格编写。默认名为webpack.config.js，要自定义配置文件名可以在webpack命令中指定（显然不能写到配置文件中）：

webpack --config ./webpackConfig/dev.config.js 

默认会以当前目录为基本目录（可以通过--content-base来更换基本目录）,webpack-dev-server生成的包并没有放在你的真实目录中,而是放在了内存中。可以另外开一个cmd，使用监控命令来输出到磁盘：

webpack --watch

二、entry段

可以是字符串（单入口），可以是数组（多入口），但为了后续发展，建议【使用object】。entry.value是入口文件或者内置模块名，entry.key就是output.filename中的[name]变量的值。

entry值是字符串或者数组时时，output中没有变量[name]，entry值是对象时，output中才有变量[name]。

entry值是数组，表示把数组中的所有js文件内容都打包到一个js文件内作为入口js文件。

entry的值是对象，表示这是一个多页面应用，对象里每一个属性代表一个入口js文件配置。属性的值还可以是数组，表示数组中的文件都会被打包到同一个文件中，一般用来打包合并第三方插件代码到同一个js文件，减少网络请求次数。

三、output段

相当于【一套规则】，所有的入口都必须使用这一套规则，不能针对某一个特定的入口来制定output规则。

output中的常用参数包括：path/publicPath/filename/chunkFilename。

path参数（只是给webpack用的）表示生成文件的根目录，需要传入一个【文件系统绝对路径】。path参数和后面的filename参数共同组成入口文件的完整路径。

publicPath（是给webpack-dev-server用的）参数表示的是一个【URL路径】（指向生成文件的根目录），用于生成css/js/图片/字体文件等资源的起始路径，会自动加到资源文件的url前面。

path参数其实是针对本地文件系统的，而publicPath则针对的是浏览器；因此，publicPath既可以是一个相对路径（相对当前代码所在文件路径），如示例中的'../../../../build/'，也可以是一个绝对路径如。一般来说，我还是更推荐相对路径的写法，这样的话整体迁移起来非常方便。那什么时候用绝对路径呢？其实也很简单，当你的html文件跟其它资源放在不同的域名下的时候，就应该用绝对路径了，这种情况非常多见于后端渲染模板的场景。

filename参数是生成出来的入口文件的【命名规则】：[name]指代entry配置的key，[hash]与版本有关，每次编译都不一样，但在同一次编译过程中生成的文件它都是一样的，[chunkhash]对每个文件生成hash，与文件内容有关，而与版本无关。

chunkFilename参数也是用来定义生成文件的命名方式，针对除入口文件外的chunk命名。

library参数中的变量[name]就是webpack.DllPlugin中name参数的变量[name]

四、用CommonsChunkPlugin【智能】判断提取并打包、出现在入口js文件中的公共代码

var commonsChunkPlugin = new webpack.optimize.CommonsChunkPlugin({ 

        name: 'commons', // 放共有代码的chunck的唯一标识符（可以在后面filename中用[name]引用） 

        filename: '[name].bundle.js', // 放共有代码的文件名的模板（[name]=CommonsChunkPlugin.name），它的省略值就是[name].js 

(责任编辑：admin)