Configuration-优快云博客

一、configuration types

1、exporting a object

2、exporting a function

输出的函数会注入两个参数：环境，options(描述了传给webpack的配置参数，比如output-filename和optimize-minimize).

module.exports = function(env, argv) {
  return {
    devtool: env.production ? 'source-maps' : 'eval',
     plugins: [
       new webpack.optimize.UglifyJsPlugin({
        compress: argv['optimize-minimize'] // only if -p or --optimize-minimize were passed
       })
     ]
  };
};

3、exporting a promise

webpack会运行配置文件输出的函数，可以返回一个Promise。用于异步加载配置参数。

module.exports = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        entry: './app.js',
        /* ... */
      })
    }, 5000)
  })
}

4、exporting multiple configurations

可以输出多个配置（多个配置函数webpack 3.1才支持）。当运行webpack时，所有的配置都会构建。可以用于构建针对不同target（AMD和CommonJS）的library.

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

二、Entry and Context

webpack从entry对象指定位置开始构建bundle。context是包含entry文件的文件夹的绝对路径。

1、context

绝对路径，用于从配置中解析入口点和加载程序。

context: path.resolve(__dirname, "app")

默认使用当前文件夹，但推荐配置一个值，这样就不用依赖cwd了。

2、entry

entry指定应用程序的入口。如果传入一个数组，数组中所有文件都会执行。动态加载的module不是入口。

一个最简单的原则：一个HTML页面一个入口。SPA：一个入口；MPA：多个入口

entry: {
  home: "./home.js",
  about: "./about.js",
  contact: "./contact.js"
}

1）naming

如果传入一个字符串或者字符串数组，chunk名字就是main。如果传入一个对象，对象的key值为chunk名字，value值描述chunk的入口。

2）动态入口

entry: () => './demo'
or
entry: () => new Promise((resolve) => resolve(['./demo', './demo2']))

当结合output.library时，如果传入一个数组，只有最后一个会被输出。

转载于:https://www.cnblogs.com/YangqinCao/p/8244212.html