使用webpack管理多页应用技巧总结

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

创新互联专注为客户提供全方位的互联网综合服务，包含不限于网站设计、成都做网站、乐山网络推广、重庆小程序开发、乐山网络营销、乐山企业策划、乐山品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联为所有大学生创业者提供乐山建站搭建服务，24小时服务热线：13518219792，官方网址：www.cdcxhl.com

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

  
 
 
       
  
  
  1. webpack {entry file/入口文件}  
    2.    
  
  
  2. {destination for bundled file/存放bundle.js的地方} 
    3.

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

  
 
 
       
  
  
  1. module.exports = { 
    2.    
  
  
  2.           entry:  __dirname + "/development/main.js",//已多次提及的唯一入口文件 
    3.    
  
  
  3.           output: { 
    4.    
  
  
  4.             path: __dirname + "/build",//打包后的文件存放的地方 
    5.    
  
  
  5.             filename: "bundle.js"//打包后输出文件的文件名 
    6.    
  
  
  6.           } 
    7.

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

  
 
 
       
  
  
  1. "scripts": { 
    2.    
  
  
  2.     "start": "webpack"  
    3.    
  
  
  3.     ...... 
    4.    
  
  
  4. }, 
    5.

这就是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规则。

  1. output中的常用参数包括：path/publicPath/filename/chunkFilename。
  2. path参数（只是给webpack用的）表示生成文件的根目录，需要传入一个【文件系统绝对路径】。path参数和后面的filename参数共同组成入口文件的完整路径。
  3. publicPath（是给webpack-dev-server用的）参数表示的是一个【URL路径】（指向生成文件的根目录），用于生成css/js/图片/字体文件等资源的起始路径，会自动加到资源文件的url前面。
  4. path参数其实是针对本地文件系统的，而publicPath则针对的是浏览器；因此，publicPath既可以是一个相对路径（相对当前代码所在文件路径），如示例中的'../../../../build/'，也可以是一个绝对路径如http://www.xxxxx.com/。一般来说，我还是更推荐相对路径的写法，这样的话整体迁移起来非常方便。那什么时候用绝对路径呢？其实也很简单，当你的html文件跟其它资源放在不同的域名下的时候，就应该用绝对路径了，这种情况非常多见于后端渲染模板的场景。
  5. filename参数是生成出来的入口文件的【命名规则】：[name]指代entry配置的key，[hash]与版本有关，每次编译都不一样，但在同一次编译过程中生成的文件它都是一样的，[chunkhash]对每个文件生成hash，与文件内容有关，而与版本无关。
  6. chunkFilename参数也是用来定义生成文件的命名方式，针对除入口文件外的chunk命名。
  7. library参数中的变量[name]就是webpack.DllPlugin中name参数的变量[name]

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

  
 
 
       
  
  
  1. var commonsChunkPlugin = new webpack.optimize.CommonsChunkPlugin({ 
    2.    
  
  
  2.         name: 'commons', // 放共有代码的chunck的唯一标识符（可以在后面filename中用[name]引用） 
    3.    
  
  
  3.         filename: '[name].bundle.js', // 放共有代码的文件名的模板（[name]=CommonsChunkPlugin.name），它的省略值就是[name].js 
    4.    
  
  
  4.         minChunks: 4, // 设定要有4个chunk（即4个入口）都有的代码才会被纳入公共代码，默认在所有入口文件中都出现的代码才会提取。 
    5.    
  
  
  5.         chunks：[],//表示需要在哪些chunk里寻找公共代码进行打包。则默认提取范围为所有的chunk。 
    6.    
  
  
  6. });//最终生成文件的url是ouput.path + CommonsChunkPlugin.filename 
    7.

它的作用在于：在以入口文件为单位打包js的前提下，再进一步去提取入口文件间的共有代码：
1.如果name的值是不存在的chunk，则filename的值不能与现有的入口文件打包后的名字重复：

  • 如果只给了name、filename，就是在<所有入口js>中提取<全部都有>的代码单独打包
  • 如果给minChunks:2，针对<全部都有>，表示限定了在<所有入口js>中找，只有同时在任意2个入口文件中都出现的代码才会被提取单独打包
  • 如果给chunks:['a','b']，针对<所有入口js>，表示只从a、b这两个入口文件中提取<全部都有>的代码单独打包

2.如果name的值是现有chunk（entry.key），就会提取共有代码放到同名的入口文件中（还可以通过filename改变对它打包后的文件名，通过minChunks规定在多少个入口文件中都出现了的代码才算共有代码，通过chunks需要提取共有代码的入口文件范围）。

五、兼容老式的jQuery插件的方式

解决使用老的jquery插件时报$/jQuery未定义错误。原因是我们在require jquery的时候，实际上并不会把jQuery对象设置为全局变量。jquery插件们找不到jQuery对象了，因为在它们各自的上下文环境里，既没有局部变量jQuery（因为没有适配AMD/CMD，所以代码内部就没有写相应的require语句引入依赖），也没有全局变量jQuery。(切记【三种方法不要混用】):
方法一、ProvidePlugin + expose-loader【用ProvidePlugin向插件中引入局部变量jQuery、用expose-loader引入全局变量jQuery】。

  
 
 
       
  
  
  1. var providePlugin = new webpack.ProvidePlugin({ 
    2.    
  
  
  2.     $: 'jquery', 
    3.    
  
  
  3.     jQuery: 'jquery', 
    4.    
  
  
  4.     'window.jQuery': 'jquery', 
    5.    
  
  
  5.     'window.$': 'jquery', 
    6.    
  
  
  6. }); 
    7.

ProvidePlugin的机制是：【当webpack加载到某个js模块里，出现了未定义且名称符合（字符串完全匹配）配置中key的变量时】，会自动require配置中value所指定的js模块。使用ProvidePlugin还有个好处，就是，你自己写的代码里，再！也！不！用require jquery啦!。
expose-loader【将指定js模块export的变量声明为全局变量】。如果你所有的jQuery插件都是用webpack来加载的话，的确用ProvidePlugin就足够了；但总有那么些需求是只能用