《晋级篇：SPA单页面应用（组件化开发+SASS+ES6）》

    在原项目基础上把html语言改成vue或react，进行组件化开发。

    1、sass：用sass代替编写css；
    2、ES6语法：ES6新增了很多有趣的特性；
    3、externals：打包时忽略第三方库，比如说jquery；
    4、resolve属性：改变模块的处理方式；
    5、UglifyJsPlugin：webpack自带插件，可以对打包js文件进行压缩或美化处理；
    6、BannerPlugin：给打包文件头部加上你的签名；
    7、open-browser-webpack-plugin：自动打开浏览器插件；

    新建一个lesson4文件，做初始化

    初始化完之后对应开发文件目录结构如下：

    copy以下代码到index.html

    2.  <head> 
    3.   <meta charset="UTF-8" /> 
    4.   <title>webpack-lesson4</title> 
    5.  </head> 
    6.  <body> 
    7.   <header> 
    8.    <!-- html-loader：用于引入对应资源  --> 
    9.    ${require('./components/header/header.html')} 
    10.   </header> 
    11.   <section>
    12.     ${require('./components/body/body.html')} 
    13.   </section> 
    14.   <footer>
    15.     ${require('./components/footer/footer.html')} 
    16.   </footer> 
    17.   <!-- 跟webpack.config.js中的externals属性结合，作用包括：1、打包时会忽略jquery文件；2、可全局调用jquery --> 
    18.   <script type="text/javascript" src="//cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>  
    19.  </body>
    20. </html>

    copy以下代码到header.html

    1. <h1 class="header-title">this is header</h1>

    copy以下代码到body.html

    1. <h1 class="body-title">this is body</h1>
    2. <ul class="body-list">
    3. </ul>

    copy以下代码到footer.html

    1. <h1 class="footer-title">this is footer</h1>
    1. .header-title{
    2.   font-style: italic;
    3.   background-color: rgba(100,100,100,0.9);
    4.   color: #fff;

    copy以下代码到body.scss

    copy以下代码到footer.scss

    1. .footer-title{
    2.   color: #fff;
    3.   background-color: rgba(200,200,200,0.9);
    4. }

    copy以下代码到body.js

    1. // 这里不再需要再import或require jquery，在webpack.config.js中新增了externals属性，让jquery可以在webpack整个运行环境中被调用
    2. let element = $("#body-input"),
    3.   str = element.html(),
    4.   progress = 0,
    5.   timer = setInterval(() => {
    6.     let current = str.substr(progress, 1);
    7.     if (current == '<') {
    8.       progress = str.indexOf('>', progress) + 1;
    9.     } else {
    10.       progress++;
    11.     }
    12.     element.html(str.substring(0, progress) + (progress && 1 ? '_': ''));
    13.     if (progress >= str.length) {
    14.       clearInterval(timer);
    15.       element.html(str.substring(0, progress));
    16.     }
    17.   },150);

    配置package.json命令行

    1. "scripts": {
    2.   "build": "export NODE_ENV=production  && node_modules/.bin/webpack"
    3. }

    sass-loader用来解析scss文件，它的安装依赖于node-sass

    1. npm install sass-loader node-sass --save-dev

    可以将ES6语法转化成能被浏览器识别的ES5，开发js我们就能使用最新的ES6语法了

    1. npm install --save-dev babel-loader babel-core babel-preset-env

    copy以下代码到webpack.config.js

    copy以下代码到webpack.entry.js

    1. const cssAndJsContext = require.context('./src', true, /\.(js|scss)$/i);
    3. console.log(cssAndJsContext.keys());
    4. // 结果是：["./base.scss","./components/body/body.js","./components/body/body.scss","./components/footer/footer.js","./components/footer/footer.scss","./components/header/header.js","./components/header/header.scss"]
    5. // cssAndJsContext('./base.scss') 相当于 require("./src/base.scss");
    6. cssAndJsContext.keys().forEach((key) => {
    7.   cssAndJsContext(key);
    8. });
    10. if (NODE_ENV === 'development') {
    11.   const htmlContext = require.context('./src', true, /\.html$/i);
    12.   htmlContext.keys().forEach((key) => {
    13.     htmlContext(key);
    14.   });
    15. }

    require.context的作用是可以把在自己设置的目录下所有符合条件的文件一次性require到webpack运行环境中，它有三个参数： 

    1. require.context(directory, useSubdirectories = false, regExp = /^\.\//)
    2. # 它会返回一个webpackContext的函数结果，通过调用返回对象的.keys()方法可以获取检索结果
    3. # directory：设定在哪个目录下检索文件，必须是相对路径
    4. # useSubdirectories：是否在当前目录下的所有子目录进行检索，而不限制只在directory当前目录下检索
    5. # regExp：正则表达式，即检索条件，webpack.entry.js检索条件是所有文件名以.js或.scss结尾的文件，且不区分大小写

    运行npm run build，本地打开index.html，效果如下：
    《晋级篇：SPA单页面应用（组件化开发+SASS+ES6）》 - 图3

    上面提到的require.context()会把在主目录下所有符合条件的文件路径都返回出来，如果要直接在require中使用变量表达式动态引入模块的话，要注意引入格式，先看个例子： 

    1. var name = './src/base.scss';
    2. require(name);

    在webpack.entry.js中写入以上代码的话，解析会报错且require不到base.scss，如果这样写

    1. var name = 'base';
    2. require('./src/'+name+'.scss');

    就能成功require到base.scss文件，这是因为webpack在解析require函数调用时会抽取两个信息： 

    1. Directory（指定目录）: ./src

    只有成功拿到这两个信息之后，webpack才会在指定目录下寻找符合条件的文件。