通过 webpack-chain 的 API 扩展或修改 webpack 配置。
chainWebpack(config, { webpack }) {
// 设置 alias
config.resolve.alias.set('a', 'path/to/a');
// 删除进度条插件
config.plugins.delete('progress');
}
配置主题,实际上是配 less 变量。支持对象和字符串两种类型,字符串需要指向一个返回配置的文件。
"theme": {
"@primary-color": "#1DA57A"
}
||
"theme": "./theme-config.js"
通过 webpack 的 DefinePlugin 传递给代码,值会自动做 JSON.stringify 处理。 比如:
配置 webpack 的externals属性。 比如:
// 配置 react 和 react-dom 不打入代码
"externals": {
"react": "window.React",
"react-dom": "window.ReactDOM"
}
||
externals: {
jquery: 'jQuery'
}
import $ from 'jquery';
$('.my-element').animate(/* ... */);
配置 webpack 的 resolve.alias 属性。
resolve: {
alias: {
Utilities: path.resolve(__dirname, 'src/utilities/'),
Templates: path.resolve(__dirname, 'src/templates/')
}
}
配置 browserslist,同时作用于 babel-preset-env(postcss添加css前缀组件) 和 autoprefixer(编译预设环境 智能添加polyfill垫片代码)。 比如:
"browserslist": [
"> 1%",
"last 2 versions"
]
1% 全球超过1%人使用的浏览器 追踪的IE最新版本为11
last 2 versions 所有浏览器兼容到最后两个版本
配置 webpack 的 devtool 属性。
禁用 CSS Modules。
禁用 CSS 的 SourceMap 生成。
定义额外的 babel preset 列表,格式为数组
定义额外的 babel plugin 列表,格式为数组。
定义额外需要做 babel 转换的文件匹配列表,格式为数组,数组项是 webpack#Condition。
定义额外的 PostCSS 插件,格式为数组
指定项目目录下的文件不走 css modules,格式为数组,项必须是 css 或 less 文件。
定义需要单纯做复制的文件列表,格式为数组,项的格式参考 copy-webpack-plugin 的配置。
"copy": [
{
"from": "",
"to": ""
}
]
配置 webpack-dev-server 的 proxy 属性。 如果要代理请求到其他服务器,可以这样配:
"proxy": {
"/api": {
"target": "http://jsonplaceholder.typicode.com/",
"changeOrigin": true,
"pathRewrite": { "^/api" : "" }
}
}
配置 node-sass 的选项。注意:使用 sass 时需在项目目录安装 node-sass 和 sass-loader 依赖。
配置后会生成 manifest.json,option 传给 https://www.npmjs.com/package/webpack-manifest-plugin
"manifest": {
"basePath": "/app/"
}
忽略 moment 的 locale 文件,用于减少尺寸。
给 less-loader 的额外配置项。
给 css-loader 的额外配置项。
来源https://umijs.org/zh/guide/with-dva.html