1、入门

1-1 前端的发展

模块化

CommonJS

优点：代码可在nodejs环境下复用

通过npm发布的第三方模块都采用CommonJS规范

缺点：必须通过工具转化为ES5，否则无法在浏览器环境下执行

AMD 也是一种JS模块化规范，与CommonJS不同在于采用异步的方式去加载依赖的模块，最具代表实现是requirejs

优点：

可在不转换代码情况下直接在浏览器中运行

可异步加载依赖

可并行加载多个依赖

可在node和浏览器环境下运行

缺点：

JS原生环境没有支持AMD，需要先导入AMD库才能使用

ES6模块化

终极模块化方案，但是无法在大部分JS环境下运行，必须通过工具转化为ES5

1-2 常见的构建工具及对比

前端工程化

构建就是将源代码转化成发布到线上可执行的JS，css，html代码
代码转换：ts编译成js等
文件优化：压缩js，合并图片等
代码分割：提取公共代码，异步加载首屏无需执行的代码
模块合并：将模块分类合并成一个文件
自动刷新：监听本地源代码，自动重新构建，刷新浏览器
代码校验：自动校验代码是否符合规范
自动发布

构建工具

Npm Script是一个任务执行者，scripts中每个属性对应一段shell脚本

grunt也是一个任务执行者，相当于进化版本的npm Script

Gulp是一个基于流的自动化构建工具，但是集成度不高，无法做到开箱即用

Webpack是一个打包模块化JS工具，在webpack中一切皆模块，通过Loader转换文件，Plugin注入狗子，最后输出文件

Rollup类似Webpack，亮点是对es6进行Tree Shaking去除无用代码，但是生态链不完善

使用Loader、Plugin、DevServer

Loader使用

webpack不支持解析css文件
Loader可以看做文件翻译员，在module.rules中配置一组规则
Loader执行顺序是从use属性配置的数组中从后到前的
style-loader大致原理是把CSS内容用JS字符串存储起来，在网页执行js时通过DOM动态插入style标签

Plugin使用

用于扩展webpack功能，在构建流程中注入钩子，给webpack带来很大灵活性
plugin是一个数组，每一项都是插件的一个实例

DevServer使用

能提供http服务
监听文件变化并自动刷新，做到实时预览
支持SourceMap，方便调试
DevServer通过WebSocket协议通信
模块热替换，不重新加载整个页面情况下，通过将被更行过的模块替换老模块

核心概念

Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入
Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割
Loader：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割
Plugin：扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情
OutPut：输出结果，在 Webpack 经过一系列处理并得出最终想要的代码后输出结果

2、配置

2-1 Entry Output Module Resolve Plugins DevServer

Entry

entry是配置模块的入口，可抽象成输入，Webpack 执行构建的第一步将从入口开始搜寻及递归解析出所有入口依赖的模块。

Output

配置如何输出最终想要的代码

filename：[id].[name].[hash:8].[chunkhash:8].js

publicPath：配置发布到线上资源的 URL 前缀，为string 类型。默认值是空字符串 ''，即使用相对路径。

crossOriginLoading：动态地向 HTML 中插入一个 script标签去加载异步资源，anonymous(默认)不携带cookie，use-credentials携带cookie

Module

配置如何处理模块

rules：配置模块的读取和解析规则，通常用来配置 Loader

module: {
  rules: [
    {
      // 命中 JavaScript 文件
      test: /.js$/,
      // 用 babel-loader 转换 JavaScript 文件
      // ?cacheDirectory 表示传给 babel-loader 的参数，用于缓存 babel 编译结果加快重新编译速度
      use: ['babel-loader?cacheDirectory'],
      // 只命中src目录里的js文件，加快 Webpack 搜索速度
      include: path.resolve(__dirname, 'src')
    },
    {
      // 命中 SCSS 文件
      test: /.scss$/,
      // 使用一组 Loader 去处理 SCSS 文件。
      // 处理顺序为从后到前，即先交给 sass-loader 处理，再把结果交给 css-loader 最后再给 style-loader。
      use: ['style-loader', 'css-loader', 'sass-loader'],
      // 排除 node_modules 目录下的文件
      exclude: path.resolve(__dirname, 'node_modules'),
    },
    {
      // 对非文本文件采用 file-loader 加载
      test: /.(gif|png|jpe?g|eot|woff|ttf|svg|pdf)$/,
      use: ['file-loader'],
    },
  ]
}

Resolve

Webpack 在启动后会从配置的入口模块出发找出所有依赖的模块，Resolve 配置 Webpack 如何寻找模块所对应的文件。

Plugins

Plugin 用于扩展 Webpack 功能

DevServer

hot：模块热替换功能，不刷新页面做到实时预览

inline：控制代码构建完成够自动刷新页面

historyApiFallback：命中任何路由都返回一个html文件

contentBase：配置 DevServer HTTP 服务器的文件根目录

headers：注入http响应头

host：0.0.0.0可以让其他局域网访问

port：端口号

https：自动生成https证书

2-2 其他配置项

Target

目标环境：web（默认），node，webworker......

Devtool

如何生成Source Map

Watch & WatchOptions

使用 DevServer 时，监听模式默认是开启的

Externals

告诉 Webpack JavaScript 运行环境已经内置了那些全局变量，针对这些全局变量不用打包进代码中而是直接使用全局变量

2-3 整体结构配置

const path = require('path');

module.exports = {
  // entry 表示 入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
  // 类型可以是 string | object | array   
  entry: './app/entry', // 只有1个入口，入口只有1个文件
  entry: ['./app/entry1', './app/entry2'], // 只有1个入口，入口有2个文件
  entry: { // 有2个入口
    a: './app/entry-a',
    b: ['./app/entry-b1', './app/entry-b2']
  },

  // 如何输出结果：在 Webpack 经过一系列处理后，如何输出最终想要的代码。
  output: {
    // 输出文件存放的目录，必须是 string 类型的绝对路径。
    path: path.resolve(__dirname, 'dist'),

    // 输出文件的名称
    filename: 'bundle.js', // 完整的名称
    filename: '[name].js', // 当配置了多个 entry 时，通过名称模版为不同的 entry 生成不同的文件名称
    filename: '[chunkhash].js', // 根据文件内容 hash 值生成文件名称，用于浏览器长时间缓存文件

    // 发布到线上的所有资源的 URL 前缀，string 类型
    publicPath: '/assets/', // 放到指定目录下
    publicPath: '', // 放到根目录下
    publicPath: 'https://cdn.example.com/', // 放到 CDN 上去

    // 导出库的名称，string 类型
    // 不填它时，默认输出格式是匿名的立即执行函数
    library: 'MyLibrary',

    // 导出库的类型，枚举类型，默认是 var
    // 可以是 umd | umd2 | commonjs2 | commonjs | amd | this | var | assign | window | global | jsonp ，
    libraryTarget: 'umd', 

    // 是否包含有用的文件路径信息到生成的代码里去，boolean 类型
    pathinfo: true, 

    // 附加 Chunk 的文件名称
    chunkFilename: '[id].js',
    chunkFilename: '[chunkhash].js',

    // JSONP 异步加载资源时的回调函数名称，需要和服务端搭配使用
    jsonpFunction: 'myWebpackJsonp',

    // 生成的 Source Map 文件名称
    sourceMapFilename: '[file].map',

    // 浏览器开发者工具里显示的源码模块名称
    devtoolModuleFilenameTemplate: 'webpack:///[resource-path]',

    // 异步加载跨域的资源时使用的方式
    crossOriginLoading: 'use-credentials',
    crossOriginLoading: 'anonymous',
    crossOriginLoading: false,
  },

  // 配置模块相关
  module: {
    rules: [ // 配置 Loader
      {  
        test: /.jsx?$/, // 正则匹配命中要使用 Loader 的文件
        include: [ // 只会命中这里面的文件
          path.resolve(__dirname, 'app')
        ],
        exclude: [ // 忽略这里面的文件
          path.resolve(__dirname, 'app/demo-files')
        ],
        use: [ // 使用那些 Loader，有先后次序，从后往前执行
          'style-loader', // 直接使用 Loader 的名称
          {
            loader: 'css-loader',      
            options: { // 给 html-loader 传一些参数
            }
          }
        ]
      },
    ],
    noParse: [ // 不用解析和处理的模块
      /special-library.js$/  // 用正则匹配
    ],
  },

  // 配置插件
  plugins: [
  ],

  // 配置寻找模块的规则
  resolve: { 
    modules: [ // 寻找模块的根目录，array 类型，默认以 node_modules 为根目录
      'node_modules',
      path.resolve(__dirname, 'app')
    ],
    extensions: ['.js', '.json', '.jsx', '.css'], // 模块的后缀名
    alias: { // 模块别名配置，用于映射模块
       // 把 'module' 映射 'new-module'，同样的 'module/path/file' 也会被映射成 'new-module/path/file'
      'module': 'new-module',
      // 使用结尾符号 $ 后，把 'only-module' 映射成 'new-module'，
      // 但是不像上面的，'module/path/file' 不会被映射成 'new-module/path/file'
      'only-module$': 'new-module', 
    },
    alias: [ // alias 还支持使用数组来更详细的配置
      {
        name: 'module', // 老的模块
        alias: 'new-module', // 新的模块
        // 是否是只映射模块，如果是 true 只有 'module' 会被映射，如果是 false 'module/inner/path' 也会被映射
        onlyModule: true, 
      }
    ],
    symlinks: true, // 是否跟随文件软链接去搜寻模块的路径
    descriptionFiles: ['package.json'], // 模块的描述文件
    mainFields: ['main'], // 模块的描述文件里的描述入口的文件的字段名称
    enforceExtension: false, // 是否强制导入语句必须要写明文件后缀
  },

  // 输出文件性能检查配置
  performance: { 
    hints: 'warning', // 有性能问题时输出警告
    hints: 'error', // 有性能问题时输出错误
    hints: false, // 关闭性能检查
    maxAssetSize: 200000, // 最大文件大小 (单位 bytes)
    maxEntrypointSize: 400000, // 最大入口文件大小 (单位 bytes)
    assetFilter: function(assetFilename) { // 过滤要检查的文件
      return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
    }
  },

  devtool: 'source-map', // 配置 source-map 类型

  context: __dirname, // Webpack 使用的根目录，string 类型必须是绝对路径

  // 配置输出代码的运行环境
  target: 'web', // 浏览器，默认
  target: 'webworker', // WebWorker
  target: 'node', // Node.js，使用 `require` 语句加载 Chunk 代码
  target: 'async-node', // Node.js，异步加载 Chunk 代码
  target: 'node-webkit', // nw.js
  target: 'electron-main', // electron, 主线程
  target: 'electron-renderer', // electron, 渲染线程

  externals: { // 使用来自 JavaScript 运行环境提供的全局变量
    jquery: 'jQuery'
  },

  stats: { // 控制台输出日志控制
    assets: true,
    colors: true,
    errors: true,
    errorDetails: true,
    hash: true,
  },

  devServer: { // DevServer 相关的配置
    proxy: { // 代理到后端服务接口
      '/api': 'http://localhost:3000'
    },
    contentBase: path.join(__dirname, 'public'), // 配置 DevServer HTTP 服务器的文件根目录
    compress: true, // 是否开启 gzip 压缩
    historyApiFallback: true, // 是否开发 HTML5 History API 网页
    hot: true, // 是否开启模块热替换功能
    https: false, // 是否开启 HTTPS 模式
    },

    profile: true, // 是否捕捉 Webpack 构建的性能信息，用于分析什么原因导致构建性能不佳

    cache: false, // 是否启用缓存提升构建速度

    watch: true, // 是否开始
    watchOptions: { // 监听模式选项
    // 不监听的文件或文件夹，支持正则匹配。默认为空
    ignored: /node_modules/,
    // 监听到变化发生后会等300ms再去执行动作，防止文件更新太快导致重新编译频率太高
    // 默认为300ms 
    aggregateTimeout: 300,
    // 判断文件是否发生变化是不停的去询问系统指定文件有没有变化，默认每隔1000毫秒询问一次
    poll: 1000
  },
}

3、实战

3-1 使用ES6

两件事：ES6语法用ES5实现，新的API注入polyfill

Babel：用于完成以上两件事

接入：通过babel-loader接入

3-2 使用TS

创建tsconfig文件

使用awesome-typescript-loader

3-3 使用PostCSS

PostCSS 全部采用 JavaScript 编写，运行在 Node.js 之上，启动时，会从目录下的 postcss.config.js 文件中读取所需配置

3-4 为单页应用生成HTML

web-webpack-plugin

3-5 构建同构应用

构建同构应用的最终目的是从一份项目源码中构建出2份 JavaScript 代码，一份用于在浏览器端运行，一份用于在 Node.js 环境中运行渲染出 HTML。

深入浅出webpack