UmiJS介绍--webpack配置(七)

1.chainWebpack

通过 webpack-chain 的 API 扩展或修改 webpack 配置。

chainWebpack(config, { webpack }) {
  // 设置 alias
  config.resolve.alias.set('a', 'path/to/a');
  
  // 删除进度条插件
  config.plugins.delete('progress');
}

2.theme

配置主题,实际上是配 less 变量。支持对象和字符串两种类型,字符串需要指向一个返回配置的文件。

"theme": {
  "@primary-color": "#1DA57A"
}
||
"theme": "./theme-config.js"

3.define

通过 webpack 的 DefinePlugin 传递给代码,值会自动做 JSON.stringify 处理。 比如:

4.externals

配置 webpack 的externals属性。 比如:

// 配置 react 和 react-dom 不打入代码
"externals": {
  "react": "window.React",
  "react-dom": "window.ReactDOM"
}
||
externals: {
  jquery: 'jQuery'
}
import $ from 'jquery';
$('.my-element').animate(/* ... */);

5.alias

配置 webpack 的 resolve.alias 属性。

resolve: {
    alias: {
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      Templates: path.resolve(__dirname, 'src/templates/')
    }
  }

6.browserslist

配置 browserslist,同时作用于 babel-preset-env(postcss添加css前缀组件) 和 autoprefixer(编译预设环境 智能添加polyfill垫片代码)。 比如:

"browserslist": [
  "> 1%",
  "last 2 versions"
]

1% 全球超过1%人使用的浏览器 追踪的IE最新版本为11
last 2 versions 所有浏览器兼容到最后两个版本

7.devtool

配置 webpack 的 devtool 属性。

8.disableCSSModules

禁用 CSS Modules。

9.disableCSSSourceMap

禁用 CSS 的 SourceMap 生成。

10.extraBabelPresets

定义额外的 babel preset 列表,格式为数组

11.extraBabelPlugins

定义额外的 babel plugin 列表,格式为数组。

12.extraBabelIncludes

定义额外需要做 babel 转换的文件匹配列表,格式为数组,数组项是 webpack#Condition

13.extraPostCSSPlugins

定义额外的 PostCSS 插件,格式为数组

14.cssModulesExcludes

指定项目目录下的文件不走 css modules,格式为数组,项必须是 css 或 less 文件。

15.copy

定义需要单纯做复制的文件列表,格式为数组,项的格式参考 copy-webpack-plugin 的配置。

"copy": [
  {
    "from": "",
    "to": ""
  }
]

16.proxy

配置 webpack-dev-server 的 proxy 属性。 如果要代理请求到其他服务器,可以这样配:

"proxy": {
  "/api": {
    "target": "http://jsonplaceholder.typicode.com/",
    "changeOrigin": true,
    "pathRewrite": { "^/api" : "" }
  }
}

17.sass

配置 node-sass 的选项。注意:使用 sass 时需在项目目录安装 node-sass 和 sass-loader 依赖。

18.manifest

配置后会生成 manifest.json,option 传给 https://www.npmjs.com/package/webpack-manifest-plugin

"manifest": {
  "basePath": "/app/"
}

19.ignoreMomentLocale

忽略 moment 的 locale 文件,用于减少尺寸。

20.lessLoaderOptions

less-loader 的额外配置项。

21.cssLoaderOptions

css-loader 的额外配置项。

来源https://umijs.org/zh/guide/with-dva.html

  • 1
    点赞
  • 10
    收藏
  • 打赏
    打赏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 7

打赏作者

辛木木

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值