webpack3 -概念篇

自己搞webpack还是从1.X开始的，从一开始都一直想写歌简单的教程神马的，但是迟迟没有动笔。今天决定了，开始记录,所以先从概念开始写，咱还是先要了解webpack是个什么鬼，是做什么的，以及为什么要使用它，它与其他工具比如说Grunt和gulp有什么区别，好吧，带着这几个问题开始正题。来个华丽丽的分割线

---

1. 什么是webpack，有什么作用
   [官方解释]：webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成少量的 bundle - 通常只有一个，由浏览器加载。
   [自己的理解]：你就可以把它但工作一个模块打包工具。它可以打包js、css、html、image等文件。
2. 为什么要使用webpack
   今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法：
   a:模块化，让我们可以把复杂的程序细化为小的文件;
   b:类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；
   c:scss，less等CSS预处理器
   .........
   这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常反锁的，这就为WebPack类的工具的出现提供了需求。
   3.它与Grunt和gulp的区别
   好多人都说学了这几款工具之后，发现他们做的事情基本上都是一样的，比如说整合好几个js文件（模块）成一个文件，然后进行压缩和检查语法，又比如说调用loader把ES6转换成ES5（通用浏览器可识别的语法），css的预编译等。
   你可以这样子理解
   Grunt :一种自动化任务处理工具。
   gulp：基于流的自动化构建工具
   从功能上说，它们都是为了实现模块化开发的一种手段。
   从工作方式上说，webpack属于模块化管理工具，其他两个属于任务管理工具，或许这样说不是很准确，借用其他朋友说的一句话解释一下吧，Grunt和是一种自动化任务处理工具，而webpack是一种模块化管理方案，目测，webpack应该是一个趋势，功能很强大，配置简单。不过你要想一步一步来配置你环境，用gulp就很适合，如果你想一下子就配备大部分需要的环境，那么webpack就可以，萝卜青菜各有所爱，好像偏题了，这里说的是他们的区别。

---

webpack的四个核心概念：入口(entry)、输出(output)、loader、插件(plugins)。

---

1. 入口(entry)

string | [string] | object { : string | [string] } | (function: () => string | [string] | object { : string | [string] })

起点或是应用程序的起点入口。从这个起点开始，应用程序启动执行。如果传递一个数组，那么数组的每一项都会执行。

动态加载的模块不是入口起点。

简单规则：每个 HTML 页面都有一个入口起点。单页应用(SPA)：一个入口起点，多页应用(MPA)：多个入口起点。

//单入口配置，多用于SPA
module.exports = {
  entry: './path/to/my/entry/file.js'
};

//单入口配置，多用于MPA
entry: {
  home: "./home.js",
  about: "./about.js",
  contact: "./contact.js"
}

//动态入口配置
entry: () => new Promise((resolve) => resolve(['./demo', './demo2']))

p:如果传入一个字符串或字符串数组，chunk 会被命名为 main。如果传入一个对象，则每个键(key)会是 chunk 的名称，该值描述了 chunk 的入口起点。

---

2. 输出(Output)

配置 output 选项可以控制 webpack 如何向硬盘写入编译文件.可以存在多个入口文件对应一个出口文件的配置。

配置output属性的最低要求是，将它的值设置为一个对象，包括以下两点：

• filename 用于输出文件的文件名。
• 目标输出目录 path 的绝对路径。

//单入口-出口 - 多应用于SPA
const config = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};

module.exports = config;

//多入口-出口 -多应用于MPA
{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

---

3. Loader

{1:概念}

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。可以利用ts-loader将 TypeScript 转为 JavaScript，可以利用babel-loader将ES6语法转换成ES5语法，style-loader的目的是为了在html中以style的方式嵌入css，css-loader是为了在js里边通过require引入css，等等一系列的任务都可以通过loader实现。

//安装相应loader
npm install --save-dev css-loader
npm install --save-dev ts-loader

//实现loader配置
module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

{2:使用 Loader}

有三种使用 loader 的方式：

• 配置[Configuration]（推荐）：在 webpack.config.js 文件中指定 loader。

   module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            { loader: 'style-loader' },
            {
              loader: 'css-loader',
              options: {
                modules: true
              }
            }
          ]
        }
      ]
    }
  

• 内联：在每个 import 语句中显式指定 loader。

  import Styles from 'style-loader!css-loader?modules!./styles.css';
  

• CLI：在 shell 命令中指定它们。

  //对 .jade 文件使用 jade-loader
  //对 .css 文件使用 style-loader 和 css-loader。
  webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'
  

p:尽可能使用 module.rules，因为这样可以减少源码中的代码量，并且可以在出错时，更快地调试和定位 loader 中的问题。

{3:特性}

• loader 支持链式传递。一组链式的 loader 将按照先后顺序进行编译。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript。

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

• loader 可以是同步的，也可以是异步的。

• loader 运行在 Node.js 中，并且能够执行任何可能的操作。

• loader 接收查询参数。用于对 loader 传递配置。

  {
                  test: /\.(eot|woff|svg|ttf|woff2|gif|appcache)(\?|$)/,
                  exclude: /^node_modules$/,
                  loader: 'file-loader?name=[name].[ext]'
              }, {
                  test: /\.(png|jpg)$/,
                  exclude: /^node_modules$/,
                  loader: 'url?limit=20000&name=[name].[ext]' //后面的limit的参数，当你图片大小小于这个限制的时候，会自动启用base64编码图片
              }
  

• loader 也能够使用 options 对象进行配置。

  //一般常使用.babelrc文件进行配置。
  {
      "presets": [], 
      "plugins": [] // 插件
  }
  

• 除了使用 package.json 常见的 main 属性，还可以将普通的 npm 模块导出为 loader，做法是在 package.json 里定义一个 loader 字段。

• 插件(plugin)可以为 loader 带来更多特性。

  //1
  //HtmlwebpackPlugin
  //为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题
  new HtmlwebpackPlugin({
      template: path.resolve(__dirname, 'src/index.html'),
      inject: 'body'
  })
  //2
  //CommonsChunkPlugin
  //提取代码中的公共模块，然后将公共模块打包到一个独立的文件中，以便在其他的入口和模块中使用。
  new CommonsChunkPlugin({
      name: 'vendors',
      filename: 'vendors.js',
      minChunks: function(module) {
          return isExternal(module);
      }
  })
  //3
  //webpack.ProvidePlugin
  //定义标识符，当遇到指定标识符的时候，自动加载模块。像我们常用的jQuery
  new webpack.ProvidePlugin({
      jQuery: 'jquery',
      $: 'jquery'
  })
  //4
  //ExtractTextPlugin
  //将样式从js中抽出，生成单独的.css样式文件
  new ExtractTextPlugin('style.css', {
      allChunks: true // 提取所有的chunk（默认只提取initial chunk，而上面CommonsChunkPlugin已经把部分抽离了）
  })
  

• loader 能够产生额外的任意文件。

---

4. 插件(Plugins)

{1:概念}

插件是 wepback 的支柱功能。插件目的在于解决 loader 无法实现的其他事。

{2:使用 Plugins}

• 配置。

  常用的一些插件在前边loader里边都有介绍，这里就不更多介绍了

   module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            { loader: 'style-loader' },
            {
              loader: 'css-loader',
              options: {
                modules: true
              }
            }
          ]
        }
      ]
    }
  

• Node API

  const webpack = require('webpack'); //访问 webpack 运行时(runtime)
    const configuration = require('./webpack.config.js');
  
    let compiler = webpack(configuration);
    compiler.apply(new webpack.ProgressPlugin());
  
    compiler.run(function(err, stats) {
      // ...
    });