WebPack入门篇

什么是Webpack？

       官方给出的定义是这样的，Webpack是一个现代JavaScript应用程序的静态模块打包器。当 Webpack 处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个包。
       当你使用WebPack时，它帮你做的事情是：分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（如Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

什么是打包？为什么要使用WebPack打包？

       在了解什么是打包之前，我们需要明白什么是模块。模块说白了就是一段实现一组特定功能的代码，模块之间可以相互依赖。WebPack将工程中所有静态资源都视为模块，对他们进行统一的管理和打包。我们来考虑下面这个场景：
       我有三个js文件a、b和c，其中a依赖b，b依赖c:

//a.js
import fb from 'b';
export default function(){
    return fb();
}

//b.js
import fc from 'c';
export default function(){
    return fc();
}

//c.js
export default function(){
    return true;
}

       我们在用的时候就需要同时引入三个文件。当我们工程变得越来越大，有几十几百个文件，这时就算不考虑加载文件的延迟对页面性能的影响，文件之间的依赖维护起来就相当困难。
       那么如果我们把所有js文件合并成一个文件不就不存在这个问题了吗？没错，这样做确实可以解决问题。但在开发阶段就合并是不现实的，这就相当于很多人同时对一个可能上万行的文件进行开发。所以我们需要在开发结束后把所有js文件进行合并，这个过程就叫做打包。WebPack在打包过程中，会分析各个文件之间的依赖关系，然后生成一个依赖图并用文件的形式保存下来，浏览器运行代码的时候就可以读取这个文件，就知道了各个代码块之间的关联以及如何调用了。

初识

       从WebPack v4.0.0开始，可以不用引入一个配置文件。然而，WebPack仍然还是高度可配置的。在开始前你需要先理解四个核心概念：入口(entry)、输出(output)、loader和插件(plugins)。而且我们必须始终明白一点，无论WebPack的配置文件有多复杂，都是为项目打包而服务的，这才是WebPack的根本出发点。

入口(entry)

       入口指出了WebPack应该从哪个模块开始构建其内部的依赖图，进入入口起点后，WebPack会找出有哪些模块和库是入口起点（直接和间接）依赖的。每个依赖项随即递归地被处理，最后输出到称为bundles的文件中。我们通过在WebPack配置文件中配置entry属性，来指定一个入口起点（或多个入口起点），默认值为"./src"。
       一般语法为：entry:string|Array<string>

//demo1
const config = {
  //一个入口
  enrty:'xxx/xxx/xxx/file.js',
};
module.exports = config;

       当我们在构建多页面应用时或者我们想要分离应用程序和第三方库入口时，我们可以设置多个打包入口。

//demo2
const config = {
  //多个入口
  entry:{
    app:'./src/app.js',
    vendors:'./scr/vendors.js'
  }
};
module.exports = config;

输出(output)

       配置output可以控制WebPack将打包好的文件输出到想要的位置。output属性的值是一个对象，至少包含两个属性：文件名和路径。注意，即使设置了多个入口，也只能指定一个输出配置，但output对象中要使用占位符来确保每个入口起点生成的包名唯一。
       一般语法为：output:{filename:'',path:''}

//demo3
const config = {
  output: {
    //单个入口
    filename:'bundle.js',
    path:'/xxx/xxx'
  }
}
module.exports = config;

//demo4
const config = {
  output: {
    //多个入口
    filename:'[name].js',
    path:'/xxx/xxx'
  }
}
module.exports = config;
//[name]会根据不同的入口生成对应的不同名的js文件

loader

       loader用于对模块的源代码进行转换。loader可以使你在import或“加载”模块时预处理文件。loader可以将文件从不同的语言（如TypeScript）转换为JavaScript，或将内联图像转换为data URL，loader甚至允许你直接在JavaScript模块中import CSS文件！
       使用不同的loader，WebPack通过调用外部的脚本或工具可以对各种各样的格式的文件进行处理，比如说分析JSON文件并把它转换为JavaScript文件，或者说把较新的js特性（ES6，ES7)转换为现代或者较老浏览器可以识别的js文件。或者对于Vue开发者来说，合适的loader可以帮助WebPack将Vue的.vue文件打包。
       Loader需要单独安装并且需要在WebPack配置文件的modules关键字下进行配置。借助npm安装loader很简单：npm install -save xxx-loader
       loader的使用方法有三种：

• 配置（推荐）：在WebPack的配置文件中指定loader。
• 内联：在每个import语句中显式指定loader。
• CLI：在 shell 命令中指定它们。

       这里我们只看第一种，配置的必选项为：test（一个匹配loader所处理的文件的拓展名的正则表达式）和loader（使用的loader的名称），可选项有：include/exclude（添加或屏蔽不需要处理的文件）、query（loader额外设置）等。

//demo5
const config = {
  module: {
    rules: [
      //对每个.css文件使用css-loader
      { test: /\.css$/, use: 'css-loader' },
      //对每个.ts文件使用ts-loader
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
}
module.exports = config;

       也可以写成这种更直观的形式：

//demo6
const config = {
  module: {
    loaders: [
      //对每个.css文件使用css-loader
      { test: /\.css$/, loader: 'css-loader' },
      //对每个.ts文件使用ts-loader
      { test: /\.ts$/, loader: 'ts-loader' }
    ]
  }
}
module.exports = config;

插件(plugins)

       插件是WebPack最强的功能，使用插件的目的就在于解决很多WebPack和loader解决不了的事情。当然，像loader一样，我们在使用非内置的插件前需要通过npm来安装插件。
       注意，当我们在使用时，由于插件可以携带参数，所以我们必须向plugins属性中传入插件的实例。一般语法为：plugins:[new xxx-plugin]

//demo7
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过npm安装
const webpack = require('webpack'); //访问内置的插件

const config = {
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};
module.exports = config;

       这里给出WebPack官方的插件库：https://www.webpackjs.com/plugins/

构建目标(target)

       最后我们来看一下WebPack的构建目标(target)。因为服务端代码和浏览器代码都可以用js编写，所以WebPack提供了多种构建目标，每个target都有各种部署(deployment)/环境(environment)特定的附加项，以支持满足其需求。（常用的target值有web和node）

//demo8
const config = {
  target: 'node'
}
module.exports = config;

       注意，WebPack不支持向target属性传入过个字符串，也就是说不能同时生成两种类型的目标包，但是我们可以通过打包两份分离的配置来创建两个同构的库。

//demo9
var path = require('path');
var serverConfig = {
  target: 'node',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'node.js'
  }
};

var clientConfig = {
  target: 'web', // <=== 默认是 'web'，可省略
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'web.js'
  }
};
module.exports = [ serverConfig, clientConfig ];

总结

       到这里为止，WebPack的四个核心概念都已经说完了，我们来总结一下WebPack配置文件的一般形式：

const webpack = require('webpack'); 
const path = require('path');

const config = {
  //这里的模式配置告诉WebPack使用响应的内置优化，不做过多赘述
  mode: 'development',
  target:'web',
  entry: '/xxx/xxx.js',
  output: {
    //resolve是一个库，用于找到模块的绝对路径
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};
module.exports = config;

最后附一个官方文档：https://www.webpackjs.com/concepts/