关于javascript: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 文件中。