WebPack

初识WebPack

本质上，webpack 是一个现代 JavaScript 应用程序的*静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)*，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

入口(entry)

**入口起点(entry point)*指示 webpack 应该使用哪个模块，来作为构建其内部依赖图*的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

每个依赖项随即被处理，最后输出到称之为 bundles 的文件中，我们将在下一章节详细讨论这个过程。

可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）。默认值为 ./src,会自动寻找src目录下的index.js文件。

接下来我们看一个 entry 配置的最简单例子：

webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js'
};

出口(output)

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程：

webpack.config.js

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

配置多个入口

const path = require('path');

module.exports = {
    entry: {
        home: './src/home.js',
        about: './src/about.js',
        other: './src/other.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].output.js'
    }
};