简介

概念

Webpack 是一款 JavaScript 应用的静态模块打包工具。Webpack 在处理应用时，会递归构建一个依赖关系，包含你所需要的每个模块，然后将这些模块打包成一个或多个文件。
Webpack 极易配置，你只需要了解四核心概念：
entry（入口）、 output（输出）、loaders（加载程序）、plugins（插件）.

Entry

入口文件指示 Webpack 从哪个模块开始编译，进入人口文件后，Webpack 就可发现入口文件依赖的模块和库。
每个依赖都会被处理并输出到打包文件中。
通过配置 Webpack 的 entry 属性，可以指定一个或多个入口文件。

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

Output

output 属性指定 Webpack 将打包后的文件如何命名以及在哪里输出。您可以通过 Webpack 的 output 属性对此进行配置。

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'
  }
};

上述例子，通过 output.path 和 output.filename 属性进行打包后文件的输出路径和文件名配置。

Loaders

Loaders 使 Webpack 能够处理 JavaScript 之外的文件（Webpack
本身只懂得 JavaScript）。他通过将其他各种类型的文件转换为 Webpack 可以处理的文件，来实现所有文件的打包。
注意：可导入各种类型的模块是 Webpack 的一个特性，这种语言拓展，让开发人员能更精确的打包依赖。
Loaders 的配置：

• test 属性指定要转换哪些文件
• use 属性指定用那种 loader 来进行转换

const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};
module.exports = config;

上述例子，指定 Webpack 要用 'raw-loader' 来解析 'txt' 文件。
文件解析出错时，Webpack 会发出警告。

Plugins

Plugins 非常强大，可以对打包进行优化、缩小或者处理其他各种更样的任务。
使用插件时，需要先通过 require() 将其添加到插件队列。大部分插件都是通过选项来自定义的。如果你要在一个配置中多次使用一个插件来达到不同目的，需要通过 new 来创建一个实例。

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');

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

module.exports = config;

Webpack 提供了很多插件，你可以点击查看插件列表