From d291aacea23ce7b69c942284946278d92bf4deb6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E7=A4=BC=E5=BC=BA?= Date: Tue, 9 Jun 2020 14:42:48 +0800 Subject: [PATCH] 1.0.6 --- .prettierignore | 1 - CHANGELOG.md | 36 +++++++++++++++++++ README.md | 27 ++------------ package.json | 91 ++++++++++++++++++++++++----------------------- webpack.config.js | 30 +++++++++++++--- 5 files changed, 111 insertions(+), 74 deletions(-) create mode 100644 CHANGELOG.md diff --git a/.prettierignore b/.prettierignore index 667081a..119f9f7 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,4 +1,3 @@ -**/*.md **/*.svg **/*.ejs **/*.html diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..92a922b --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,36 @@ +# changelog + +## v1.0.6 + +- 增加 `DefinePlugin` 插件来注入全局变量 +- 增加 `webpack-bundle-analyzer` 插件来分析打包后的文件体积 +- 增加了字体文件的 `loader` 定义 +- 更新了部分文档 +- 更新依赖包版本并固定版本号 + +## v1.0.5 + +- 添加 prettier 自动格式化代码 + +## v1.0.4 + +- 支持 less +- 支持 css modules + +## v1.0.3 + +- 支持 TypeScript +- 更新了一些插件 + +## v1.0.2 + +- 更新到 babel7 +- 更新 css 导出到文件插件，并添加 postcss 支持 +- 更新压缩代码插件 +- 添加 eslint + +## v1.0.1 + +- 增加接口代理功能，方便前后端联调和查找 `bug` 用 +- `bundle` 文件加 `hash` +- 打包时清空 `dist` 目录 diff --git a/README.md b/README.md index e1f49d7..067988d 100644 --- a/README.md +++ b/README.md @@ -1,32 +1,9 @@ # webpack-react-startup -react project base on webpack without create-react-app 不用create-react-app搭建基于webpack的react项目 +react project base on webpack without create-react-app 不用 create-react-app 搭建基于 webpack 的 react 项目 详情请阅读：[博客文章](https://www.chenliqiang.cn/post/webpack-react-without-create-react-app.html) ## changelog -更多版本请查看：[版本发布记录](https://github.com/richardchen85/webpack-react-startup/releases) - -### v1.0.4 - -* 支持 less -* 支持 css modules - -### v1.0.3 - -* 支持 TypeScript -* 更新了一些插件 - -### v1.0.2 - -* 更新到 babel7 -* 更新 css 导出到文件插件，并添加 postcss 支持 -* 更新压缩代码插件 -* 添加 eslint - -### v1.0.1 - -* 增加接口代理功能，方便前后端联调和查找 `bug` 用 -* `bundle` 文件加 `hash` -* 打包时清空 `dist` 目录 +更多版本请查看：[版本发布记录](./CHANGELOG.md) diff --git a/package.json b/package.json index ab54fb4..7d3d26d 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,9 @@ "scripts": { "start": "webpack-dev-server --mode development --open --hot", "proxy": "webpack-dev-server --mode development --open --hot --env proxy", - "build": "rm -rf ./dist && webpack --mode production" + "build": "rm -rf ./dist && webpack --mode production", + "analyze": "webpack --mode production --analyze", + "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'" }, "keywords": [ "webpack", @@ -16,51 +18,52 @@ "author": "richardchen", "license": "MIT", "dependencies": { - "react": "^16.13.1", - "react-dom": "^16.13.1" + "react": "16.13.1", + "react-dom": "16.13.1" }, "devDependencies": { - "@babel/cli": "^7.8.4", - "@babel/core": "^7.9.6", - "@babel/plugin-proposal-class-properties": "^7.8.3", - "@babel/plugin-proposal-decorators": "^7.8.3", - "@babel/plugin-proposal-object-rest-spread": "^7.9.6", - "@babel/preset-env": "^7.9.6", - "@babel/preset-react": "^7.9.4", - "@babel/preset-typescript": "^7.9.0", - "@types/react": "^16.9.34", - "@types/react-dom": "^16.9.7", - "@typescript-eslint/eslint-plugin": "^2.31.0", - "@typescript-eslint/parser": "^2.31.0", - "babel-eslint": "^10.1.0", - "babel-loader": "^8.1.0", - "css-loader": "^3.5.3", - "eslint": "^6.8.0", - "eslint-config-react-app": "^5.2.1", - "eslint-loader": "^4.0.2", - "eslint-plugin-flowtype": "^4.7.0", - "eslint-plugin-import": "^2.20.2", - "eslint-plugin-jsx-a11y": "^6.2.3", - "eslint-plugin-react": "^7.19.0", - "eslint-plugin-react-hooks": "^4.0.0", - "file-loader": "^6.0.0", - "html-webpack-plugin": "^4.3.0", - "husky": "^4.2.5", - "less": "^3.11.1", - "less-loader": "^6.0.0", - "mini-css-extract-plugin": "^0.9.0", - "minimist": "^1.2.5", - "optimize-css-assets-webpack-plugin": "^5.0.3", - "postcss-loader": "^3.0.0", - "postcss-preset-env": "^6.7.0", - "prettier": "^2.0.5", - "pretty-quick": "^2.0.1", - "style-loader": "^1.2.1", - "terser-webpack-plugin": "^3.0.0", - "typescript": "^3.8.3", - "webpack": "^4.43.0", - "webpack-cli": "^3.3.11", - "webpack-dev-server": "^3.10.3" + "@babel/cli": "7.10.1", + "@babel/core": "7.10.2", + "@babel/plugin-proposal-class-properties": "7.10.1", + "@babel/plugin-proposal-decorators": "7.10.1", + "@babel/plugin-proposal-object-rest-spread": "7.10.1", + "@babel/preset-env": "7.10.2", + "@babel/preset-react": "7.10.1", + "@babel/preset-typescript": "7.10.1", + "@types/react": "16.9.35", + "@types/react-dom": "16.9.8", + "@typescript-eslint/eslint-plugin": "3.2.0", + "@typescript-eslint/parser": "3.2.0", + "babel-eslint": "10.1.0", + "babel-loader": "8.1.0", + "css-loader": "3.5.3", + "eslint": "7.2.0", + "eslint-config-react-app": "5.2.1", + "eslint-loader": "4.0.2", + "eslint-plugin-flowtype": "5.1.3", + "eslint-plugin-import": "2.21.1", + "eslint-plugin-jsx-a11y": "6.2.3", + "eslint-plugin-react": "7.20.0", + "eslint-plugin-react-hooks": "4.0.4", + "file-loader": "6.0.0", + "html-webpack-plugin": "4.3.0", + "husky": "4.2.5", + "less": "3.11.3", + "less-loader": "6.1.0", + "mini-css-extract-plugin": "0.9.0", + "minimist": "1.2.5", + "optimize-css-assets-webpack-plugin": "5.0.3", + "postcss-loader": "3.0.0", + "postcss-preset-env": "6.7.0", + "prettier": "2.0.5", + "pretty-quick": "2.0.1", + "style-loader": "1.2.1", + "terser-webpack-plugin": "3.0.3", + "typescript": "3.9.5", + "webpack": "4.43.0", + "webpack-bundle-analyzer": "3.8.0", + "webpack-cli": "3.3.11", + "webpack-dev-server": "3.11.0" }, "browserslist": [ ">0.2%", diff --git a/webpack.config.js b/webpack.config.js index 9282ca7..f91528a 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,18 +1,21 @@ const path = require('path'); +const webpack = require('webpack'); const TerserPlugin = require('terser-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); +const BundleAnalyzerPlugin = require('webpack-bundle-analyzer/lib/BundleAnalyzerPlugin'); const argv = require('minimist')(process.argv.slice(0)); const mockServer = require('./mock/server'); const proxyConfig = require('./mock/config.js'); const production = argv.mode === 'production'; const proxy = argv.env === 'proxy'; +const analyze = argv.analyze; // 联调时，数据从代理远端接口来 let proxyTable = {}; -Object.keys(proxyConfig).forEach(key => { +Object.keys(proxyConfig).forEach((key) => { proxyTable[proxyConfig[key].remote] = { // 远端服务器域名 target: 'http://xxx.com', @@ -64,7 +67,16 @@ module.exports = { filename: production ? 'css/[name].[hash:8].css' : '[name].css', chunkFilename: production ? 'css/[id].[hash:8].css' : '[id].css', }), - ], + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify(production ? 'production' : 'development'), + }), + analyze && + new BundleAnalyzerPlugin({ + generateReportFile: true, // 开启报告生成功能 + reportDepth: 2, // 裁剪深度 2 + reportDir: process.cwd(), + }), + ].filter(Boolean), module: { rules: [ // 内置 eslint @@ -98,7 +110,16 @@ module.exports = { }, }, { - test: /.(png|jpg|svg)$/, + test: /.(png|jpe?g|svg|gif|webp|ico)(\?.*)?$/, + use: { + loader: 'file-loader', + options: { + name: production ? 'img/[name].[hash:8].[ext]' : 'img/[name].[ext]', + }, + }, + }, + { + test: /\.(eot|woff|woff2|ttf)(\?.*)?$/, use: { loader: 'file-loader', options: { @@ -168,9 +189,10 @@ module.exports = { }, // 具体参考：https://webpack.js.org/configuration/dev-server/ devServer: { + quiet: true, // 代理模式 proxy: proxy ? proxyTable : {}, - after: app => { + after: (app) => { // 不在代理模式时才开启本地数据模拟 !proxy && mockServer(app); },