webpack config lib

target

• 避免反复配置 webpack 时可能的配置遗漏导致 webpack 运行不如预期
• 抽取常用的配置项，如优化等

使用

setup

.env文件

API_URL=
PORT=4000
HOST=localhost
WS_URL=

dev

// webpack.dev.js
const { dev } = require('@liutsing/webpack-config')

module.exports = dev
// package.json/script
// cross-env <> webpack serve --config config/webpack.dev.js

prod

// webpack.dev.js
const { dev } = require('@liutsing/webpack-config')

module.exports = dev
// package.json/script
// cross-env <> webpack serve --config config/webpack.dev.js

extend

// 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输出合并后的配置信息

关键点

内置 plugins

• ContextReplacementPlugin
• DefinePlugin
• OptimizeCSSAssetsPlugin

tree-shaking

HMR

optimization

assets handle

css

less

svg 的处理方式

import IconParking from './icon-parking.svg'

export const IconWrap = () => {
  return (
    <div>
      <IconParking />
    </div>
  )
}

可拓展

babel 拓展

postcss-loader

dll

Reference

• 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

Idea

✨✨✨

打包出多种输出产物，支持现代浏览器和 legacy 浏览器 // TODO 参考 vue-cli/cra/其他开源社区分享

• https://github.com/TypeStrong/fork-ts-checker-webpack-plugin
• https://github.com/webpack-contrib/eslint-webpack-plugin
• https://github.com/seek-oss/css-modules-typescript-loader