专栏首页亦枫的大佬之路webpack中的配置(configuration)

webpack中的配置(configuration)

配置(configuration)

少有 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.config.js

var path = require('path');

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

导出多个配置对象

作为导出一个配置对象/配置函数的替代,可能需要导出多个配置对象(从 webpack 3.1.0 开始支持导出多个函数)。当运行 webpack 时,所有的配置对象都会构建。例如,导出多个配置对象,对于针对多个构建目标(例如 AMD 和 CommonJS)打包一个 library 非常有用。

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • webpack的入口起点(entry points)

    入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入...

    刘亦枫
  • webpack及其四个核心

    本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归...

    刘亦枫
  • webpack中的插件(plugins)

    插件是 webpack 的支柱功能。webpack 自身也是构建于,你在 webpack 配置中用到的相同的插件系统之上!

    刘亦枫
  • 一:打包JS

    创建vendor文件夹,其中minus.js、multi.js和sum.js分别用 CommonJS、AMD 和 ES6 规范编写。

    心谭博客
  • 3-9-10 Hot Module Replacement 热模块更新

    模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块,而无需重新加载整个页面。

    love丁酥酥
  • webpack4:多页面及分离第三方库和公用文件配置

    本篇开始学习webpack打包的构建配置,所用版本为webpack 4.16.1和webpack-cli 3.2.3。

    前端_AWhile
  • 十五:开发模式与webpack-dev-server

    借助webpack,在开发模式下我们可以使用热重载、路由重定向、代理服务器等功能,而source-map更是准确定位代码错误的利器。

    心谭博客
  • 8、webpack从0到1-基本的plugins

    参考链接: webpack-html-webpack-plugin html-webpack-plugin output-management

    Ewall
  • React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)

    本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React多页面应用1(webpack4 开发环境搭建...

    前端人人
  • CEF 设置页面缩放级别

    现在很多高分屏在笔记本和家用市场逐步扩大,普通应用大小在一个 2K 或者 4K 屏幕下就像一个便利签一样贴在屏幕上面,看着很小。于是操作系统提供了对分辨率进行缩...

    我与梦想有个约会

扫码关注云+社区

领取腾讯云代金券