webpack入门



Webpack是目前基于React和Redux开发的应用的主要打包工具。我想使用Angular 2或其他框架开发的应用也有很多在使用Webpack。

当我第一次看到Webpack的配置文件时，它看起来非常的陌生，我非常的疑惑。经过一段时间的尝试之后我认为这是因为Webpack只是使用了比较特别的语法和引入了新的原理，因此会让使用者感到疑惑。这些也是导致Webpack不被人熟悉的原因。

因为刚开始使用Webpack很让人疑惑，我觉得有必要写几篇介绍Webpack的功能和特性的文章以帮助初学者快速理解。此文是最开始的一篇。

Webpack的核心原理

Webpack的两个最核心的原理分别是：

1. 一切皆模块

正如js文件可以是一个“模块（module）”一样，其他的（如css、image或html）文件也可视作模 块。因此，你可以require(‘myJSfile.js’)亦可以require(‘myCSSfile.css’)。这意味着我们可以将事物（业务）分割成更小的易于管理的片段，从而达到重复利用等的目的。

2. 按需加载

传统的模块打包工具（module bundlers）最终将所有的模块编译生成一个庞大的bundle.js文件。但是在真实的app里边，“bundle.js”文件可能有10M到15M之大可能会导致应用一直处于加载中状态。因此Webpack使用许多特性来分割代码然后生成多个“bundle”文件，而且异步加载部分代码以实现按需加载。

好了，下面来看看那些令人困惑的部分吧。

1. 开发模式和生产模式

首先要知道的是Webpack有许许多多的特性，一些是”开发模式“下才有的，一些是”生产模式“下才有的，还有一些是两种模式下都有的。

通常使用到Webpack如此多特性的项目都会有两个比较大的Webpack配置文件

为了生成bundles文件你可能在package.json文件加入如下的scripts项：

“scripts”: {
// 运行npm run build 来编译生成生产模式下的bundles
”build”: “webpack –config webpack.config.prod.js”,
// 运行npm run dev来生成开发模式下的bundles以及启动本地server
”dev”: “webpack-dev-server”
}

2. webpack CLI 和webpack-dev-server

值得注意的是，Webpack作为模块打包工具，提供两种用户交互接口：

Webpack CLI tool：默认的交互方式（已随Webpack本身安装到本地）
webpack-dev-server：一个Node.js服务器（需要开发者从npm自行安装）
Webpack CLI（有利于生产模式下打包）

这种方式可以从命令行获取参数也可以从配置文件（默认叫webpack.config.js）获取，将获取到的参数传入Webpack来打包。

当然你也可以从命令行（CLI）开始学习Webpack，以后你可能主要在生产模式下使用到它。

用法：

方式1: 
// 全局模式安装webpack
npm install webpack --g
// 在终端输入
$ webpack // <--使用webpack.config.js生成bundle

方式 2 :
// 费全局模式安装webpack然后添加到package.json依赖里边
npm install webpack --save
// 添加build命令到package.json的scripts配置项
"scripts": {
 "build": "webpack --config webpack.config.prod.js -p",
 ...
 }
// 用法：
"npm run build"

webpack-dev-server（有利于在开发模式下编译）

这是一个基于Express.js框架开发的web server，默认监听8080端口。server内部调用Webpack，这样做的好处是提供了额外的功能如热更新“Live Reload”以及热替换“Hot Module Replacement”（即HMR）。

用法：

方式 1:
// 全局安装
npm install webpack-dev-server --save
// 终端输入
$ webpack-dev-server --inline --hot

用法 2:
// 添加到package.json scripts
"scripts": {
 "start": "webpack-dev-server --inline --hot",
 ...
 }
// 运行： 
$ npm start

// 浏览器预览：
http://localhost:8080

Webpack VS Webpack-dev-server选项

注意像inline和hot这些选项是Webpack-dev-server特有的，而另外的如hide-modules则是CLI模式特有的选项。

webpack-dev-server CLI选项和配置项

另外值得注意的是你可以通过以下两种方式向webpack-dev-server传入参数：

1.通过webpack.config.js文件的”devServer”对象
2.通过CLI选项

   
   

     
     

      
      

     
     
     
     

      
      

       
       // 通过CLI传参
       
       
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       webpack
       
       -
       
       dev
       
       -
       
       server 
       
       --
       
       hot 
       
       --
       
       inline
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       // 通过webpack.config.js传参
       
       
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       devServer
       
       :
       
        
       
       {
       
       
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       inline
       
       :
       
        
       
       true
       
       ,
       
       
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       hot
       
       :
       
       true
       
       
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       }
      
      
     
     
   
   

我发现有时devServer配置项（hot: true 和inline: true）不生效，我更偏向使用如下的方式向CLI传递参数：

// package.json
{
"scripts": "webpack-dev-server --hot --inline"
}

注意：确定你没有同时传入hot:true和-hot

webpack-dev-server的“hot” 和 “inline”选项

“inline”选项会为入口页面添加“热加载”功能，“hot”选项则开启“热替换（Hot Module Reloading）”，即尝试重新加载组件改变的部分（而不是重新加载整个页面）。如果两个参数都传入，当资源改变时，webpack-dev-server将会先尝试HRM（即热替换），如果失败则重新加载整个入口页面。

// 当资源发生改变，以下三种方式都会生成新的bundle，但是又有区别：

// 1. 不会刷新浏览器
$ webpack-dev-server
//2. 刷新浏览器
$ webpack-dev-server --inline
//3. 重新加载改变的部分，HRM失败则刷新页面
$ webpack</span><span class="pun" style="color:rgb(102,102,0);">-</span><span class="pln" style="color:rgb(0,0,0);">dev</span><span class="pun" style="color:rgb(102,102,0);">-</span><span class="pln" style="color:rgb(0,0,0);">server  </span><span class="pun" style="color:rgb(102,102,0);">--</span><span class="kwd" style="color:rgb(0,0,136);">inline</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="pun" style="color:rgb(102,102,0);">--</span><span class="pln" style="color:rgb(0,0,0);">hot</span></code></pre><strong style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:22px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">3. “entry”：值分别是字符串、数组和对象的情况</strong><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">Enter配置项告诉Webpack应用的根模块或起始点在哪里，它的值可以是字符串、数组或对象。这看起来可能令人困惑，因为不同类型的值有着不同的目的。</p><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">像绝大多数app一样，倘若你的应用只有一个单一的入口，enter项的值你可以使用任意类型，最终输出的结果都是一样的。</p><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);"><img title="Webpack——解决疑惑,让你明白_" style="border:0px;" alt="图片描述" src="https://img.mukewang.com/57ece0ce0001644608000137.png"></p><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">enter：数组类型</p><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">但是，如果你想添加多个彼此不互相依赖的文件，你可以使用数组格式的值。</p><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">例如，你可能在html文件里引用了“googleAnalytics.js”文件，可以告诉Webpack将其加到bundle.js的最后。</p><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);"><img title="Webpack——解决疑惑,让你明白_" style="border:0px;" alt="图片描述" src="https://img.mukewang.com/57ece0d90001d66408000273.png"></p><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">enter：对象</p><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">现在，假设你的应用是多页面的（multi-page application）而不是SPA，有多个html文件（index.html和profile.html）。然后你通过一个对象告诉Webpack为每一个html生成一个bundle文件。</p><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">以下的配置将会生成两个js文件：indexEntry.js和profileEntry.js分别会在index.html和profile.html中被引用。</p><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);"><img title="Webpack——解决疑惑,让你明白_" style="border:0px;" alt="图片描述" src="https://img.mukewang.com/57ece0e600010de708000356.png"></p><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">用法：</p><pre class="prettyprint" style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);" name="code" onclick="hljs.copyCode(event)"><code class="language-html hljs xml" style="font-size:14px;font-style:normal;font-weight:400;"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="pln" style="color:rgb(0,0,0);">//profile.html</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="tag" style="color:rgb(0,0,136);"><span class="hljs-tag">&lt;<span class="hljs-name">script</span></span></span><span class="pln" style="color:rgb(0,0,0);"><span class="hljs-tag"> </span></span><span class="atn" style="color:rgb(102,0,102);"><span class="hljs-tag"><span class="hljs-attr">src</span></span></span><span class="pun" style="color:rgb(102,102,0);"><span class="hljs-tag">=</span></span><span class="atv" style="color:rgb(0,136,0);"><span class="hljs-tag"><span class="hljs-string">”dist/profileEntry.js”</span></span></span><span class="tag" style="color:rgb(0,0,136);"><span class="hljs-tag">&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">//index.html</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="tag" style="color:rgb(0,0,136);"><span class="hljs-tag">&lt;<span class="hljs-name">script</span></span></span><span class="pln" style="color:rgb(0,0,0);"><span class="hljs-tag"> </span></span><span class="atn" style="color:rgb(102,0,102);"><span class="hljs-tag"><span class="hljs-attr">src</span></span></span><span class="pun" style="color:rgb(102,102,0);"><span class="hljs-tag">=</span></span><span class="atv" style="color:rgb(0,136,0);"><span class="hljs-tag"><span class="hljs-string">”dist/indexEntry.js”</span></span></span><span class="tag" style="color:rgb(0,0,136);"><span class="hljs-tag">&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">注意：文件名取自“entry”对象的键名。</p><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">enter：混合类型</p><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">你也可以在enter对象里使用数组类型，例如下面的配置将会生成3个文件：vender.js（包含三个文件），index.js和profile.js文件。</p><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);"><img title="Webpack——解决疑惑,让你明白_" style="border:0px;" alt="图片描述" src="https://img.mukewang.com/57ece0f30001dd1c08000371.png"></p><strong style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:22px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">4. output：“path”项和“publicPath”项</strong><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">output项告诉webpack怎样存储输出结果以及存储到哪里。output的两个配置项“path”和“publicPath”可能会造成困惑。</p><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">“path”仅仅告诉Webpack结果存储在哪里，然而“publicPath”项则被许多Webpack的插件用于在生产模式下更新内嵌到css、html文件里的url值。</p><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);"><img title="Webpack——解决疑惑,让你明白_" style="border:0px;" alt="图片描述" src="https://img.mukewang.com/57ece12a000128b908000201.png"></p><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">例如，在localhost（译者注：即本地开发模式）里的css文件中边你可能用“./test.png”这样的url来加载图片，但是在生产模式下“test.png”文件可能会定位到CDN上并且你的Node.js服务器可能是运行在HeroKu上边的。这就意味着在生产环境你必须手动更新所有文件里的url为CDN的路径。</p><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">然而你也可以使用Webpack的“publicPath”选项和一些插件来在生产模式下编译输出文件时自动更新这些url。</p><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);"><img title="Webpack——解决疑惑,让你明白_" style="border:0px;" alt="图片描述" src="https://img.mukewang.com/57ece136000153f208000570.png"></p><pre class="prettyprint" style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);" name="code" onclick="hljs.copyCode(event)"><code class="language-css hljs" style="font-size:14px;font-style:normal;font-weight:400;"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="com" style="color:rgb(136,0,0);">// 开发环境：<span class="hljs-selector-tag">Server</span>和图片都是在<span class="hljs-selector-tag">localhost</span>（域名）下</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="pun" style="color:rgb(102,102,0);"><span class="hljs-selector-class">.</span></span><span class="pln" style="color:rgb(0,0,0);"><span class="hljs-selector-class">image</span> </span><span class="pun" style="color:rgb(102,102,0);">{</span><span class="pln" style="color:rgb(0,0,0);"> </span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  <span class="hljs-attribute">background</span><span class="pun" style="color:rgb(102,102,0);"><span class="hljs-attribute">-</span></span><span class="pln" style="color:rgb(0,0,0);"><span class="hljs-attribute">image</span></span><span class="pun" style="color:rgb(102,102,0);">:</span><span class="pln" style="color:rgb(0,0,0);"> <span class="hljs-built_in">url</span></span><span class="pun" style="color:rgb(102,102,0);">(</span><span class="str" style="color:rgb(0,136,0);"><span class="hljs-string">'./test.png'</span></span><span class="pun" style="color:rgb(102,102,0);">);</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="pun" style="color:rgb(102,102,0);">}</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="com" style="color:rgb(136,0,0);">// 生产环境：<span class="hljs-selector-tag">Server</span>部署下<span class="hljs-selector-tag">HeroKu</span>但是图片在<span class="hljs-selector-tag">CDN</span>上</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="pun" style="color:rgb(102,102,0);"><span class="hljs-selector-class">.</span></span><span class="pln" style="color:rgb(0,0,0);"><span class="hljs-selector-class">image</span> </span><span class="pun" style="color:rgb(102,102,0);">{</span><span class="pln" style="color:rgb(0,0,0);"> </span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  <span class="hljs-attribute">background</span><span class="pun" style="color:rgb(102,102,0);"><span class="hljs-attribute">-</span></span><span class="pln" style="color:rgb(0,0,0);"><span class="hljs-attribute">image</span></span><span class="pun" style="color:rgb(102,102,0);">:</span><span class="pln" style="color:rgb(0,0,0);"> <span class="hljs-built_in">url</span></span><span class="pun" style="color:rgb(102,102,0);">(</span><span class="str" style="color:rgb(0,136,0);"><span class="hljs-string">'https://someCDN/test.png'</span></span><span class="pun" style="color:rgb(102,102,0);">);</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="pun" style="color:rgb(102,102,0);">}</span></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><strong style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:22px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">5. 模块加载和链式模块加载</strong><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">模块加载器是可自由添加的Node模块，用于将不同类型的文件“load”或“import”并转换成浏览器可以识别的类型，如js、Stylesheet等。更高级的模块加载器甚至可以支持使用ES6里边的“require”或“import”引入模块。</p><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">例如，你可以使用<code style="font-size:14px;font-style:normal;font-weight:400;"><span style="font-family:'Courier New';color:#14191e;background-color:rgb(248,250,252);">babel-loade</span></code>r来将使用ES6语法写成的文件转换成ES5：</p><pre class="prettyprint" style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);" name="code" onclick="hljs.copyCode(event)"><code class="language-js hljs javascript" style="font-size:14px;font-style:normal;font-weight:400;"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="pln" style="color:rgb(0,0,0);"><span class="hljs-built_in">module</span></span><span class="pun" style="color:rgb(102,102,0);">:</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="pun" style="color:rgb(102,102,0);">{</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">loaders</span><span class="pun" style="color:rgb(102,102,0);">:</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="pun" style="color:rgb(102,102,0);">[{</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  <span class="hljs-attr">test</span><span class="pun" style="color:rgb(102,102,0);">:</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="str" style="color:rgb(0,136,0);"><span class="hljs-regexp">/\.js$/</span></span><span class="pun" style="color:rgb(102,102,0);">,</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="com" style="color:rgb(136,0,0);"><span class="hljs-comment">// 匹配.js文件，如果通过则使用下面的loader</span></span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  exclude<span class="pun" style="color:rgb(102,102,0);">:</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="str" style="color:rgb(0,136,0);"><span class="hljs-regexp">/node_modules/</span></span><span class="pun" style="color:rgb(102,102,0);">,</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="com" style="color:rgb(136,0,0);"><span class="hljs-comment">// 排除node_modules文件夹</span></span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  loader<span class="pun" style="color:rgb(102,102,0);">:</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="str" style="color:rgb(0,136,0);"><span class="hljs-string">'babel'</span></span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="com" style="color:rgb(136,0,0);"><span class="hljs-comment">// 使用babel（babel-loader的简写）作为loader</span></span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="pun" style="color:rgb(102,102,0);">}]</span></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">链式（管道式）的加载器（从右往左执行）</p><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">多个loader可以用在同一个文件上并且被链式调用。链式调用时从右到左执行且loader之间用“!”来分割。</p><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">例如，假设我们有一个名为“myCssFile.css”的css文件，然后我们想将它的内容使用style标签内联到最终输出的html里边。我们可以使用css-loader和style-loader两个loader来达到目的。</p><pre class="prettyprint" style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);" name="code" onclick="hljs.copyCode(event)"><code class="language-js hljs javascript" style="font-size:14px;font-style:normal;font-weight:400;"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="pln" style="color:rgb(0,0,0);"><span class="hljs-built_in">module</span></span><span class="pun" style="color:rgb(102,102,0);">:</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="pun" style="color:rgb(102,102,0);">{</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">loaders</span><span class="pun" style="color:rgb(102,102,0);">:</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="pun" style="color:rgb(102,102,0);">[{</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  <span class="hljs-attr">test</span><span class="pun" style="color:rgb(102,102,0);">:</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="str" style="color:rgb(0,136,0);"><span class="hljs-regexp">/\.css$/</span></span><span class="pun" style="color:rgb(102,102,0);">,</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  <span class="hljs-attr">loader</span><span class="pun" style="color:rgb(102,102,0);">:</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="str" style="color:rgb(0,136,0);"><span class="hljs-string">'style!css'</span></span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="com" style="color:rgb(136,0,0);"><span class="hljs-comment">//(short for style-loader!css-loader)</span></span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="pun" style="color:rgb(102,102,0);">}]</span></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">这里展示它是如何工作的：</p><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);"><img title="Webpack——解决疑惑,让你明白_" style="border:0px;" alt="图片描述" src="https://img.mukewang.com/57ece14100017bcf08000581.png"></p><ol style="list-style:none;color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);"><li>Webpack在模块颞部搜索在css的依赖项，即Webpack检查js文件是否有“require('myCssFile.css')”的引用，如果它发现有css的依赖，Webpack将</li><li>css文件交给“css-loader”去处理</li><li>css-loader加载所有的css文件以及css自身的依赖（如，@import 其他css）到JSON对象里，Webpack然后将处理结果传给“style-loader”<br>style-loader接受JSON值然后添加一个style标签并将其内嵌到html文件里<strong style="font-size:22px;font-style:normal;font-weight:400;">6. loader自身可以配置</strong><p>模块加载器（loader）自身可以根据传入不同的参数进行配置。</p></li></ol><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">在下面的例子中，我们可以配置url-loader来将小于1024字节的图片使用DataUrl替换而大于1024字节的图片使用url，我们可以用如下两种方式通过传入“limit“参数来实现这一目的：</p><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);"><img title="Webpack——解决疑惑,让你明白_" style="border:0px;" alt="图片描述" src="https://img.mukewang.com/57ece14d0001d5cc06800386.png"></p><strong style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:22px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">7. .babelrc 文件</strong><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">babal-loader使用”presets“配置项来标识如何将ES6语法转成ES5以及如何转换React的JSX成js文件。我们可以用如下的方式使用”query“参数传入配置：</p><pre class="prettyprint" style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);" name="code" onclick="hljs.copyCode(event)"><code class="language-js hljs javascript" style="font-size:14px;font-style:normal;font-weight:400;"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="pln" style="color:rgb(0,0,0);"><span class="hljs-built_in">module</span></span><span class="pun" style="color:rgb(102,102,0);">:</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="pun" style="color:rgb(102,102,0);">{</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  <span class="hljs-attr">loaders</span><span class="pun" style="color:rgb(102,102,0);">:</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="pun" style="color:rgb(102,102,0);">[</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="pun" style="color:rgb(102,102,0);">{</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">      <span class="hljs-attr">test</span><span class="pun" style="color:rgb(102,102,0);">:</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="str" style="color:rgb(0,136,0);"><span class="hljs-regexp">/\.jsx?$/</span></span><span class="pun" style="color:rgb(102,102,0);">,</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">      <span class="hljs-attr">exclude</span><span class="pun" style="color:rgb(102,102,0);">:</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="str" style="color:rgb(0,136,0);"><span class="hljs-regexp">/(node_modulesbower_components)/</span></span><span class="pun" style="color:rgb(102,102,0);">,</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">      <span class="hljs-attr">loader</span><span class="pun" style="color:rgb(102,102,0);">:</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="str" style="color:rgb(0,136,0);"><span class="hljs-string">'babel'</span></span><span class="pun" style="color:rgb(102,102,0);">,</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">      <span class="hljs-attr">query</span><span class="pun" style="color:rgb(102,102,0);">:</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="pun" style="color:rgb(102,102,0);">{</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-attr">presets</span><span class="pun" style="color:rgb(102,102,0);">:</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="pun" style="color:rgb(102,102,0);">[</span><span class="str" style="color:rgb(0,136,0);"><span class="hljs-string">'react'</span></span><span class="pun" style="color:rgb(102,102,0);">,</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="str" style="color:rgb(0,136,0);"><span class="hljs-string">'es2015'</span></span><span class="pun" style="color:rgb(102,102,0);">]</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">      <span class="pun" style="color:rgb(102,102,0);">}</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="pun" style="color:rgb(102,102,0);">}</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  <span class="pun" style="color:rgb(102,102,0);">]</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="pun" style="color:rgb(102,102,0);">}</span></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">然而在很多项目里babal的配置可能比较大，因此你可以把babal-loader的配置项单独保存在一个名为”.babelrc“的文件中，在执行时babal-loader将会自动加载.babelrc文件。</p><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">所以在很多例子里，你可能会看到：</p><pre class="prettyprint" style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);" name="code" onclick="hljs.copyCode(event)"><code class="language-js hljs javascript" style="font-size:14px;font-style:normal;font-weight:400;"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="com" style="color:rgb(136,0,0);"><span class="hljs-comment">//webpack.config.js </span></span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-built_in">module</span><span class="pun" style="color:rgb(102,102,0);">:</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="pun" style="color:rgb(102,102,0);">{</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  <span class="hljs-attr">loaders</span><span class="pun" style="color:rgb(102,102,0);">:</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="pun" style="color:rgb(102,102,0);">[</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="pun" style="color:rgb(102,102,0);">{</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">      <span class="hljs-attr">test</span><span class="pun" style="color:rgb(102,102,0);">:</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="str" style="color:rgb(0,136,0);"><span class="hljs-regexp">/\.jsx?$/</span></span><span class="pun" style="color:rgb(102,102,0);">,</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">      <span class="hljs-attr">exclude</span><span class="pun" style="color:rgb(102,102,0);">:</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="str" style="color:rgb(0,136,0);"><span class="hljs-regexp">/(node_modulesbower_components)/</span></span><span class="pun" style="color:rgb(102,102,0);">,</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">      <span class="hljs-attr">loader</span><span class="pun" style="color:rgb(102,102,0);">:</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="str" style="color:rgb(0,136,0);"><span class="hljs-string">'babel'</span></span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="pun" style="color:rgb(102,102,0);">}</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  <span class="pun" style="color:rgb(102,102,0);">]</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="pun" style="color:rgb(102,102,0);">}</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="com" style="color:rgb(136,0,0);"><span class="hljs-comment">//.bablerc</span></span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="pun" style="color:rgb(102,102,0);">{</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">presets</span><span class="pun" style="color:rgb(102,102,0);">:</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="pun" style="color:rgb(102,102,0);">[</span><span class="str" style="color:rgb(0,136,0);"><span class="hljs-string">'react'</span></span><span class="pun" style="color:rgb(102,102,0);">,</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="str" style="color:rgb(0,136,0);"><span class="hljs-string">'es2015'</span></span><span class="pun" style="color:rgb(102,102,0);">]</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="pun" style="color:rgb(102,102,0);">}</span></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><strong style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:22px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">8. 插件</strong><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">插件一般都是用于输出bundle的node模块。</p><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">例如，<code style="font-size:14px;font-style:normal;font-weight:400;"><span style="font-family:'Courier New';color:#14191e;background-color:rgb(248,250,252);">uglifyJSPlugin</span></code>获取bundle.js然后压缩和混淆内容以减小文件体积。</p><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">类似的<code style="font-size:14px;font-style:normal;font-weight:400;"><span style="font-family:'Courier New';color:#14191e;background-color:rgb(248,250,252);">extract-text-webpack-plugin</span></code>内部使用css-loader和style-loader来收集所有的css到一个地方最终将结果提取结果到一个独立的”styles.css“文件，并且在html里边引用style.css文件。</p><pre class="prettyprint" style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);" name="code" onclick="hljs.copyCode(event)"><code class="language-js hljs javascript" style="font-size:14px;font-style:normal;font-weight:400;"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="com" style="color:rgb(136,0,0);"><span class="hljs-comment">//webpack.config.js</span></span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="com" style="color:rgb(136,0,0);"><span class="hljs-comment">// 获取所有的.css文件，合并它们的内容然后提取css内容到一个独立的”styles.css“里</span></span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="kwd" style="color:rgb(0,0,136);"><span class="hljs-keyword">var</span></span><span class="pln" style="color:rgb(0,0,0);"> ETP </span><span class="pun" style="color:rgb(102,102,0);">=</span><span class="pln" style="color:rgb(0,0,0);"> <span class="hljs-built_in">require</span></span><span class="pun" style="color:rgb(102,102,0);">(</span><span class="str" style="color:rgb(0,136,0);"><span class="hljs-string">"extract-text-webpack-plugin"</span></span><span class="pun" style="color:rgb(102,102,0);">);</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-built_in">module</span><span class="pun" style="color:rgb(102,102,0);">:</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="pun" style="color:rgb(102,102,0);">{</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">loaders</span><span class="pun" style="color:rgb(102,102,0);">:</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="pun" style="color:rgb(102,102,0);">[</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  <span class="pun" style="color:rgb(102,102,0);">{</span><span class="pln" style="color:rgb(0,0,0);"><span class="hljs-attr">test</span></span><span class="pun" style="color:rgb(102,102,0);">:</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="str" style="color:rgb(0,136,0);"><span class="hljs-regexp">/\.css$/</span></span><span class="pun" style="color:rgb(102,102,0);">,</span><span class="pln" style="color:rgb(0,0,0);"> <span class="hljs-attr">loader</span></span><span class="pun" style="color:rgb(102,102,0);">:</span><span class="pln" style="color:rgb(0,0,0);">ETP</span><span class="pun" style="color:rgb(102,102,0);">.</span><span class="pln" style="color:rgb(0,0,0);">extract</span><span class="pun" style="color:rgb(102,102,0);">(</span><span class="str" style="color:rgb(0,136,0);"><span class="hljs-string">"style-loader"</span></span><span class="pun" style="color:rgb(102,102,0);">,</span><span class="str" style="color:rgb(0,136,0);"><span class="hljs-string">"css-loader"</span></span><span class="pun" style="color:rgb(102,102,0);">)</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="pun" style="color:rgb(102,102,0);">}</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  <span class="pun" style="color:rgb(102,102,0);">]</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="pun" style="color:rgb(102,102,0);">},</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-attr">plugins</span><span class="pun" style="color:rgb(102,102,0);">:</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="pun" style="color:rgb(102,102,0);">[</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="kwd" style="color:rgb(0,0,136);"><span class="hljs-keyword">new</span></span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="typ" style="color:rgb(102,0,102);">ExtractTextPlugin</span><span class="pun" style="color:rgb(102,102,0);">(</span><span class="str" style="color:rgb(0,136,0);"><span class="hljs-string">"styles.css"</span></span><span class="pun" style="color:rgb(102,102,0);">)</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="com" style="color:rgb(136,0,0);"><span class="hljs-comment">//Extract to styles.css file</span></span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  <span class="pun" style="color:rgb(102,102,0);">]</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="pun" style="color:rgb(102,102,0);">}</span></div></div></li></ol></code><div class="hljs-button" data-title="复制"></div></pre><p style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-family:'PingFang SC', '微软雅黑', 'Microsoft YaHei', Helvetica, 'Helvetica Neue', Tahoma, Arial, sans-serif;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);">注意：如果你只是想把css使用style标签内联到html里，你不必使用extract-text-webpack-plugin，仅仅使用css loader和style loader即可：</p><pre class="prettyprint" style="color:rgb(20,25,30);text-transform:none;text-indent:0px;letter-spacing:normal;font-size:14px;font-style:normal;font-weight:400;word-spacing:0px;background-color:rgb(248,250,252);" name="code" onclick="hljs.copyCode(event)"><code class="language-js hljs javascript" style="font-size:14px;font-style:normal;font-weight:400;"><ol class="hljs-ln"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="pln" style="color:rgb(0,0,0);"><span class="hljs-built_in">module</span></span><span class="pun" style="color:rgb(102,102,0);">:</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="pun" style="color:rgb(102,102,0);">{</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-attr">loaders</span><span class="pun" style="color:rgb(102,102,0);">:</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="pun" style="color:rgb(102,102,0);">[{</span><span class="pln" style="color:rgb(0,0,0);"></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">  <span class="hljs-attr">test</span><span class="pun" style="color:rgb(102,102,0);">:</span><span class="pln" style="color:rgb(0,0,0);"> </span><span class="str" style="color:rgb(0,136,0);"><span class="hljs-regexp">/\.css$/,

• loader : 'style!css' // (short for style-loader!css-loader)
• }]
• 9. 加载器（loader）和插件

  你可能已经意识到了，Loader处理单独的文件级别并且通常作用于包生成之前或生成的过程中。

  而插件则是处理包（bundle）或者chunk级别，且通常是bundle生成的最后阶段。一些插件如commonschunkplugin甚至更直接修改bundle的生成方式。

  10. 处理文件的扩展名

  很多Webpack的配置文件都有一个resolve属性，然后就像下面代码所示有一个空字符串的值。空字符串在此是为了resolve一些在import文件时不带文件扩展名的表达式，如require('./myJSFile')或者import myJSFile from './myJSFile'（译者注：实际就是自动添加后缀，默认是当成js文件来查找路径）

  
   
   
  
     
     
  
      
      
  
     
     
     
     
  
      
      
  
       
       {
       
       
      
      
     
     
  
     
     
  
      
      
  
     
     
     
     
  
      
      
   
       
       resolve
       
       :
       
        
       
       {
       
       
      
      
     
     
  
     
     
  
      
      
  
     
     
     
     
  
      
      
     
       
       extensions
       
       :
       
        
       
       [
       
       ''
       
       ,
       
        
       
       '.js'
       
       ,
       
        
       
       '.jsx'
       
       ]
       
       
      
      
     
     
  
     
     
  
      
      
  
     
     
     
     
  
      
      
   
       
       }
       
       
      
      
     
     
  
     
     
  
      
      
  
     
     
     
     
  
      
      
  
       
       }
      
      
     
     
   
   
  

  就这么多。

  关于更多react和webpack学习,推荐 react-tutorial

  
  作者： 极客教程 
  链接：https://www.imooc.com/article/13357
  来源：慕课网

              </div># 欢迎使用Markdown编辑器写博客
  

  本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：

  • Markdown和扩展Markdown简洁的语法
  • 代码块高亮
  • 图片链接和图片上传
  • LaTex数学公式
  • UML序列图和流程图
  • 离线写博客
  • 导入导出Markdown文件
  • 丰富的快捷键

  ---

  快捷键

  • 加粗 Ctrl + B
  • 斜体 Ctrl + I
  • 引用 Ctrl + Q
  • 插入链接 Ctrl + L
  • 插入代码 Ctrl + K
  • 插入图片 Ctrl + G
  • 提升标题 Ctrl + H
  • 有序列表 Ctrl + O
  • 无序列表 Ctrl + U
  • 横线 Ctrl + R
  • 撤销 Ctrl + Z
  • 重做 Ctrl + Y

  Markdown及扩展

  Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的HTML页面。 —— [ 维基百科 ]

  使用简单的符号标识不同的标题，将某些文字标记为粗体或者斜体，创建一个链接等，详细语法参考帮助？。

  本编辑器支持 Markdown Extra , 　扩展了很多好用的功能。具体请参考Github.

  表格

  Markdown　Extra　表格语法：

  项目	价格
  Computer	$1600
  Phone	$12
  Pipe	$1

  可以使用冒号来定义对齐方式：

  项目	价格	数量
  Computer	1600 元	5
  Phone	12 元	12
  Pipe	1 元	234

  定义列表

  Markdown　Extra　定义列表语法： 项目１ 项目２

  定义 A

  定义 B

  项目３

  定义 C

  定义 D

  定义D内容

  代码块

  代码块语法遵循标准markdown代码，例如：

  @requires_authorization
  def somefunc(param1='', param2=0):
      '''A docstring'''
      if param1 > param2: # interesting
          print 'Greater'
      return (param2 - param1 + 1) or None
  class SomeClass:
      pass
  >>> message = '''interpreter
  ... prompt'''

  脚注

  生成一个脚注1.

  目录

  用 [TOC]来生成目录：

  数学公式

  使用MathJax渲染LaTex 数学公式，详见math.stackexchange.com.

  • 行内公式，数学公式为：$\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$。
  • 块级公式：
  $$x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$

  更多LaTex语法请参考 这儿.

  UML 图:

  可以渲染序列图：

  或者流程图：

  • 关于 序列图 语法，参考 这儿,
  • 关于 流程图 语法，参考 这儿.

  离线写博客

  即使用户在没有网络的情况下，也可以通过本编辑器离线写博客（直接在曾经使用过的浏览器中输入write.blog.csdn.net/mdeditor即可。Markdown编辑器使用浏览器离线存储将内容保存在本地。

  用户写博客的过程中，内容实时保存在浏览器缓存中，在用户关闭浏览器或者其它异常情况下，内容不会丢失。用户再次打开浏览器时，会显示上次用户正在编辑的没有发表的内容。

  博客发表后，本地缓存将被删除。　

  用户可以选择 把正在写的博客保存到服务器草稿箱，即使换浏览器或者清除缓存，内容也不会丢失。

  注意：虽然浏览器存储大部分时候都比较可靠，但为了您的数据安全，在联网后，请务必及时发表或者保存到服务器草稿箱。

  浏览器兼容

  1. 目前，本编辑器对Chrome浏览器支持最为完整。建议大家使用较新版本的Chrome。
  2. IE９以下不支持
  3. IE９，１０，１１存在以下问题
     
     1. 不支持离线功能
     2. IE9不支持文件导入导出
     3. IE10不支持拖拽文件导入

  ---

  ---

  1. 这里是 脚注 的 内容. ↩