- 避免反复配置
webpack
时可能的配置遗漏导致webpack
运行不如预期 - 抽取常用的配置项,如优化等
.env
文件
API_URL=
PORT=4000
HOST=localhost
WS_URL=
// webpack.dev.js
const { dev } = require('@liutsing/webpack-config')
module.exports = dev
// package.json/script
// cross-env <> webpack serve --config config/webpack.dev.js
// webpack.dev.js
const { dev } = require('@liutsing/webpack-config')
module.exports = dev
// package.json/script
// cross-env <> webpack serve --config config/webpack.dev.js
// webpack.dev.js
const { dev, base } = require('@liutsing/webpack-config')
const { merge } = require('webpack-merge')
// extend which preset config if you need
module.exports = merge(base, {
// your custom config
})
// 可以console输出合并后的配置信息
- ContextReplacementPlugin
- DefinePlugin
- OptimizeCSSAssetsPlugin
import IconParking from './icon-parking.svg'
export const IconWrap = () => {
return (
<div>
<IconParking />
</div>
)
}
- create-react-app
- vue-cli
- How To Integrate SVG For Website And React App With Webpack
- How to use SVGs in React
- How to Use the SVG Symbol and React to Create Custom Icons
- svgo-loader
- svgr
- webpack-merge
- build-performance reference
✨✨✨
打包出多种输出产物,支持现代浏览器和 legacy 浏览器 // TODO 参考 vue-cli/cra/其他开源社区分享