1.0.6

richardchen85 · Jun 9, 2020 · d291aac · d291aac
1 parent 8e4a455
commit d291aac
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 74 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -1,4 +1,3 @@
-**/*.md
 **/*.svg
 **/*.ejs
 **/*.html

diff --git a/CHANGELOG.md 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
@@ -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
@@ -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
@@ -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);
     },