https://github.com/chryseis/beauty-webpack
quick build a react project
https://github.com/chryseis/beauty-webpack
webpack
Last synced: about 2 months ago
JSON representation
quick build a react project
- Host: GitHub
- URL: https://github.com/chryseis/beauty-webpack
- Owner: Chryseis
- Created: 2019-08-14T18:21:01.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T07:18:51.000Z (over 3 years ago)
- Last Synced: 2025-01-12T07:46:42.538Z (over 1 year ago)
- Topics: webpack
- Language: JavaScript
- Size: 4.07 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Beauty-webpack
 
## Motive
快速搭建前端项目，减少webpack配置学习成本
## Install
```bash
npm install beauty-webpack --save-dev
```
## Usage
### 命令
```bash
//package.json
{
"script": {
//开发
"start": "beauty start",
//打包
"build": "beauty build",
//分析
"analyze": "beauty analyze"
}
}
```
### Spa项目
#### 目录结构
```
.
+-- src
| +-- ...
| +-- index.(js|jsx)
```
#### 入口文件
```jsx harmony
//src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
const Home=()=>
Home
ReactDOM.render(, document.querySelector('#root'))
```
### Mpa项目
#### 目录结构
```
.
+-- src
| +-- ...
| +-- activity
| +-- index.(js|jsx)
| +-- home
| +-- index.(js|jsx)
```
#### 入口文件
```jsx harmony
//src/(folder)/index.js
import React from 'react'
import ReactDOM from 'react-dom'
const Home=()=>
Home
ReactDOM.render(, document.querySelector('#root'))
```
### 配置文件
允许自定义添加配置文件修改webpack配置
需要在根目录添加.beautyrc.js文件
#### 属性
属性|说明|备注
---|---|---
entry|入口配置(只限Spa项目)|参考[webpack entry](https://www.webpackjs.com/configuration/entry-context/#entry)
output|输出配置| 参考[webpack output](https://www.webpackjs.com/configuration/output/)
publicPath|文件输出目录|参考[webpack publicPath](https://www.webpackjs.com/configuration/output/#output-publicpath)
isExtractCss|是否提取公共样式|
alias|别名|默认@为src文件夹
splitChunks|分包策略|参考[webpack splitChunks](https://webpack.js.org/plugins/split-chunks-plugin/#root)
chunks|js分包模块|配合entry
define|定义项目全局变量|参考[webpack define](https://webpack.js.org/plugins/define-plugin/#root)
devServer|开发服务器配置|参考[webpack devServer](https://www.webpackjs.com/configuration/dev-server/)
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](https://github.com/jantimon/html-webpack-plugin)
```html
<%= htmlWebpackPlugin.options.title %>
Sorry, we need js to run correctly!
<% htmlWebpackPlugin.files.js.forEach(function(js) { %>
<% }) %>
<% if(webpackConfig.mode === 'production') { %>
<% } %>
```