webpack(杂记)

webpack有四个核心概念：

• 入口(entry)
• 输出(output)
• loader
• 插件(plugins)

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

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

对比 Node.js 模块，webpack _模块_可以以各类方式表达它们的依赖关系，几个例子以下：

• ES2015 import 语句
• CommonJS require() 语句
• AMD define 和 require 语句
• css/sass/less 文件中的 @import 语句。
• 样式(url(...))或 HTML 文件(<img src=...>)中的图片连接(image url)

模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程当中替换、添加或删除模块，而无需从新加载整个页面。主要是经过如下几种方式，来显著加快开发速度：

• 保留在彻底从新加载页面时丢失的应用程序状态。
• 只更新变动内容，以节省宝贵的开发时间。
• 调整样式更加快速 - 几乎至关于在浏览器调试器中更改样式。

除了普通资源，编译器(compiler)须要发出 "update"，以容许更新以前的版本到新的版本。"update" 由两部分组成：

NaN. 更新后的 manifest(JSON)
NaN. 一个或多个更新后的 chunk (JavaScript)

manifest 包括新的编译 hash 和全部的待更新 chunk 目录。每一个更新 chunk 都含有对应于此 chunk 的所有更新模块（或一个 flag 用于代表此模块要被移除）的代码。

编译器确保模块 ID 和 chunk ID 在这些构建之间保持一致。一般将这些 ID 存储在内存中（例如，使用 webpack-dev-server 时），可是也可能将它们存储在一个 JSON 文件中。