@systemlight/webpack-config
Webpack smart configuration.
Support
- [x] webpack5
- [x] babel
- [x] mockjs
- [x] typescript
- [x] css
- [x] postcss
- [x] sass
- [x] less
- [x] stylus
- [x] react
- [x] vue
Usage
Install
npm i @systemlight/webpack-config webpack -D
or
yarn add @systemlight/webpack-config webpack -D
or
pnpm add @systemlight/webpack-config webpack -DUsage
Generate webpack.config.js
wcf initPop up configuration file
wcf inspect
wcf inspect build --mode production
wcf inspect server --mode productionOptions
All configuration items are default values generated by the intelligent detection environment, and no configuration is required without special requirements
Case
- Additional split code configuration
const {wcf} = require('@systemlight/webpack-config')
module.exports = wcf({
enableDevtool: false,
chainWebpack(config, context) {
context.configSplitChunks((options) => {
options.cacheGroups['foos'] = {
name: 'fooa',
test: /foo/,
enforce: true,
priority: 10
}
})
}
})- Ignored files should not have calls to import, require, define or any other importing mechanism
const {wcf} = require('@systemlight/webpack-config')
module.exports = wcf({
enableDevtool: false,
emitHtml: false,
chainWebpack(config) {
config.module.noParse(/jquery|lodash/)
}
})- Access global jQuery
const {wcf} = require('@systemlight/webpack-config')
module.exports = wcf({
enableDevtool: false,
chainWebpack(config, context) {
config.module.rule('jquery')
.test(/jquery/)
.use('expose-loader')
.loader('expose-loader')
.options({
exposes: ['$', 'jQuery']
})
context.configSplitChunks((options) => {
options.cacheGroups['jquery'] = {
name: 'jquery',
test: /jquery/,
enforce: true,
priority: 10
}
})
}
}, false)const {wcf} = require('@systemlight/webpack-config')
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
module.exports = wcf({
enableDevtool: false,
configureWebpack: {
plugins: [
new AddAssetHtmlPlugin({
filepath: require.resolve('jquery')
})
]
}
}, false)- Pop up TS type declaration file
module.exports = wcf({
enableHash: false,
isNodeEnv: true,
libraryName: 'Fuse',
chainWebpack(config) {
config.module.rule('ts/tsx').use('ts-loader').tap((args) => {
args['transpileOnly'] = false
args['compilerOptions']['noEmit'] = false
return args
})
}
})- Custom inject label
const {wcf} = require('@systemlight/webpack-config')
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
module.exports = wcf({
enableDevtool: false,
configureWebpack: {
plugins: [
new AddAssetHtmlPlugin({
filepath: require.resolve('jquery')
})
]
},
chainWebpack(config) {
config.plugin('HtmlWebpackPlugin').tap((args) => {
args[0].inject = false
args[0].scriptLoading = 'blocking'
return args
})
}
}, false)<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= htmlWebpackPlugin.options.title %></title>
<%= htmlWebpackPlugin
.tags
.bodyTags
.filter((tag) => /jquery/.test(tag.attributes.src))
.join('')
%>
</head>
<body>
<div id="root"></div>
<%= htmlWebpackPlugin
.tags
.bodyTags
.filter((tag) => !(/jquery/.test(tag.attributes.src)))
.join('')
%>
</body>
</html>- Injects a custom string into the body
const {wcf} = require('@systemlight/webpack-config')
module.exports = wcf({
port: 8000,
injectHtml:{content:'<div id="root"></div>', position:'start'}
})Notice!!!
- If you are developing a library or a multi project repository (monorepo), please note that importing CSS has side effects
- Please make sure that the package Remove "sideEffects" in json: false,
- Otherwise, the CSS code block will be lost by the webpack when the production environment is built