webpack概念之配置(Configuration)

责编:menVScode 2017-07-31 17:36 阅读(995)

        你可能已经注意到,很少有 webpack 配置看起来很完全相同。这是因为 webpack 的配置文件,是导出一个对象的 JavaScript 文件。此对象,由 webpack 根据对象定义的属性进行解析。

        因为 webpack 配置是标准的 Node.js CommonJS 模块,你可以做到以下事情:

        1. 通过 require(...) 导入其他文件

        2. 通过 require(...) 使用 npm 的工具函数

        3. 使用 JavaScript 控制流表达式,例如 ?: 操作符

        4. 对常用值使用常量或变量

        5. 编写并执行函数来生成部分配置

        请在合适的时机使用这些特性。

        虽然技术上可行,但应避免以下做法:

        1. 在使用 webpack 命令行接口(CLI)(应该编写自己的命令行接口(CLI),或使用 --env)时,访问命令行接口(CLI)参数

        2. 导出不确定的值(调用 webpack 两次应该产生同样的输出文件)

        3. 编写很长的配置(应该将配置拆分为多个文件)

        消除文档的重要之处是,可以有多种不同的格式和风格的 webpack 配置。关键是要保持一致,以便你和你的团队能够理解和维护。

        接下来的例子展示了 webpack 配置对象(webpack configuration object)如何即具有表现力,又具有可配置性,这是因为

配置对象即是代码

        最简单的配置

        webpack.config.js

var path = require('path');

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

        

        多个 Target

        查看:导出多个配置


        使用其他配置语言

        webpack 接受以多种编程和数据语言编写的配置文件。

        查看:配置语言

        参考:doc.webpack-china.org/concepts/configuration/

标签: webpack
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码