Webpack

参考文档

模块打包工具

本质上，webpack是一个用于现代JavaScript应用程序的 静态模块打包工具 。当webpack处理应用程序时，它会在内部构建一个 依赖图 ，此依赖图对应映射到项目所需的每个模块，并生一个或多bundle。

• 依赖图：每当一个文件依赖另一个文件时，webpack 都会将文件视为直接存在 依赖关系。这使得 webpack 可以获取非代码资源，如 images 或 web 字体等。并会把它们作为 依赖 提供给应用程序。 当 webpack 处理应用程序时，它会根据命令行参数中或配置文件中定义的模块列表开始处理。 从 入口 开始，webpack 会递归的构建一个_依赖关系图_，这个依赖图包含着应用程序中所需的每个模块，然后将所有模块打包为少量的 bundle —— 通常只有一个 —— 可由浏览器加载。

入口（entry）

参考文档

入口起点（entry point）指示webpack应该使用哪个模块，来作为构建内部依赖图的开始。进入入口起点后，webpack会找出有哪些模块和库是入口起点（直接和间接）依赖的。 默认值是 ./src/index.js，但你可以通过在 webpack.config.js 中配置 entry 属性，来指定一个（或多个）不同的入口起点。

• 正常情况下也就用到 单文件入口，
• 如果你要用多文件入口的话

// 单入口
module.exports = {
  entry: './src/index.js'
}
module.exports = {
  entry: {
    main: './src/index.js'
  }
}

// 多入口
module.exports = {
  entry: {
    main: './src/index.js',
    vendor: './src/vendor.js'
  }
}
module.exports = {
  entry: ['./src/index.js', './src/vendor.js']
}

输出（output）

参考文档

output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'), // 输出的路径
    filename: '[name].js' // 文件名
  }
}

loader

参考文档

模块打包的方案

在更高层面，在 webpack 的配置中，loader 有两个属性： test 属性，识别出哪些文件会被转换。 use 属性，定义出在进行转换时，应该使用哪个 loader。

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
};

插件（plugin）

参考文档

loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

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

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

模式（mode）

参考文档

通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。

module.exports = {
  mode: 'production',
};