webpack4 文档（入门） - 第六章 - configuration

因为 webpack 的配置一般是由 JS 文件编写的，所以配置文件的编写是很灵活的， webpack 会根据“规定的属性”去处理配置文件。

• 使用 require 引入模块；
• 使用 JS 流程控制语句；
• 抽取常用的值为变量和常量；
• 编写和执行函数来生成配置的一部分；

在合适的时候使用以上这些特性。

如果技术允许，下面这些做法是不太提倡的。

• 使用 webpck CLI 时，访问 CLI 的参数，如 –env；
• 使用了不确定的值，造成多次打包的结果不一致，违反了幂等性；
• 在一个文件中编写了很长的配置内容，没有将其分割成多个文件；

简单配置

webpack.config.js

var path = require('path');

module.exports = {
  mode: 'development',
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js'
  }
};

多目标配置

webpack.config.js

module.exports = [{
    output: {
      filename: './dist-amd.js',
      libraryTarget: 'amd'
    },
    name: 'amd',
    entry: './app.js',
    mode: 'development',
  }, {
    output: {
      filename: './dist-commonjs.js',
      libraryTarget: 'commonjs'
    },
    name: 'commonjs',
    entry: './app.js',
    mode: 'development',
  }];

以上会打包出 amd 和 commonjs 的模块代码，默认的输出目录是 dist 。

使用其他语言编写配置

• TypeScript
• CoffeeScript
• Babel
• JSX

后面在细说，一般使用 JS 就够用了…