webpack2应用级构建配置方案-唐霜

webpac2.0发布之后，我还保持了一【原创不易，请尊重版权】未经授权，禁止复制转载。段时间的1.0版本的使用，但当我打算跟上著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。时代的时候，就不得不研究一下2.0。其实【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】2.0和1.0的用法并没有非常大的不同，著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】最大的不同莫过于配置时，一些选项更换了名未经授权，禁止复制转载。【作者：唐霜】字，所以1.0的配置文件是不能被2.0兼【转载请注明来源】未经授权，禁止复制转载。容的。

我之前的工作，大部分都是专注于compo【本文首发于唐霜的博客】【未经授权禁止转载】nent，而现在，我希望用webpack【作者：唐霜】【未经授权禁止转载】来构建我的应用。所谓“应用级构建”，就是说要直接打包完上【原创不易，请尊重版权】【转载请注明来源】线运行。我自己开发的componer在构建阶段未经授权，禁止复制转载。【版权所有，侵权必究】，采用了js和css分开的方案，js用w【原创不易，请尊重版权】【本文受版权保护】ebpack打包，css则利用gulp-转载请注明出处：www.tangshuang.net原创内容，盗版必究。sass来分离，实际上，这是行得通的，因【原创内容，转载请注明出处】未经授权，禁止复制转载。为一个项目理应把js和css分开管理。不【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net过在这篇文章中，为了技术上的自鸣得意，我著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】还是采用webpack来编译scss打包著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。css。那么我们现在开始吧。

单文件入口转载请注明出处：www.tangshuang.net

原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】

-app |-script |-style |-template |-index.js |-index.html-components-package.json-webpack.config.babel.js-.babelrc

app就是我们本文要构建的项目，comp【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】onents目录下将会放各种组件，这就要本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。用到componer了。而index.j本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。s则是本文的入口文件，也就是说，我们只需著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。要得到一个index.js即可。inde【本文受版权保护】著作权归作者所有，禁止商业用途转载。x.html将使用插件自动插入打包后的文【作者：唐霜】【原创内容，转载请注明出处】件链接。

原创内容，盗版必究。【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。

为什么要单文件入口呢？作为一个项目，你只原创内容，盗版必究。【作者：唐霜】需要关心你的项目内部的代码怎么组织就可以本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net了，不需要关心构建打包的入口文件。入口文原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。件是单独撰写的，在你的项目内部不依赖它，【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。它只是作为打包入口使用。

本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【转载请注明来源】

// index.js
import './style/app.scss'
import 'jquery'import 'bootstrap-sass'
import './script/app.js'

上面就是入口文件了，入口文件告诉构建工具【原创不易，请尊重版权】原创内容，盗版必究。，这个项目的样式、全局依赖、项目本身的脚未经授权，禁止复制转载。【本文首发于唐霜的博客】本各是什么，直接把这个入口文件丢给web【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。pack，webpack就可以得到最终你本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net需要的build文件（js, css, 【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】assets分开）。

【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。【本文受版权保护】著作权归作者所有，禁止商业用途转载。

// webpack.config.babel.js
export default {
  entry: './app/index.js',
  output: {
    filename: 'dist/js/[name].[chunkhash:8].js',
    libraryTarget: 'umd',
  },
}

支持ES6【版权所有】唐霜 www.tangshuang.net

【作者：唐霜】原创内容，盗版必究。【本文受版权保护】

webpack2.x原生支持了impor原创内容，盗版必究。【原创内容，转载请注明出处】t进行模块导入，之所以这样，是因为web【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】pack2有一个令人惊喜的功能：tree本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】 shaking，也就是仅导出被其他模块本文作者：唐霜，转载请注明出处。【未经授权禁止转载】导入的接口。举个例子：

// a.js
export function a() {}
export function b() {}
// b.js
import {a} from './a'

如果项目中只有这两个文件，你在b.js中【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。只用到了a.js中的a()，那么在web原创内容，盗版必究。原创内容，盗版必究。pack打包后的文件里，你会发现导出接口【作者：唐霜】未经授权，禁止复制转载。只有a，没有b，再不使用UglifyJs【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。Plugin优化的情况下，b()函数也不【本文受版权保护】【版权所有，侵权必究】是全局注册，性能消耗比以前导出b而不用要原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net小。如果你使用UglifyJsPlugi【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。n进行优化，会发现最终优化的结果代码里面著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。没有函数b。

这和es6的模块化方案的期待结果是一致的未经授权，禁止复制转载。【作者：唐霜】。但是解决import, export的【未经授权禁止转载】【转载请注明来源】模块化问题之后，并不代表webpack已本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。经可以编译es6代码了。实际上，和以前一【原创内容，转载请注明出处】【转载请注明来源】样，我们还是需要使用babel来编译es【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。6代码，保证得到的代码可以在更低版本的浏著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。览器运行。

{
  //...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        options: {
          presets: [
            ['env', { modules: false }]
          ],
        },
      },
    ],
  },
  optimization: { 
    usedExports: true, 
    sideEffects: true, 
  },
}

【转载请注明来源】

【本文首发于唐霜的博客】

webpack想用上tree-shaki本文版权归作者所有，未经授权不得转载。【作者：唐霜】ng，还要配置：

optimization: {
  usedExports: true,
  sideEffects: true,
},

webpack2默认情况下不允许省略-l本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。oader，不能像1.x时代一样直接使用【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netbabel作为loader值就行。注意上【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net面红色代码，它是一个整体，注意是一个数组【原创内容，转载请注明出处】原创内容，盗版必究。，数组元素类型还不一样。之所以要将mod【版权所有，侵权必究】【原创内容，转载请注明出处】ules设置为false，是防止webp【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。ack的tree shaking功能发挥【本文受版权保护】原创内容，盗版必究。之前，babel把import, exp【版权所有，侵权必究】【原创不易，请尊重版权】ort转码为require，一旦babe【作者：唐霜】【转载请注明来源】l这样做了，tree shaking功能【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。就实现不了了。

【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。

通过上面的配置，你就可以愉快的使用es6【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】代码来写js了。

注意，你虽然可以使用es6代码，但是es未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net6新加入的特性Symbol是浏览器本来没本文作者：唐霜，转载请注明出处。原创内容，盗版必究。有的，也没有polyfill可以用，所以著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。基于Symbol的for..of, &#未经授权，禁止复制转载。【原创不易，请尊重版权】8230;等其实最好还是暂时不用，毕竟你【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。还是想兼容一些稍微更低一点的浏览器版本，【本文受版权保护】著作权归作者所有，禁止商业用途转载。比如IE9. 当然，如果你想强迫用户使用【作者：唐霜】【原创不易，请尊重版权】高版本浏览器，也可以完全不管这个限制。

转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】【本文受版权保护】

在js中直接使用bower compon本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。ents

本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】原创内容，盗版必究。未经授权，禁止复制转载。

基于组件的开发，components很多著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】都通过bower发布，当然，现在很多公司未经授权，禁止复制转载。【未经授权禁止转载】都做了bower转npm，不过我认为bo【原创内容，转载请注明出处】【原创不易，请尊重版权】wer称自己的包为component而非【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】package或module是有道理的，原创内容，盗版必究。转载请注明出处：www.tangshuang.netbower本身是从component出发【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】的。而npm则不管那么多，任何形式的包都【未经授权禁止转载】转载请注明出处：www.tangshuang.net可以。

本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】【本文受版权保护】

如何配置在webpack中使用bower原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】包呢？

import BowerResolvePlugin from 'bower-resolve-webpack-plugin'
export default {
  // ...
  resolve: {
    plugins: [
      new BowerResolvePlugin(),
    ],
    modules: [
      'node_modules',
      'bower_components',
      'components',
    ],
    descriptionFiles: [
      'package.json',
      'bower.json',
    ],
    mainFields: [
      'main',
    ],
  },
}

上面的这个配置有点奇怪的，就是在reso【原创不易，请尊重版权】【转载请注明来源】lve里面还传入了一个plugins。不【作者：唐霜】【本文受版权保护】过你阅读文档就知道，这个plugins是【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】为resolver准备的。通过一个叫bo【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。wer-resolve-webpack-【版权所有，侵权必究】未经授权，禁止复制转载。plugin来解决bower.json中本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。main字段是数组的情况。你去看这个插件【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】的源码，无非是通过对main字段进行检查【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。，获取后缀是.js的文件作为main字段【本文受版权保护】【本文受版权保护】的值。所以这个地方其实还是不是很好，因为【原创内容，转载请注明出处】【转载请注明来源】你可能发现有些bower包main字段不原创内容，盗版必究。本文作者：唐霜，转载请注明出处。规范，把.min.js和.js放在一起了【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net，如果把.min.js放前面，就惨了。所【版权所有，侵权必究】【本文首发于唐霜的博客】有bower包的发布者，都应该按照bow著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。er的specs文档来撰写bower.j【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。son，否则其实是互坑。

本文作者：唐霜，转载请注明出处。【未经授权禁止转载】【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】

文件名hash注入【作者：唐霜】

在前面的配置代码中，你发现在filena【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】me中，我们加入了[chunkhash:8]，[hash]和[chunkhash]不【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net同，[hash]是基于原始文件的，而[c【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】hunkhash]是基于chunk的。c【原创内容，转载请注明出处】【未经授权禁止转载】hunk的概念，你可以简单理解为“一捆文【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】件”，也就是好几个文件如果打包在一起，就原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net是一个chunk，webpack本来就是【本文首发于唐霜的博客】【本文首发于唐霜的博客】打包，所以只要打包，就永远都有chunk【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】。

未经授权，禁止复制转载。【未经授权禁止转载】本文作者：唐霜，转载请注明出处。

下面我们会讲到vendors分离的问题。未经授权，禁止复制转载。【本文首发于唐霜的博客】为什么要使用带hash文件名的文件名呢？【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。主要是为了实现CDN，比如你把你的文件打【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。包成连个，一个是vendors.js一个【作者：唐霜】【本文受版权保护】是main.js，都走CDN。现在你更新本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】了版本，vendors.js完全没变，而转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。main.js改变了，这个时候，由于浏览著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net器的缓存作用，用户只需要下载main.j著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。s就可以了。但是怎么实现呢？就是在文件名著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。中加hash，比如main.xxwwxs【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。2342.js，当你更新了版本，文件的h【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netash值肯定就变了，文件名也就变成了ma【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。in.newhashxxx.js。这样当本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。用户请应用的时候，就会下载这个新的脚本到【本文首发于唐霜的博客】【原创内容，转载请注明出处】本地。vendors也是同样的道理，要是原创内容，盗版必究。【未经授权禁止转载】你没有加入新vendor，可以不用被用户本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】重新下载，当你加入新vendor时，再通本文作者：唐霜，转载请注明出处。原创内容，盗版必究。过改变hash注入到文件名中来实现更新客【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net户端的脚本文件。

【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】【未经授权禁止转载】

[hash]和[chunkhash]的不【版权所有，侵权必究】【本文受版权保护】同就是，如果你的整体文件没有变，只不过改【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。变了vendors的内容，比如你觉得ve转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】ndors.js太大了，把里面几个ven【版权所有，侵权必究】【作者：唐霜】dor分到main.js里面，这个时候打【转载请注明来源】【本文首发于唐霜的博客】包出来两个文件的[hash]是一样的（是著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net原始文件的hash），[chunkhas【本文首发于唐霜的博客】【本文首发于唐霜的博客】h]则不同（是各自chunk的hash）【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。。

【本文受版权保护】著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。未经授权，禁止复制转载。【转载请注明来源】

只需要在输出文件的字符串中使用[chun著作权归作者所有，禁止商业用途转载。【转载请注明来源】khash]作为占位符即可。

实现vendors脚本分离【原创内容，转载请注明出处】

【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】原创内容，盗版必究。

在《【未经授权禁止转载】webpack将依赖和项目分开各自单独转载请注明出处：www.tangshuang.net》一文中，我介绍了使用Dll方案将ven【版权所有，侵权必究】【作者：唐霜】dors从应用自己的逻辑代码中分离出去单【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net独打包的一种方案。但是Dll方案更适合测转载请注明出处：www.tangshuang.net【本文受版权保护】试开发阶段，你想，当你测试的适合，其实更【原创内容，转载请注明出处】【版权所有，侵权必究】多是在写项目本身的逻辑代码，而且每次改完著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】都希望自动刷新一下页码，看到效果。Dll【本文受版权保护】【原创不易，请尊重版权】方案分两步走，第一步打包所有指定的ven原创内容，盗版必究。未经授权，禁止复制转载。dors，这时会得到一个json文件，第本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。二步利用这个json文件，把项目内的代码转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。中对应的那些vendors全部剔除掉，使著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。用webpack内建的json机制让ve【本文受版权保护】转载请注明出处：www.tangshuang.netndors依赖可以被后一个文件识别到。这【转载请注明来源】【版权所有】唐霜 www.tangshuang.net样你每次修改完代码，只需要重复执行第二步【关注微信公众号：wwwtangshuangnet】【作者：唐霜】即可，这样要打包的代码量就小很多了。

本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】未经授权，禁止复制转载。【原创内容，转载请注明出处】

但是本文要介绍【关注微信公众号：wwwtangshuangnet】CommonsChunkPlugin【版权所有，侵权必究】这个插件，它就更适合产品阶段打包，因为它【原创不易，请尊重版权】【原创不易，请尊重版权】每次都会对所有代码进行打包，在打包过程中【原创不易，请尊重版权】原创内容，盗版必究。，通过插件来决定哪些vendors要分离【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。出来。但是你可以很容易发现，就算webp【原创内容，转载请注明出处】原创内容，盗版必究。ack内部有缓存机制，CommonsChunkPlugin【作者：唐霜】分离代码始终要读取所有文件，所以总体效率【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】上讲，肯定还是只重复Dll方案第二步更高【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。一些。不过在应用打包层面，这个就可以不考【作者：唐霜】【转载请注明来源】虑了，因为你现在都打算最后一次打包了，马未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net上就要上线了，还会在乎这几秒钟吗？

【作者：唐霜】【未经授权禁止转载】【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】

{
  // ...
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendors',
      minChunks: (mod, count) => {
        // this is used to pick out vendors
        let resource = mod.resource
        if(resource && (/^.*\.(css|scss)$/).test(resource)) {
          return false
        }
        let context = mod.context
        if(!context) return false
        if(context.indexOf('node_modules') === -1 && context.indexOf('bower_components') === -1) return false
        return true
      },
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest', //But since there are no more common modules between them we end up with just the runtime code included in the manifest file
    }),
  ],
}

这……配置量也太少了吧。就在plugin本文作者：唐霜，转载请注明出处。原创内容，盗版必究。s里面加了两个项目，而且还是重复使用了CommonsChunkPlugin未经授权，禁止复制转载。。配置量虽然少，但是里面的学问却很大。【未经授权禁止转载】

【未经授权禁止转载】本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】

首先还是介绍一下未经授权，禁止复制转载。CommonsChunkPlugin著作权归作者所有，禁止商业用途转载。这个插件的理念吧。这里要涉及webpac【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。k的一个code splitting的概【未经授权禁止转载】原创内容，盗版必究。念。具体请阅读官方文档【本文首发于唐霜的博客】，我这里大致讲下。【未经授权禁止转载】

原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【转载请注明来源】

所谓code splitting（代码切【未经授权禁止转载】【原创内容，转载请注明出处】分）是开发中经常要遇到的问题。当你的项目著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。代码全部打包在一个文件中时，这个文件可能【未经授权禁止转载】原创内容，盗版必究。撑的很大，可能到几M，甚至几十M，虽然我【版权所有】唐霜 www.tangshuang.net【本文受版权保护】们说合并多个js文件的代码到单个文件里面【本文受版权保护】【未经授权禁止转载】，有利于减少http请求并行数量，提高页原创内容，盗版必究。【未经授权禁止转载】面打开速度。但是你这一个文件几十M，你以【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】为中国网速都是千兆光纤吗？要是别人用4G本文作者：唐霜，转载请注明出处。原创内容，盗版必究。，你这是要三两下把别人一个月套餐用完的节【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】奏啊！而且文件的下载时长，虽然受http【原创内容，转载请注明出处】原创内容，盗版必究。影响（http2就不会有这个问题了），但【转载请注明来源】【转载请注明来源】是文件的大小太大，我想下载时长肯定更长啊本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】！所以，原本流行的合并代码的理念，到了w【未经授权禁止转载】【本文首发于唐霜的博客】ebpack的时代，切分理念又开始盛行。转载请注明出处：www.tangshuang.net【未经授权禁止转载】把你的代码切分为2-3个文件，到了htt【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。p2的时代，甚至可以按需加载，这样可以加【原创内容，转载请注明出处】原创内容，盗版必究。快文件下载。

本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。

切分的依据，我简单的定为把所有静态不会修本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。改的第三方依赖作为一个，项目本身的文件作【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】为一个。所以，我们希望打包完之后，在我们转载请注明出处：www.tangshuang.net【转载请注明来源】的dist/js目录下，可以有两个js，【未经授权禁止转载】【本文首发于唐霜的博客】一个是main.js一个是vendors【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net.js。

我们现在再来看上面的配置。【访问 www.tangshuang.net 获取更多精彩内容】

  // ...
  new webpack.optimize.CommonsChunkPlugin({
      name: 'vendors',
      minChunks: (mod, count) => {
        // this is used to pick out vendors
        let context = mod.context
        if(!context) return false
        if(context.indexOf('node_modules') === -1 && context.indexOf('bower_components') === -1) return false
        return true
      },
  }),

这是第一个common chunk。它有转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】一个name和一个minChunks，n本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】ame是指你打算把哪一个chunk切分出著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】来，这里输入了vendors，但是你往前本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。翻，发现我们采用的是单文件入口，没有ve本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】ndors这个入口啊？没关系，我们来看m本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】inChunks。不过可以透露的是，ve【未经授权禁止转载】本文作者：唐霜，转载请注明出处。ndors决定了最后切分出来的文件名。

【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】原创内容，盗版必究。

minChunks本来的意思是，当一个模本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。块在应用的所有代码中被引用了>=m转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】inChunks的时候，才会被split【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】出来。也就是说，如果你把minChunk本文版权归作者所有，未经授权不得转载。【转载请注明来源】s设置为Infinity，那么任何模块都【作者：唐霜】转载请注明出处：www.tangshuang.net不会被单独分出来了，因为引用次数肯定是有【原创内容，转载请注明出处】【未经授权禁止转载】限次啊。如果你设置为1，那所有的模块都会未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】被放到vendors.js中（除了入口文著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】件本身）。总之，它的作用可以让webpa【版权所有，侵权必究】【版权所有，侵权必究】ck决定哪些module要被单独分离出来转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。。

有了这个之后，我们实际上不考虑次数的问题未经授权，禁止复制转载。【本文受版权保护】，我们希望的是，所有在node_modu本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。les和bower_components【转载请注明来源】【本文首发于唐霜的博客】目录下的包都被分出来。所以我们采用了给m【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。inChunks传一个函数的形式来处理。著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】这个函数返回为true，则被分离出来，为原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】false则保留在原来的chunk中。

所以，你现在应该可以看到那个函数了吧。【本文受版权保护】

本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】

接下来，解释为什么有第二个原创内容，盗版必究。CommonsChunkPlugin原创内容，盗版必究。实例。本文版权归作者所有，未经授权不得转载。

原创内容，盗版必究。未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】

虽然【原创不易，请尊重版权】CommonsChunkPlugin著作权归作者所有，禁止商业用途转载。可以帮助我们分离代码出来，但是，我们还会【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net采用hash文件的后缀，这样当你在htm【原创不易，请尊重版权】转载请注明出处：www.tangshuang.netl中引用这个bundle时，文件名不一样【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。，就会下载新的bundle。但是如果你只【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。使用上面的第一个CommonsChunkPlugin【版权所有】唐霜 www.tangshuang.net实例的话，你会发现，每次vendors的【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。文件hash也不一样，所以到最后，你发现本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】你的用户浏览器还是会下载main.[ch【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】unkhash].js和vendors.本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net[chunkhash].js两个文件，本著作权归作者所有，禁止商业用途转载。【作者：唐霜】来打算只更新main.js的，这样用户可【转载请注明来源】【版权所有】唐霜 www.tangshuang.net以更快获取最新代码。这是为什么呢？

本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【原创不易，请尊重版权】

网上有专门的文章来介绍这个问题，上面给的转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】官方文档链接里也有说。大概意思就是web本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。pack内部有缓存机制，每次CommonsChunkPlugin本文作者：唐霜，转载请注明出处。切分代码都会产生新的id号作为缓存，所以【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】每次得到的vendors.js的内容都不【作者：唐霜】【版权所有】唐霜 www.tangshuang.net同，所以每次chunkhash也不同，这著作权归作者所有，禁止商业用途转载。【本文受版权保护】就惨了，CDN的功效失效了。

解决办法就是再在plugins里面加一个【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。new CommonsChunkPlugin。原创内容，盗版必究。

原创内容，盗版必究。【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net【转载请注明来源】

  // 前一个new CommonChunkPlugin
  new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest', //But since there are no more common modules between them we end up with just the runtime code included in the manifest file
  }),

因为转载请注明出处：www.tangshuang.netCommonsChunkPlugin本文作者：唐霜，转载请注明出处。会把这些新产生的id记录在最后一个产生的未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】chunk里面，new一个新的会产生一个本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】新文件，也就是说除了vendors.js转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。和main.js之外，你会发现还有一个m【转载请注明来源】【关注微信公众号：wwwtangshuangnet】anifest.js文件。

原创内容，盗版必究。【本文受版权保护】本文作者：唐霜，转载请注明出处。

只传了一个name，作为bundle文件转载请注明出处：www.tangshuang.net【未经授权禁止转载】名，没有给minChunks规则，这样在【未经授权禁止转载】本文作者：唐霜，转载请注明出处。这个chunk里，不会存在实际的文件业务【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】逻辑代码，只是一个非常小的文件，但是它是原创内容，盗版必究。转载请注明出处：www.tangshuang.net必须的，必须在vendors.js和ma转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netin.js之前被引入到网页。

本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。【未经授权禁止转载】本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。

其实这个方案有一个不好的地方，是会产生三本文作者：唐霜，转载请注明出处。【本文受版权保护】个文件，而且最后这个manifest.j本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.nets根本不是我想要的，我只想要前两个问题。【转载请注明来源】【关注微信公众号：wwwtangshuangnet】但是没办法，webpack内部的一些机制转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。限制了，只能这么做，再说了最后这个文件非【本文首发于唐霜的博客】【原创内容，转载请注明出处】常小，下载速度会非常快。

原创内容，盗版必究。未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。

有了第三个文件的出现，你会神奇的发现，怎原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】么改app里面的业务逻辑代码，vendo著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netrs.js的chunkhash都不变了。【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。这样就起到了我们想要的CDN效果。

把脚本插入到html文档中【转载请注明来源】

【本文首发于唐霜的博客】【作者：唐霜】著作权归作者所有，禁止商业用途转载。

之所以要有这一步，是因为我们可以更快的使著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net用[chunkhash]。如果不自动插入本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。html，那么你必须去看dist/js目原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。下生成的新的js文件，把文件名抄过来，填本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。写到你的index.html中去。但是如【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。果自动生成了html，那么最多ctrl 【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.netc+v一下。如果处理的好，还根本不用自己【版权所有，侵权必究】【版权所有，侵权必究】动手，我们自己来写个模板，让webpac【原创不易，请尊重版权】未经授权，禁止复制转载。k自动插入脚本到html中就可以了。

import HtmlWebpackPlugin from 'html-webpack-plugin'
// ...

export default {
  plugins: [
    // ...
    new HtmlWebpackPlugin({
        filename: 'dist/index.html',
        template: 'app/index.html',
        chunksSortMode: (chunk1, chunk2) => {
          let orders = ['manifest', 'vendors', 'main']
          let order1 = orders.indexOf(chunk1.names[0])
          let order2 = orders.indexOf(chunk2.names[0])
          return order1 > order2 ? 1 : order1 < order2 ? -1 : 0
        },
      }),
  ],
}

其他的都好理解chunksSortMod【未经授权禁止转载】本文作者：唐霜，转载请注明出处。e要解释一下。它的值是一个函数，将会被传本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】入sort方法，Array.sort你应【版权所有，侵权必究】【版权所有，侵权必究】该了解它的效果。之所以要使用chunks转载请注明出处：www.tangshuang.net【作者：唐霜】SortMode参数，是因为如果不传，你【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】会发现插入到index.html的脚本顺【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。序是反的，main.js在最前面，如果直【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net接运行index.html的话，浏览器会【本文受版权保护】【未经授权禁止转载】报错。

【本文受版权保护】【本文受版权保护】【原创不易，请尊重版权】

使用scss【作者：唐霜】

接下来的内容，将会讨论style。在我的【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。项目中，全部使用了scss，所以我需要对【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。我的样式进行预编译和打包处理。配置也非常【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。简单，使用sass-loader即可，当【作者：唐霜】【本文受版权保护】然，需要css-loader配合，开发模【未经授权禁止转载】本文作者：唐霜，转载请注明出处。式下还需要style-loader配合。

【未经授权禁止转载】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】

{
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['css-loader', 'style-loader', 'sass-loader'],
      },
    ],
  },
}

css-loader的作用是使得webp【未经授权禁止转载】本文作者：唐霜，转载请注明出处。ack可以正确识别scss文件路径，包括未经授权，禁止复制转载。【版权所有，侵权必究】@import语法的引用路径。style【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】-loader的作用是可以让最后的css未经授权，禁止复制转载。【未经授权禁止转载】样式直接通过js插入到页面头部，这在开发【作者：唐霜】本文作者：唐霜，转载请注明出处。时非常好用，甚至可以实现热替换。sass著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】-loader的作用不用说，当然是编译s著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。css。

本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net

在scss中直接使用package mo未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。dules

本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】【本文首发于唐霜的博客】

就像在js里面直接import modu未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。le一样，我们可以通过本节的方法，直接在【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。scss中直接使用module，例如：

@import "bootstrap-sass";

这就很屌了，它跟js的用法非常像了。不过本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net要这样用，还得要求被import的mod【作者：唐霜】著作权归作者所有，禁止商业用途转载。ule的package.json文件中使【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net用sass字段指明哪一个是你要用的scs【版权所有，侵权必究】【原创内容，转载请注明出处】s文件，通过这个字段指明，解析成真正的s【版权所有，侵权必究】【原创内容，转载请注明出处】css文件路径。

【未经授权禁止转载】【原创不易，请尊重版权】未经授权，禁止复制转载。【本文受版权保护】【转载请注明来源】

其实sass-loader自己就提供了m【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】odule检索的方法，但是需要在modu【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netle前面加入一个～符号，比如：

原创内容，盗版必究。【未经授权禁止转载】【未经授权禁止转载】未经授权，禁止复制转载。

@import "~bootstrap-sass/assets/stylesheets/_bootstrap.scss";

这种方式是sass-loader自带支持【作者：唐霜】【转载请注明来源】的，不需要插件。不过～只支持引用文件的形【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】式，不支持直接传入module名称，所以【原创内容，转载请注明出处】【本文首发于唐霜的博客】就达不到我们的需求，我们希望@impor著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.nett像js中使用import一样方便。

而有幸，又有一个插件帮助我们完成这个目的【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。，它是一个node-sass的impor【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】ter插件：sass-module-im未经授权，禁止复制转载。原创内容，盗版必究。porter。废话不多说，下面直接进入配【本文受版权保护】【原创不易，请尊重版权】置方法：

【未经授权禁止转载】【转载请注明来源】【转载请注明来源】转载请注明出处：www.tangshuang.net

import SassModuleImporter from 'sass-module-importer'
// ...

export default {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['css-loader', 'style-loader', {
          loader: 'sass-loader',
          options: {
            importer: SassModuleImporter(),
          },
        }],
      },
    ],
  },
}

我们使用到了sass-module-im【原创不易，请尊重版权】【原创不易，请尊重版权】porter这个插件，非常屌。你只需要像未经授权，禁止复制转载。【作者：唐霜】上面这样，传入importer作为sas【本文受版权保护】【未经授权禁止转载】s-loader，sass-loader【本文受版权保护】原创内容，盗版必究。最终会把这个配置项传给node-sass本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。，node-sass又传给libsass【转载请注明来源】【版权所有，侵权必究】，总之它生效了，你直接可以像前面说的一样原创内容，盗版必究。【原创不易，请尊重版权】使用bootstrap-sass了。

【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】

import 'module/subdir/subsubdir/file.js'

在sass里面怎么搞？如你想象，直接引用【本文受版权保护】本文版权归作者所有，未经授权不得转载。文件即可：

著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。转载请注明出处：www.tangshuang.net【作者：唐霜】

@import "bootstrap-sass/assets/stylesheets/_bootstrap.scss";

是不是很神奇。这让我们非常轻松的在js和【原创不易，请尊重版权】【原创不易，请尊重版权】scss的module引入写法之间无缝切转载请注明出处：www.tangshuang.net原创内容，盗版必究。换。

有一个点需要稍微阐述一下，sass-mo【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】dule-importer这个插件会检索【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netnode_modules和bower_c本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】omponents目录下的所有包。当你只本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net是import包名的时候，如果是在nod转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。e_modules目录下，就会去找pac【本文受版权保护】【原创内容，转载请注明出处】kage.json，去查main, sa【作者：唐霜】原创内容，盗版必究。ss, style这几个字段，找到scs【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.nets文件路径，如果package.json本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net中这几个字段都没有对应的scss文件入口【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】，那么编译就会报错。同样的情况，在bow【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。er_components中，因为我们可【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。以让main字段以数组的形式展示，所以插【作者：唐霜】转载请注明出处：www.tangshuang.net件会先去查找bower.json中的ma著作权归作者所有，禁止商业用途转载。【转载请注明来源】in字段，如果没有找到对应的scss文件【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。入口，也会报错。所以在你自己发布一个包的【关注微信公众号：wwwtangshuangnet】【作者：唐霜】时候，应该注意这个点。

不过有些组件没有提供pacakge.js【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。on的sass字段，你也只能选这种方案。原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】所以根据你自己的情况来选择吧。

【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】【作者：唐霜】

补充：后来我发现，其实并不需要借助sas【转载请注明来源】本文版权归作者所有，未经授权不得转载。s module importer插件，【作者：唐霜】本文作者：唐霜，转载请注明出处。sass-loader的配置选项中有一个转载请注明出处：www.tangshuang.net【转载请注明来源】includePaths可以进行配置，这转载请注明出处：www.tangshuang.net【转载请注明来源】个选项告诉sass-loader把哪些文原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。件目录作为查找的根目录，所以要实现这一小转载请注明出处：www.tangshuang.net【未经授权禁止转载】节的需求，不再需要插件，而是直接如下配置未经授权，禁止复制转载。【原创内容，转载请注明出处】：
【本文首发于唐霜的博客】原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。
export default {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['css-loader', 'style-loader', {
          loader: 'sass-loader',
          options: {
            includePaths: [
              path.resolve(__dirname, 'node_modules'),
              path.resolve(__dirname, 'bower_components'),
            ],
          },
        }],
      },
    ],
  },
}
通过上面的配置，sass-loader可【版权所有，侵权必究】未经授权，禁止复制转载。以直接在这两个文件夹中搜索要找的scss【转载请注明来源】【关注微信公众号：wwwtangshuangnet】 module，这样就不需要~符帮助。
【作者：唐霜】【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】【本文受版权保护】【未经授权禁止转载】

将样式保存到独立的css文件【版权所有】唐霜 www.tangshuang.net

【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。

前面提到过，单文件入口的好处是，你可以直【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】接从入口文件中知道你的项目所用到的样式有未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net哪些，不过虽然入口是单一的，但是最终出来【作者：唐霜】原创内容，盗版必究。的文件可必须是分开的，这样才能充分发挥各本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net自的优势。
【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。前面已经实现了vendors js的切未经授权，禁止复制转载。【原创不易，请尊重版权】分，现在，我们要把所有css从js里面分【转载请注明来源】本文作者：唐霜，转载请注明出处。离出来。前面忘记说两件事：

通过css-loader打包的css，会原创内容，盗版必究。【未经授权禁止转载】被全部放在js文件里面，当做一个模块，再本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net由style-loader加载到页面中，【原创不易，请尊重版权】【本文受版权保护】这跟我们直接在js里面写css有点像

【作者：唐霜】

本文版权归作者所有，未经授权不得转载。

原创内容，盗版必究。

转载请注明出处：www.tangshuang.net

如果你的vendors里面也有样式，比如本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】你的某个vendor就是使用requir本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】e(‘./xx.css本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】217;)，你怎么办？只能让它打包进js【版权所有，侵权必究】【原创内容，转载请注明出处】里面咯。

原创内容，盗版必究。

著作权归作者所有，禁止商业用途转载。

【原创不易，请尊重版权】

本文作者：唐霜，转载请注明出处。

著作权归作者所有，禁止商业用途转载。

上面说的第2点再展开一下。之前在开发co【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】mponer的时候使用了一个插件，可以把【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】bower里面的css也引进来，跟本文的【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。实现不一样，它可以把main字段里面的c【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。ss文件也require进来，这样打包的本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net时候，就不会把css漏掉，这其实挺好的。
【本文首发于唐霜的博客】【本文首发于唐霜的博客】但是，现在我们要把所有打包进来的css原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。给分离出去，到一个单独的css文件中，作【转载请注明来源】【版权所有，侵权必究】为静态文件保存。少说废话，直接看配置：

未经授权，禁止复制转载。【本文首发于唐霜的博客】【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。

import ExtractTextPlugin from 'extract-text-webpack-plugin'
export default {
  entry: './app/index.js',
  output: {
    filename: 'dist/js/[name].[chunkhash:8].js',
    libraryTarget: 'umd',
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          use: ['css-loader', {
              loader: 'sass-loader',
              options: {
                importer: SassModuleImporter(),
              },
            },
          ],
          fallback: 'style-loader',
        }),
      },
    ],
  },
  // ...  
  plugins: [
    new ExtractTextPlugin({
      filename: 'dist/css/[name].[chunkhash:8].css',
      allChunks: true,
    }),
  ],
}

我们用到了extract-text-we【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。bpack-plugin这个插件。它分两【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。个步骤，一个是在plugins里面实例化原创内容，盗版必究。【原创不易，请尊重版权】，另一个是在loader中调用extra著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】ct方法。extract方法的参数其实又【本文受版权保护】【原创不易，请尊重版权】是loaders，表示在提取css之前应【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。该做什么预处理。要保存成什么文件，在ne【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。w实例化的时候传入一个filename来本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net确定。上面有一个fallback，把st转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。yle-loader传给了它，这个动作的本文版权归作者所有，未经授权不得转载。【作者：唐霜】意思是，extract默认情况下先css【本文受版权保护】本文作者：唐霜，转载请注明出处。-loader再sass-loader编本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。译，如果一切顺利的话，结束之后把css导著作权归作者所有，禁止商业用途转载。【转载请注明来源】出到规定的文件去。但是如果不顺利怎么办，【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net继续使用style-loader，把cs【本文受版权保护】未经授权，禁止复制转载。s混在js里面。

【本文首发于唐霜的博客】【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。

切分大型css文件【原创不易，请尊重版权】

和code splitting一样，当你原创内容，盗版必究。【未经授权禁止转载】的css文件超大时，也会导致下载要花很长【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】的时间。所以，切分这种超大型的css文件【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。也是有必要的。比如我们前面的例子，把bo转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netotstrap-sass编译出来，本身也【转载请注明来源】转载请注明出处：www.tangshuang.net就很大了，虽然下文我们会讲压缩优化之内的本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net，但是最后如果所有css都在一个文件，还转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net是比较恐怖。所以，我们还要想办法进行sp本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】lit。幸好，我又找到了一个插件来实现：

【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】

import CSSSplitWebpackPlugin from 'css-split-webpack-plugin'

{
  plugins: [
    new CSSSplitWebpackPlugin({
      size: 4000,
      filename: 'dist/css/[name]-part[part].css',
      preserve: true,
    }),
  ],
}

使用方法也很简单，而且可以和extrac转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.nett-text-webpack-plugi【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netn一起使用，sourcemap也会自己按本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】照切分进行切分。上面蓝色的配置项需要注意本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】一下，size: 4000不是说spli著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。t后的文件大小为4000，而是说一个pa转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】rt的文件包含多少条css规则。file【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。name里面不能使用[hash][chu本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。nkhash]等，只有[name]和[p【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】art]两个可选项。preserve: 【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。true的意思是，保留原始文件，为fal【未经授权禁止转载】转载请注明出处：www.tangshuang.netse的话，只有所有part文件，原始文件【作者：唐霜】原创内容，盗版必究。和原始sourcemap会被删除。

补充：有没有办法不打包vendors的s【关注微信公众号：wwwtangshuangnet】【转载请注明来源】tyle呢？比如说，我不想把vendor【转载请注明来源】著作权归作者所有，禁止商业用途转载。s的scss打包到我的项目样式里面去，而【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】是单独引用vendors里面自己提供的c【原创内容，转载请注明出处】【未经授权禁止转载】ss。毕竟css和js是不一样的，css【作者：唐霜】转载请注明出处：www.tangshuang.net是一次性加载，不驻留内存的，所以通过把c【原创内容，转载请注明出处】原创内容，盗版必究。ss link标签移除可以实现移除样式的著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。目的，但是js不行，执行完之后就驻留内存本文版权归作者所有，未经授权不得转载。【本文受版权保护】，删除js引用没有半毛作用。那么实际上，【原创不易，请尊重版权】【转载请注明来源】切分css反而变得简单了，它不存在相互之原创内容，盗版必究。本文作者：唐霜，转载请注明出处。间的引用问题，随便在样式里面的哪个地方，本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。都可以断开来。

转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。

但是，想要通过webpack把vendo著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】rs的scss单独打包却不是很容易。sc未经授权，禁止复制转载。【转载请注明来源】ss有一个重要的机制，就是继承。倘若你要【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。从某个vendor中继承某些特性，那么必【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net须引用拥有该特性的文件，而且在sass编【未经授权禁止转载】【本文受版权保护】译的时候，这个引用必须存在，而编译完之后【作者：唐霜】【本文首发于唐霜的博客】整个文件就已经出来了。所以，实际上，sa本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。ss-loader调用node-sass未经授权，禁止复制转载。【原创内容，转载请注明出处】，node-sass调用libsass，【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】sass的编译过程跟webpack没有半【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net毛钱关系，所以你不可能写一个webpac未经授权，禁止复制转载。【原创不易，请尊重版权】k插件来实现sass编译过程中的某些控制原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。。所以，想要在编译的时候，保持这个@im未经授权，禁止复制转载。【未经授权禁止转载】port的继承源，同时在编译结束的时候又【未经授权禁止转载】转载请注明出处：www.tangshuang.net把两者分开，是比较困难的。

我今早写了一个【关注微信公众号：wwwtangshuangnet】Note【访问 www.tangshuang.net 获取更多精彩内容】，就是讲解决这个问题的思路。简单的说就是原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】，不能直接@import “转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。module”，而是应该im本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netport一个具体的入口scss文件，而这【作者：唐霜】著作权归作者所有，禁止商业用途转载。个scss文件只提供变量、函数等的出口，【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net而不产生实际的css规则。这样，当你im未经授权，禁止复制转载。【原创不易，请尊重版权】port这个入口scss文件之后，虽然编【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。译实际上还是会引用这个scss，但是编译本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。的结果中没有任何module的css输出未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。，因为你只是引入了当前你的项目文件中需要未经授权，禁止复制转载。未经授权，禁止复制转载。的一些scss全局变量之类的。

【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net【未经授权禁止转载】

分离font、image等assets转载请注明出处：www.tangshuang.net

本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】【本文受版权保护】【原创不易，请尊重版权】

当你的样式里面有字体、图片等，就很复杂了【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。，特别是当这些图片、字体的引用路径跟你的【本文受版权保护】未经授权，禁止复制转载。实际路径发生错位时，真是一点办法都没有。本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。举一个例子：

// style/index.scss
@import "libs/_fonts.scss";
@import "libs/_icons.scss";
// style/libs/_icons.scss...
.icon-tel {
  background: url(../img/icons.png);
}

你可以发现这里引用了一张图片，而且它的路【版权所有，侵权必究】【转载请注明来源】径是相对于_icons.scss的，而非【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】index.scss的，我们可以使用fi著作权归作者所有，禁止商业用途转载。【作者：唐霜】le-loader来引用这个图片文件，但【转载请注明来源】【原创不易，请尊重版权】是问题是，路径问题怎么解决。这可能你还可转载请注明出处：www.tangshuang.net【转载请注明来源】以通过自己在写代码的时候注意，但是一些第【本文首发于唐霜的博客】【未经授权禁止转载】三方的组件你怎么办？比如bootstra著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。p-sass里面，有大量的字体文件引用，【本文首发于唐霜的博客】【原创内容，转载请注明出处】而且它也是使用的相对路径，你真是没办法。

【本文受版权保护】著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。未经授权，禁止复制转载。

不幸中的万幸，有大神开发了一个resol本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】ve-url-loader解决了这个问题转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】。使用了这个loader，就可以实现无论【转载请注明来源】原创内容，盗版必究。你的样式引用路径怎么变，都是基于你被引用【转载请注明来源】【原创内容，转载请注明出处】的那个文件来查找资源。这样就不会出现上面本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。的路径问题了。不过，它的配置稍微有点复杂著作权归作者所有，禁止商业用途转载。【转载请注明来源】。

【转载请注明来源】原创内容，盗版必究。原创内容，盗版必究。原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】

import ExtractTextPlugin from 'extract-text-webpack-plugin'
export default {
  entry: './app/index.js',
  output: {
    filename: 'dist/js/[name].[chunkhash:8].js',
    libraryTarget: 'umd',
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
              },
            },
            {
              loader: 'resolve-url-loader',
              options: {
                sourceMap: true,
                keepQuery: true,
              },
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true,
                importer: SassModuleImporter(),
              },
            },
          ],
          fallback: 'style-loader',
        }),
      },
      {
        test: /\.woff2?$|\.(ttf|eot)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:16].[ext]',
          outputPath: 'dist/font/',
          publicPath: url => url.replace('dist/font/', '../font/'),
        },
      },
      {
        test: /\.(svg|png|jpg|jpeg|gif)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:16].[ext]',
          outputPath: 'dist/img/',
          publicPath: url => url.replace('dist/img/', '../img/'),
        },
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin({
      filename: 'dist/css/[name].[chunkhash:8].css',
      allChunks: true,
    }),
  ],
}

上面的红色部分必须注意，其中source转载请注明出处：www.tangshuang.net【作者：唐霜】Map必须true，它是resolver转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】-url-loader找到正确路径的依据【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。，如果不设置为true，就找不到正确的路著作权归作者所有，禁止商业用途转载。【作者：唐霜】径。而且是sass-loader一定要设【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】置。

原创内容，盗版必究。【原创不易，请尊重版权】未经授权，禁止复制转载。【原创不易，请尊重版权】

file-loader的publicPa【转载请注明来源】【转载请注明来源】th配置项比较复杂。一般，我们会传一个字转载请注明出处：www.tangshuang.net原创内容，盗版必究。符串给它，但是这里不能传字符串，因为有一【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。个路径问题，如果你传字符串，它会跟out未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netputPath组合起来，成为资源的url本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。的前缀。而我们这里传入了一个函数，通过替【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net换的方式，把url前缀给处理掉了，这样，【本文受版权保护】本文作者：唐霜，转载请注明出处。css文件里面的各个资源url就可以正确转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】引用了。

【原创内容，转载请注明出处】【转载请注明来源】【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。

优化压缩代码未经授权，禁止复制转载。

本文作者：唐霜，转载请注明出处。【未经授权禁止转载】【本文受版权保护】转载请注明出处：www.tangshuang.net

转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】【转载请注明来源】

{
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
        minimize: true,
        comments: false,
    }),
  ]
}

优化提炼出来的css比较难办，因为css【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。是从脚本里面提炼出来的，很难进行处理。还本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net好，我们有插件可以帮忙，我们使用一个叫o【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.netptimize-css-assets-w【未经授权禁止转载】【原创内容，转载请注明出处】ebpack-plugin的插件来处理：

著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。原创内容，盗版必究。

import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin'
// ...
export default {
  plugins: [
    new OptimizeCssAssetsPlugin(),
  ]
}

optimize-css-assets-转载请注明出处：www.tangshuang.net【作者：唐霜】webpack-plugin内部使用了c【转载请注明来源】原创内容，盗版必究。ssnano来优化css，而cssnan原创内容，盗版必究。原创内容，盗版必究。o内部又调用了postcss，所以如果你【本文受版权保护】本文作者：唐霜，转载请注明出处。对这两个工具比较熟的话，可以在后文的配置【作者：唐霜】【原创不易，请尊重版权】的地方更清楚一点。

未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。

总之，通过上面两步操作，js被优化了，而【未经授权禁止转载】【未经授权禁止转载】且还享受了webpack的tree sh转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】aking功能，css也优化了，享受cs【未经授权禁止转载】本文作者：唐霜，转载请注明出处。snano带来的至极体验。

sourcemap问题未经授权，禁止复制转载。

转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。

启用sourcemap涉及的地方还挺多：

export default {
  output: {
    sourceMapFilename: '[file].map',
  },
  devtool: 'source-map',
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
        minimize: true,
        comments: false,
        sourceMap: true,
    }),
    new OptimizeCssAssetsPlugin({
        cssProcessorOptions: {
          map: {
            inline: false,
          },
          discardComments: {
            remove: comment => comment[0] !== '#',
          },
        },
    }),
  ],
}

蓝色的[file]要注意，因为我们需要j【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】s和css的sourcemap分开，所以【原创内容，转载请注明出处】【本文首发于唐霜的博客】，我们不能把sourcemapFilen未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netame设置为[name].js.map，未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。这样的话你会发现，[name].js.m【作者：唐霜】本文作者：唐霜，转载请注明出处。ap最终其实是css的sourcemap转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。，js的sourcemap被这个文件覆盖【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。了。而使用[file].map的话，cs著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】s的sourcemap会和css同一个目本文作者：唐霜，转载请注明出处。【作者：唐霜】录。

下面两个插件配置中的红色部分也很重要，特【作者：唐霜】本文版权归作者所有，未经授权不得转载。别是optimize-css-asset【本文受版权保护】本文版权归作者所有，未经授权不得转载。s-webpack-plugin这个插件【未经授权禁止转载】【本文首发于唐霜的博客】，它最终会调用postcss，而post【版权所有，侵权必究】【转载请注明来源】css对sourcemap又非常敏感，不本文版权归作者所有，未经授权不得转载。【转载请注明来源】按照我红色标记的配置，会导致你的css中本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】丢失sourcemap的引用。

未经授权，禁止复制转载。【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。

小结未经授权，禁止复制转载。

著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】

本文主要涉及的是webpack在应用层面转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】进行打包时的一些相对复杂的问题，而不是开著作权归作者所有，禁止商业用途转载。【转载请注明来源】发过程中的问题，所以可能也比较偏门。但是原创内容，盗版必究。本文作者：唐霜，转载请注明出处。对于工具使用越熟悉，对我们的开发效率也越【本文首发于唐霜的博客】【作者：唐霜】有帮助。我把上面所讲到的所有点融合在一起未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。：

/**
 * webpack.config.babel.js
 * this config file should be used to build production application
 */
import BowerResolvePlugin from 'bower-resolve-webpack-plugin'
import ExtractTextPlugin from 'extract-text-webpack-plugin'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import shell from 'shelljs'
import path from 'path'
import webpack from 'webpack'
import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin'
import SassModuleImporter from 'sass-module-importer'
shell.exec('cd dist && rm -rf *') // 删除上一次打包结果
export default (env, defaults, options = {}) => { //导出函数形式，还可以直接在其他模块中引用
  let config = {
    entry: './app/index.js',
    output: {
      filename: 'dist/js/[name].[chunkhash:8].js',
      libraryTarget: 'umd',
      sourceMapFilename: '[file].map',
    },
    devtool: 'source-map',
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /(node_modules|bower_components)/,
          loader: 'babel-loader',
          options: {
            presets: [['es2015', {modules: false}]],
          },
        },
        {
          test: /\.scss$/,
          use: ExtractTextPlugin.extract({
            use: [
              {
                loader: 'css-loader',
                options: {
                  sourceMap: true,
                },
              },
              {
                loader: 'resolve-url-loader',
                options: {
                  sourceMap: true,
                  keepQuery: true,
                },
              },
              {
                loader: 'sass-loader',
                options: {
                  sourceMap: true,
                  importer: SassModuleImporter(),
                },
              },
            ],
            fallback: 'style-loader',
          }),
        },
        {
          test: /\.woff2?$|\.(ttf|eot)$/,
          loader: 'file-loader',
          options: {
            name: '[hash:16].[ext]',
            outputPath: 'dist/font/',
            publicPath: url => url.replace('dist/font/', '../font/'),
          },
        },
        {
          test: /\.(svg|png|jpg|jpeg|gif)$/,
          loader: 'file-loader',
          options: {
            name: '[hash:16].[ext]',
            outputPath: 'dist/img/',
            publicPath: url => url.replace('dist/img/', '../img/'),
          },
        },
      ],
    },
    resolve: {
      plugins: [
        new BowerResolvePlugin(),
      ],
      modules: [
        'node_modules',
        'bower_components',
      ],
      descriptionFiles: [
        'package.json',
        'bower.json',
      ],
      mainFields: [
        'main',
        'browser',
      ],
      alias: {
        _: 'underscore',
      }, // 这是我项目中的一个处理，仅做参考
    },
    plugins: [
      new webpack.ProvidePlugin({
        jQuery: 'jquery', // for bootstrap-sass，这一点在前面没有讲到过，如果你用bootstrap-sass，需要注意这点
        'window.jQuery': 'jquery', // for angular
      }),
      new webpack.optimize.CommonsChunkPlugin({
        name: 'vendors',
        minChunks: (mod, count) => {
          // this is used to pick out vendors
          let resource = mod.resource
          if(resource && (/^.*\.(css|scss)$/).test(resource)) {
            return false
          }
          let context = mod.context
          if(!context) return false
          if(context.indexOf('node_modules') === -1 && context.indexOf('bower_components') === -1) return false
          return true
        },
      }),
      new webpack.optimize.CommonsChunkPlugin({
        name: 'manifest', //But since there are no more common modules between them we end up with just the runtime code included in the manifest file
      }),
      new webpack.optimize.UglifyJsPlugin({
        minimize: true,
        comments: false,
        sourceMap: true,
      }),
      new ExtractTextPlugin({
        filename: 'dist/css/[name].[chunkhash:8].css',
        allChunks: true,
      }),
      new OptimizeCssAssetsPlugin({
        cssProcessorOptions: {
          map: {
            inline: false,
          },
          discardComments: {
            remove: comment => comment[0] !== '#',
          },
        },
      }),
      new HtmlWebpackPlugin({
        filename: 'dist/index.html',
        template: 'app/index.html',
        chunksSortMode: (chunk1, chunk2) => {
          let orders = ['manifest', 'vendors', 'main']
          let order1 = orders.indexOf(chunk1.names[0])
          let order2 = orders.indexOf(chunk2.names[0])
          return order1 > order2 ? 1 : order1 < order2 ? -1 : 0
        },
      }),
    ],
  }
  return config
}

这就是我写的一个demo，把前文所述的所【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】有知识点集中在了一起。你可以根据自己的项【本文首发于唐霜的博客】【原创不易，请尊重版权】目实际情况来选择使用其中的某个点。
【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。当然，我的表述也可能存在胡扯的地方，你【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。要是发现了，就在下面留言吧！

【本文首发于唐霜的博客】【版权所有，侵权必究】【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。【转载请注明来源】本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。【版权所有，侵权必究】【版权所有，侵权必究】【转载请注明来源】【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net【转载请注明来源】原创内容，盗版必究。转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【转载请注明来源】本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。原创内容，盗版必究。【原创内容，转载请注明出处】【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】原创内容，盗版必究。【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。【本文受版权保护】【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。原创内容，盗版必究。原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【本文受版权保护】【作者：唐霜】【本文受版权保护】原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】

2017-05-11 9246 webpack, 代码优化

唐霜

webpack2应用级构建配置方案