• webpack 是什么
  webpack不仅是一个js应用的打包工具（能支持ES Modules和Common JS），也能支持不同的资源（比如图片，字体和样式表），关注加载次数和性能

---

入口 Entry points

• 单个入口

// 简写版
const config = {
  entry: './path/to/my/entry/file.js'
}

module.exports = config;

等同于

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

若给entry属性，传一个文件路径数组，则创建多个主入口（multi-main entry）

• 对象语法（定义入口的方法中最可扩展的）

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

• 常见场景

1. 分离应用程序（app）和第三方库（vendor）入口

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

2. 多页面应用

module.exports = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

---

输出Output

• 用法

module.exports = {
  output: {
    filename: 'bundle.js',
  }
};

• 多入口
  filename需要使用变量，保证每个文件有独立的文件名

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

// writes to disk: ./dist/app.js, ./dist/search.js

---

mode

值有development, production(默认), none，可以启用不同模式下的webpack内置优化

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

development：将process.env.NODE_ENV设为development，启用 NamedChunksPlugin 和 NamedModulesPlugin。；

production： 将process.env.NODE_ENV设为production，启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.；

• 根据mode的值设置config,要export function而非对象

var config = {
  entry: './app.js'
  //...
};

module.exports = (env, argv) => {

  if (argv.mode === 'development') {
    config.devtool = 'source-map';
  }

  if (argv.mode === 'production') {
    //...
  }

  return config;
};

---

Loaders

使用loader的三种方法：

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

具体如下：

• 配置webpack.config.js : loader执行的顺序为从右向左执行，先sass-loader，再css-loader，最后style-loader

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

---

插件

插件是一个具有 apply 属性的 JavaScript 对象

需要使用插件时，先require()再添加到plugins数组
插件可以通过options选项自定义，可以在一个配置文件中多次使用同一个插件，使用new操作符创建实例

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

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