基于webpack5
的前端项目打包工具。项目源码:https://github.com/geekip/webun
全局安装,随处使用。项目下无须安装各种编译依赖包,减少众多项目的
node_modules
占用磁盘空间。
开箱即用零配置,默认开启编译缓存、多线程、代码压缩、代码分割等优化配置,同时也支持自定义配置。
集成bebel
swc
esbuild
,可根据需求自由选择,提升编译速度。
开发调试模式监听文件变更自动刷新浏览器,集成vue
react
的HMR热更新。
pnpm i webun -g
一个项目同时支持react
vue
共存,能编译jsx
tsx
ts
js
+ css
less
sass/scss
styl
# 查看使用帮助
webun -h
项目结构示例
├──public
├──src
| ├──assets
| | ├──css
| | | ├──var.less
| | | ├──var.scss
| | | ├──style.less
| | | └──style.scss
| | ├──images
| | └──fonts
| ├──...
| ├──App.vue
| ├──App.jsx
| ├──main.{js|ts|jsx|tsx}
| ├──favicon.ico
| └──index.html
├──...
├──package.json
└──webun.config.js
基于webpack-dev-server
实现
# 快速调试,默认地址0.0.0.0,默认端口9527
webun
# 指定地址和端口
webun --host 0.0.0.0 --port 8080
# 调式生产模式,默认无sourceMap
webun --mode production
# 打包生产模式
webun build
# 打包开发模式,默认有sourceMap
webun build --mode development
默认开启编译缓存,提升编译速度,但有时修改配置后缓存会造成打包异常,需要忽略缓存进行编译
# 忽略缓存 --force 或 -f
webun --force
webun build -f
模式变量 NODE_ENV
值为:development
or production
操作变量 NODE_ACT
值为:serve
or build
- 在配置文件里使用
const isServe = process.env.NODE_ACT === 'serve'
const isDev = process.env.NODE_ENV === 'development'
module.exports = {
...
// 生产环境指定静态文件的地址
output:{
publicPath: isDev ? '' : 'http://cdn.com/',
},
// 开发环境开启 source-map
devtool: isDev ? 'eval-cheap-module-source-map' : false,
// 指定不同的自定义变量
define:{
api_base_url: isServe : 'http://localhost/api' : 'http://backend.com/api'
}
...
}
- 在html模板里使用
<!-- 获取运行时变量 -->
<%= process.env.NODE_ENV %>
- 在项目文件里使用
// 获取运行时变量
const mode = process.env.NODE_ENV
console.log(mode)
console.log(api_base_url)
零配置即可使用!
默认入口文件为
./src/index
或./src/main
,支持mjs、js、jsx、ts、tsx、vue文件;
自动扫描匹配html模板文件为./src/index.html
自动扫描匹配favicon文件为./src/favicon.ico
如需自定义配置,请在项目根目录创建配置文件 ./webun.config.js
// 配置文件格式
module.exports = {
name: 'Webun Project',
target: 'web',
entry: './src/index',
...
}
// 或者
module.exports = function(command, mode){
return {
name: 'Webun Project',
target: 'web',
entry: './src/index',
...
}
}
string
项目名称,无配置时默认使用./package.json的name
,参考webpack.name
string
指定运行环境,参考webpack.target
// 默认配置
module.exports = {
...
target: ['web','es2015']
...
}
string
object
控制 bundle 信息的显示模式,参考webpack.stats
// 默认配置
module.exports = {
...
stats: 'errors-only'
...
}
object
控制 bundle 信息的显示模式,参考webpack.infrastructurelogging
// 默认配置
module.exports = {
...
infrastructureLogging: {
level: "error"
}
...
}
Object
自定义全局变量,参考webpack DefinePlugin
// 配置文件
module.exports = {
...
define: {
test_string: 'test...',
test_number: 123
}
...
}
// 使用请参考上面的 `获取环境变量`
// ./src/main.js
console.log(test_string)
Array
入口文件配置,参考 webpack.entry
自动读取./src/index
或./src/main
,后缀支持.mjs
.js
.jsx
.ts
.tsx
.vue
// 自定义配置
module.exports = {
...
entry: {
app_a: './src/app_a.js',
app_b: './src/app_b.ts',
app_c: './src/app_c'
}
...
}
Object
基础路径配置,不建议修改
// 默认配置
module.exports = {
...
entry: {
src: './src',
dist: './dist'
}
...
}
Boolean
多线程编译,默认 true
,大幅提升编译速度
Boolean
编译缓存,默认 true
,大幅提升编译速度
Boolean
Object
编译分析,参考 webpack-bundle-analyzer
默认false
// 设置为`false`时不开启
module.exports = {
...
analyzer: false
...
}
// 设置为`true`时的默认配置
module.exports = {
...
analyzer: {
analyzerHost: '0.0.0.0',
analyzerPort: 9528,
}
...
}
Boolean
Object
css自动补全后缀,参考 autoprefixer
默认false
// 设置为`true`开启
module.exports = {
...
autoprefixer: true
...
}
// 设置为`true`时的默认配置
module.exports = {
...
autoprefixer: {
overrideBrowserslist: [
"iOS 7.1",
"last 2 versions",
">0%"
],
grid: true
}
...
}
String
Array
全局样式变量,参考 sass-resources-loader
默认:./src/assets/css/var.{less,scss,sass,styl}
,支持globjs
规则匹配,会自动扫描和导入./src/assets/css/
目录下的var
文件,可根据不同的css rules自动注入全局样式变量。
// 自定义配置 String
module.exports = {
...
globalStyle: './src/style/var.*.less'
...
}
// 自定义配置 Array
module.exports = {
...
globalStyle: [
'./src/less/var.*.less',
'./src/scss/var.scss'
]
...
}
Boolean
Object
文件大小限制,参考webpack.performance
// 默认配置
module.exports = {
...
performance: {
maxEntrypointSize: 10000000,
maxAssetSize: 30000000
}
...
}
// 关闭
module.exports = {
...
performance: false
...
}
Number
图片文件base64阈值,例如图片小于4kb就以base64输出,超过则会使用url输出。参考Rule.parser.dataUrlCondition
// 默认配置
module.exports = {
...
assetMaxSize: 4096
...
}
Boolean
Array
html模板文件配置,支持多页面,为空则不打包html文件。参考 html-webpack-plugin
// 不生成html
module.exports = {
...
templates: false
...
}
// 多页面示例配置
module.exports = {
...
templates:[
{
template: 'src/a.html',
chunks:['app_a']
},
{
template: 'src/b.html',
excludeChunks:['app_a']
}
]
...
}
申明外部扩展,参考webpack.externals
Object
自动加载模块配置,在使用时将不再需要import和require进行引入,直接使用即可。参考 webpack.providePlugin
Object
解析配置。参考 webpack.resolve
// 默认配置
module.exports = {
...
resolve: {
extensions: [
'.mjs', '.js', '.jsx', '.ts', '.tsx', '.json', '.vue',
'.css', '.less', '.sass', '.scss'
],
alias: {
'#' : path.resolve(__dirname),
'@' : path.resolve('src' )
},
mainFiles: ['index', 'main']
},
resolveLoader:{
modules = [
path.resolve(__dirname, 'node_modules'),
path.resolve(lib, 'node_modules')
]
}
...
}
Object
输出文件名配置,参考 webpack.output.filename
// 默认配置
module.exports = {
...
fileName: {
js: 'assets/js/[name].js',
css: 'assets/css/[name].css',
img: 'assets/img/[name][ext]',
font: 'assets/font/[name][ext]',
media: 'assets/media/[name][ext]',
}
...
}
Boolean
String
是否生成 source map
,参考 webpack.devtool
// 默认配置,生产环境不使用source map
const isDev = process.env.NODE_ENV === 'development'
module.exports = {
...
devtool: isDev ? 'eval-cheap-module-source-map' : false
...
}
Object
开发调试配置, 参考 webpack.devtool
// 默认配置
module.exports = {
...
devServer: {
allowedHosts: 'all',
headers: {
'Access-Control-Allow-Origin': '*'
},
client: {
logging: 'error',
overlay: true
},
hot: true,
host: '0.0.0.0',
port: 9527,
historyApiFallback: true,
static: './public'
}
...
}
Object
// 默认配置
module.exports = {
...
jsLoader: {
// babel swc esbuild,推荐使用swc
type: 'swc',
target: 'es2015',
jsx: {
pragma: 'React.createElement',
pragmaFrag: 'React.Fragment'
}
},
...
}
Object
输出配置,参考webpack.output
// 默认配置
module.exports = {
...
output: {
filename: fileName.js,
path: dirs.dist,
clean: true,
library: {
name: '[name]',
type: 'umd',
umdNamedDefine: true
}
}
...
}
Object
静态文件复制,参考CopyWebpackPlugin
// 配置示例
module.exports = {
...
copy: {
patterns: [
{ from: 'public', to: 'public' }
]
}
...
}
Boolean
Object
代码压缩,使用jsLoader
的配置压缩代码
module.exports = {
...
// 设置为`false`时不压缩代码
minify: false
...
}
// 为`true`时的默认配置
module.exports = {
...
minify: {
// 移除注释
drop_comments: true,
// 移除console
drop_console: false,
// 移除debugger
drop_debugger: true
}
...
}
type Boolean
Object
代码分割,参考webpack.optimization.splitChunks
// 设置为`false`时不分割代码
module.exports = {
...
splitChunks: false
...
}
// 设置为`true`时的默认配置
module.exports = {
...
splitChunks: {
chunks: 'all',
minSize: 102400,
maxSize: 1843200,
minChunks: 1,
maxAsyncRequests: 10,
maxInitialRequests: 10,
automaticNameDelimiter: '-',
cacheGroups: {
vue: {
name: 'chunk-vue',
test: /[\\/]node_modules[\\/](vue.*|@vue.*)[\\/]/,
priority: 50
},
react: {
name: 'chunk-react',
test: /[\\/]node_modules[\\/](react.*|redux.*|scheduler|@reduxjs.*|immer|history)[\\/]/,
priority: 40,
reuseExistingChunk: true,
minSize: 0
},
polyfill: {
name: 'chunk-polyfill',
test: /[\\/]node_modules[\\/](core-js|@babel\/runtime|@swc\/helpers|tslib)[\\/]/,
priority: 30
},
vendors: {
name: 'chunk-vendors',
test: /[\\/]node_modules[\\/]/,
priority: -10,
chunks: 'initial'
},
common: {
name: 'chunk-common',
minChunks: 2,
priority: -20,
chunks: 'initial',
reuseExistingChunk: true
}
}
}
...
}