update

The-Punk-and-The-Monk · Jul 25, 2020 · 1261554 · 1261554
1 parent 1e9c0d5
commit 1261554
Show file tree

Hide file tree

Showing 24 changed files with 7,557 additions and 44 deletions.
diff --git a/webpack-react-scaffolding/.babelrc.json b/webpack-react-scaffolding/.babelrc.json
@@ -0,0 +1,24 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {  
+        "useBuiltIns": "usage", 
+        "corejs": 3
+      }  
+    ],
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "absoluteRuntime": false,
+        "corejs": 3, 
+        "helpers": true,
+        "regenerator": true,
+        "useESModules": false
+      }
+    ]
+  ]
+}
diff --git a/webpack-react-scaffolding/build/dist/index.f613e2b2.js b/webpack-react-scaffolding/build/dist/index.f613e2b2.js
diff --git a/webpack-react-scaffolding/build/dist/index.html b/webpack-react-scaffolding/build/dist/index.html
@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Document</title></head><body><div id="root"></div><script src="vendor.7c17682a.js"></script><script src="index.f613e2b2.js"></script></body></html>
diff --git a/webpack-react-scaffolding/build/dist/vendor.7c17682a.js b/webpack-react-scaffolding/build/dist/vendor.7c17682a.js
diff --git a/webpack-react-scaffolding/build/dist/vendor.7c17682a.js.LICENSE.txt b/webpack-react-scaffolding/build/dist/vendor.7c17682a.js.LICENSE.txt
@@ -0,0 +1,32 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/** @license React v0.19.1
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
diff --git a/webpack-react-scaffolding/build/paths.jsx b/webpack-react-scaffolding/build/paths.jsx
@@ -0,0 +1,18 @@
+/*
+ * @Author: LinFeng
+ * @LastEditors: LinFeng
+ * @Date: 2020-07-24 18:37:21
+ * @LastEditTime: 2020-07-24 19:16:09
+ * @FilePath: /webpack-react-scaffolding/build/paths.jsx
+ * @Description: 常用路径
+ */ 
+
+const path = require('path');
+
+const srcPath = path.join(__dirname, '..', 'src')
+const distPath = path.join(__dirname, 'dist')
+
+module.exports = {
+  srcPath,
+  distPath
+}
diff --git a/webpack-react-scaffolding/build/webpack.common.js b/webpack-react-scaffolding/build/webpack.common.js
@@ -0,0 +1,33 @@
+/*
+ * @Author: LinFeng
+ * @LastEditors: LinFeng
+ * @Date: 2020-07-24 18:36:42
+ * @LastEditTime: 2020-07-24 19:34:39
+ * @FilePath: /webpack-react-scaffolding/build/webpack.common.js
+ * @Description: 
+ */ 
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const { srcPath, distPaht } = require('./paths.jsx')
+
+module.exports = {
+  entry: {
+    index: path.join(srcPath, 'App.jsx'),
+    // other: path.join(srcPath, 'Other.jsx')
+  },
+  module: {
+    rules:[]
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.join(srcPath, 'index.html'),
+      filename: 'index.html',
+      chunks: ['index', 'vendor', 'common']
+    }),
+    // new HtmlWebpackPlugin({
+    //   template: path.join(srcPath, 'other.html'),
+    //   filename: 'other.html',
+    //   chunks: ['other',  'common']
+    // })
+  ]
+}
diff --git a/webpack-react-scaffolding/build/webpack.dev.js b/webpack-react-scaffolding/build/webpack.dev.js
@@ -0,0 +1,85 @@
+/*
+ * @Author: LinFeng
+ * @LastEditors: LinFeng
+ * @Date: 2020-07-24 18:36:52
+ * @LastEditTime: 2020-07-24 22:58:42
+ * @FilePath: /webpack-react-scaffolding/build/webpack.dev.js
+ * @Description: 
+ */ 
+
+const webpack = require('webpack');
+const webpackCommonConf = require('./webpack.common.js');
+const {
+  merge
+} = require('webpack-merge');
+const {
+  srcPath,
+  distPath
+} = require('./paths.jsx');
+
+// 热更新
+// const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin');
+
+
+module.exports = merge(webpackCommonConf, {
+  mode: 'development',
+
+  // 热更新
+  // entry: {
+  //   // index: path.join(srcPath, 'index.js'),
+  //   index: [
+  //     'webpack-dev-server/client?http://localhost:8080/',
+  //     'webpack/hot/dev-server',
+  //     path.join(srcPath, 'index.js')
+  //   ],
+  //   other: path.join(srcPath, 'other.js')
+  // },
+
+  module: {
+    rules: [
+      // js,jsx文件处理
+      {
+        test: /\.(js|jsx)$/,
+        loader: ['babel-loader?cacheDirectory'],
+        include: srcPath,
+      },
+      // 直接引入图片url
+      {
+        test: /\.(png|jpg|gif|jpeg)$/,
+        use: 'file-loader'
+      },
+      // css
+      {
+        test: /\.css$/,
+        loader: ['style-loader', 'css-loader', 'postcss-loader']
+      },
+      // scss
+      {
+        test: /\.scss$/,
+        loader: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader']
+      }
+    ]
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      // window.ENV = 'development'
+      ENV: JSON.stringify('development')
+    }),
+
+    // 热更新
+    // new HotModuleReplacementPlugin()
+  ],
+  devServer: {
+    port: 8787,
+    progress: true,
+    contentBase: distPath,
+    open: true,
+    compress: true,
+    // hot: true, 热更新
+
+    // 设置代理
+    // proxy: {
+    //   '/api': 'http://localhost:3000'
+    // }
+  }
+})
diff --git a/webpack-react-scaffolding/build/webpack.prod.js b/webpack-react-scaffolding/build/webpack.prod.js
@@ -0,0 +1,171 @@
+/*
+ * @Author: LinFeng
+ * @LastEditors: LinFeng
+ * @Date: 2020-07-24 18:37:15
+ * @LastEditTime: 2020-07-24 23:25:55
+ * @FilePath: /webpack-react-scaffolding/build/webpack.prod.js
+ * @Description: prod
+ */
+
+const webpack = require('webpack')
+const webpackCommonConf = require('./webpack.common.js')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+const TerserJSPlugin = require('terser-webpack-plugin')
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+
+// const HappyPack = require('happypack')
+// const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
+
+const {
+  merge
+} = require('webpack-merge')
+const {
+  srcPath,
+  distPath
+} = require('./paths.jsx')
+
+module.exports = merge(webpackCommonConf, {
+  mode: 'production',
+  output: {
+
+    filename: '[name].[contentHash:8].js', // name 即多入口是entry的key, 加上8字符哈希戳
+    path: distPath,
+    // publicPath: "http://cdn.abc.com", // 修改所有静态文件 url 的前缀
+  },
+  module: {
+    rules: [
+      // 多进程打包
+      // // js
+      // {
+      //   test: /\.(js|jsx)$/,
+      //   // 把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例
+      //   use: ['happypack/loader?id=babel'],
+      //   include: srcPath,
+      //   // exclude: /node_modules/
+      // },
+      // js,jsx文件处理
+      {
+        test: /\.(js|jsx)$/,
+        loader: ['babel-loader?cacheDirectory'],
+        include: srcPath,
+      },
+
+      // 图片 - 小图片用base64
+      {
+        test: /\.(png|jpg|jpeg|gif)$/,
+        use: {
+          loader: 'url-loader',
+          options: {
+            // 小于 5kb 的图片用 base64 格式产出
+            // 否则，依然延用 file-loader 的形式，产出 url 格式
+            limit: 5 * 1024,
+
+            // 打包到img目录下
+            outputPath: '/img/',
+
+            // 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源）
+            // publicPath: 'http://cdn.abc.com'
+          }
+        }
+      },
+
+      // 抽离css
+      {
+        test: /\.css$/,
+        loader: [
+          MiniCssExtractPlugin.loader, // 不再用style-loader
+          'css-loader',
+          'postcss-loader'
+        ]
+      },
+      // 抽离scss
+      {
+        test: /\.scss$/,
+        loader: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          'sass-loader',
+          'postcss-loader'
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+    new webpack.DefinePlugin({
+      // window.ENV = 'production'
+      ENV: JSON.stringify('production')
+    }),
+
+    // 抽离 css
+    new MiniCssExtractPlugin({
+      filename: 'css/main.[contentHash:8].css'
+    }),
+
+    // 使用IgnorePlugin忽略某个目录, 如 忽略 moment 下的 /locale 目录
+    // new webpack.IgnorePlugin(/\.\/locale/, /moment/),
+
+    // // happyPack 开启多进程打包
+    // new HappyPack({
+    //   // 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
+    //   id: 'babel',
+    //   // 如何处理 .js 文件，用法和 Loader 配置中一样
+    //   loaders: ['babel-loader?cacheDirectory']
+    // }),
+    // // 使用 ParallelUglifyPlugin 并行压缩输出的 JS 代码
+    // new ParallelUglifyPlugin({
+    //   // 传递给 UglifyJS 的参数
+    //   // （还是使用 UglifyJS 压缩，只不过帮助开启了多进程）
+    //   uglifyJS: {
+    //     output: {
+    //       beautify: false, // 最紧凑的输出
+    //       comments: false, // 删除所有的注释
+    //     },
+    //     compress: {
+    //       // 删除所有的 `console` 语句，可以兼容ie浏览器
+    //       drop_console: true,
+    //       // 内嵌定义了但是只用到一次的变量
+    //       collapse_vars: true,
+    //       // 提取出出现多次但是没有定义成变量去引用的静态值
+    //       reduce_vars: true,
+    //     }
+    //   }
+    // })
+  ],
+
+  optimization: {
+    // 压缩css
+    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
+
+    // 分割代码块
+    splitChunks: {
+      /**
+       * initial 入口chunk，对于异步导入的文件不处理
+        async 异步chunk，只对异步导入的文件处理
+        all 全部chunk
+      */
+      chunks: 'all',
+
+      // 缓存分组
+      cacheGroups: {
+        // 第三方模块
+        vendor: {
+          name: 'vendor', // chunk 名称
+          priority: 1, // 权限最高, 优先抽离, 重要
+          test: /node_modules/,
+          minSize: 3 * 1024, // 太小的就算了
+          minChunks: 1 // 最少复用过几次
+        },
+
+        // 公共模块
+        common: {
+          name: 'common',
+          priority: 0,
+          minSize: 3 * 1024,
+          minChunks: 2, // 公共模块最少复用过几次
+        }
+      }
+    }
+  }
+})
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Document</title></head><body><div id="root"></div><script src="vendor.7c17682a.js"></script><script src="index.f613e2b2.js"></script></body></html>