Beauty-webpack
Motive
快速搭建前端项目,减少webpack配置学习成本
Install
npm install beauty-webpack --save-dev
Usage
命令
//package.json
Spa项目
目录结构
.
+-- src
| +-- ...
| +-- index.(js|jsx)
入口文件
//src/index.jsimport React from 'react'import ReactDOM from 'react-dom' const Home=<div>Home</div> ReactDOM
Mpa项目
目录结构
.
+-- src
| +-- ...
| +-- activity
| +-- index.(js|jsx)
| +-- home
| +-- index.(js|jsx)
入口文件
//src/(folder)/index.jsimport React from 'react'import ReactDOM from 'react-dom' const Home=<div>Home</div> ReactDOM
配置文件
允许自定义添加配置文件修改webpack配置 需要在根目录添加.beautyrc.js文件
属性
属性 | 说明 | 备注 |
---|---|---|
entry | 入口配置(只限Spa项目) | 参考webpack entry |
output | 输出配置 | 参考webpack output |
publicPath | 文件输出目录 | 参考webpack publicPath |
isExtractCss | 是否提取公共样式 | |
alias | 别名 | 默认@为src文件夹 |
splitChunks | 分包策略 | 参考webpack splitChunks |
chunks | js分包模块 | 配合entry |
define | 定义项目全局变量 | 参考webpack define |
devServer | 开发服务器配置 | 参考webpack devServer |
title | 输出页面的title | |
port | 开发服务器端口号 | 默认值:3000 |
open | 开发服务器编译完成是否立即打开页面 | |
babelPlugins | babel插件引入 | babelPlugins: [["import", {"libraryName": "antd","libraryDirectory": "es","style": true // `style: true` 会加载 less 文件}]] |
isCssModule | 是否开启css module | 默认值:true |
isRem|是否启用rem|默认值:true rootFontSize|根元素字体大小|默认值:75
配置文件例子
//.beautyrc.js
const path = require('path')
const PREFIX = process.env.PREFIX
const env = process.env.NODE_ENV
module.exports = {
entry: {
track: path.resolve(__dirname, './src/utils/track'),
beauty: ['@babel/polyfill', path.resolve(__dirname, './src/index')]
},
chunks: ['vendor', 'beauty', 'track'],
isExtractCss: env !== 'development',
define: {
"process.env.BASE_NAME": JSON.stringify(PREFIX || '')
},
splitChunks: {
maxAsyncRequests: Infinity,
maxInitialRequests: Infinity,
minSize: 10000,
cacheGroups: {
vendor: {
name: 'vendor',
chunks: 'all',
test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
},
clipboard: {
name: 'clipboard',
chunks: 'all',
test: /[\\/]node_modules[\\/](clipboard)[\\/]/,
}
}
}
}
模版文件
默认有模板文件,需要自定义可以在src目录下添加document.ejs 配置参数参考html-webpack-plugin
<%= htmlWebpackPlugin.options.title %> Sorry, we need js to run correctly!<% htmlWebpackPlugin.files.js.forEach(function(js) { %><% }) %><% if(webpackConfig.mode === 'production') { %><% } %>