一、安装

通过npm安装；

npm install webpack -g
或
cnpm install webpack -g

复制

如果你使用 webpack 4+ 版本，你还需要安装 CLI；

npm install --save-dev webpack-cli
或
cnpm install --save-dev webpack-cli

二、配置文件

配置文件webpack.config.js；
在vue工程中，可能不提供单独的webpack配置，可以在vue.config.js中配置；

三、单个入口（简写）语法

用法：entry: string|Array<string>

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

等同于

const config = {
  entry: {
    main: './path/to/my/entry/file.js'
  }
};

复制

四、 对象语法

用法：entry: {[entryChunkName: string]: string|Array<string>}

const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

五、output概述

配置output选项可以控制 webpack 如何向硬盘写入编译文件。注意，即使可以存在多个入口起点，但只指定一个输出配置。
在 webpack 中配置output属性的最低要求是，将它的值设置为一个对象，包括以下两点：

• filename用于输出文件的文件名。
• 目标输出目录path的绝对路径。

六、多个入口起点

如果配置创建了多个单独的 "chunk"（例如，使用多个入口起点或使用像 CommonsChunkPlugin 这样的插件），则应该使用占位符(substitutions)来确保每个文件具有唯一的名称。

{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

// 写入到硬盘：./dist/app.js, ./dist/search.js

七、装载器概述

loader 用于对模块的源代码进行转换。loader 可以使你在import或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中importCSS文件！

八、装载器用法

在你的应用程序中，有三种使用 loader 的方式：

1. 配置（推荐）：在 webpack.config.js 文件中指定 loader。
2. 内联：在每个 import 语句中显式指定 loader。
3. CLI：在 shell 命令中指定它们。

装载器配置

module.rules允许你在 webpack 配置中指定多个 loader。 这是展示 loader 的一种简明方式，并且有助于使代码变得简洁。同时让你对各个 loader 有个全局概览；

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }

内联

可以在import语句或任何等效于 "import" 的方式中指定 loader。使用!将资源中的 loader 分开。分开的每个部分都相对于当前目录解析。

import Styles from 'style-loader!css-loader?modules!./styles.css';

通过前置所有规则及使用!，可以对应覆盖到配置中的任意 loader。
选项可以传递查询参数，例如?key=value&foo=bar，或者一个 JSON 对象，例如?{"key":"value","foo":"bar"}。

CLI

你也可以通过 CLI 使用 loader：

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

复制

这会对.jade文件使用jade-loader，对.css文件使用style-loader和css-loader。