1、安装

  1. cnpm i webpack webpack-cli webpack-dev-server webpack-merge autoprefixer node-sass postcss-safe-parser react-dev-utils eslint -D
  2. cnpm i postcss-loader sass-loader eslint-loader url-loader file-loader babel-loader style-loader css-loader @babel/core @babel/preset-env -D
  3. cnpm i pnp-webpack-plugin terser-webpack-plugin html-webpack-plugin optimize-css-assets-webpack-plugin case-sensitive-paths-webpack-plugin webpack-manifest-plugin mini-css-extract-plugin -D

2、目录

image.png

3、package.json

开发环境执行npm run start 启动devServer
生产环境执行npm run build 打包设置环境变量为生产环境

  1. {
  2.   "name": "7.config",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "env.js",
  6.   "scripts": {
  7.     "build": "cross-env key=value webpack --env=production",
  8.     "start": "webpack-dev-server --env=development --config webpack.dev.config.js"
  9.   },
  10.   "keywords": [],
  11.   "author": "",
  12.   "license": "ISC",
  13.   "homepage": "/static/",
  14.   "devDependencies": {
  15.     "@babel/core": "^7.11.4",
  16.     "@babel/preset-env": "^7.11.0",
  17.     "autoprefixer": "^9.8.6",
  18.     "babel-loader": "^8.1.0",
  19.     "case-sensitive-paths-webpack-plugin": "^2.3.0",
  20.     "css-loader": "^4.2.2",
  21.     "eslint": "^7.7.0",
  22.     "eslint-loader": "^4.0.2",
  23.     "file-loader": "^6.0.0",
  24.     "html-webpack-plugin": "^4.3.0",
  25.     "mini-css-extract-plugin": "^0.11.0",
  26.     "node-sass": "^4.14.1",
  27.     "optimize-css-assets-webpack-plugin": "^5.0.3",
  28.     "pnp-webpack-plugin": "^1.6.4",
  29.     "postcss-loader": "^3.0.0",
  30.     "postcss-safe-parser": "^4.0.2",
  31.     "react-dev-utils": "^10.2.1",
  32.     "resolve-url-loader": "^3.1.1",
  33.     "sass-loader": "^10.0.1",
  34.     "style-loader": "^1.2.1",
  35.     "terser-webpack-plugin": "^4.1.0",
  36.     "url-loader": "^4.1.0",
  37.     "webpack": "^4.44.1",
  38.     "webpack-cli": "^3.3.12",
  39.     "webpack-dev-server": "^3.11.0",
  40.     "webpack-manifest-plugin": "^2.2.0",
  41.     "webpack-merge": "^5.1.2"
  42.   }
  43. }

4、静态文件

public/index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>cra</title>
  7. </head>
  8. <body>
  9.     <div id="root">root</div>
  10.     <p>其它内容</p>
  11. </body>
  12. </html>

5、webpack设置

webpack.config.js

  1. 'use strict';
  3. const webpack = require('webpack');
  4. const paths = require("./paths");
  5. const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin");
  6. const TerserPlugin = require("terser-webpack-plugin");
  7. const PnpWebpackPlugin = require("pnp-webpack-plugin");
  8. const HtmlWebpackPlugin = require("html-webpack-plugin");
  9. const ManifestPlugin = require("webpack-manifest-plugin");
  10. const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  11. const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
  12. const InlineChunkHtmlPlugin = require("react-dev-utils/InlineChunkHtmlPlugin");
  13. const WatchMissingNodeModulesPlugin = require("react-dev-utils/WatchMissingNodeModulesPlugin");
  14. const ModuleScopePlugin = require("react-dev-utils/ModuleScopePlugin");
  15. const InterpolateHtmlPlugin = require("react-dev-utils/InterpolateHtmlPlugin");
  16. const ModuleNotFoundPlugin = require("react-dev-utils/ModuleNotFoundPlugin");
  17. const getClientEnvironment = require("./env");
  18. const cssRegex = /\.css$/;
  19. const sassRegex = /\.(scss|sass)$/;
  20. module.exports = function (webpackEnv) {
  21.   console.log("webpackEnv", webpackEnv); //webpackEnv production
  22.   process.env;
  23.   //开发环境
  24.   const isEnvDevelopment = webpackEnv === "development";//false
  25.   //生产环境
  26.   const isEnvProduction = webpackEnv === "production";//true
  27.   //set GENERATE_SOURCEMAP=false  是否在生产环境下生成sourcemap文件
  28.   const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== "false";
  29.   //是否把运行时的runtime内置到html中
  30.   const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== "false";
  31.   console.log("shouldInlineRuntimeChunk", shouldInlineRuntimeChunk);
  32.   // %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
  33.   //忽略结束的/  把环境变量中的变量注入到当前应用中来
  34.   const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
  35.   console.log("env", env);
  36.   const getStyleLoaders = (cssOptions, preProcessor) => {
  37.     const loaders = [
  38.       isEnvDevelopment && require.resolve("style-loader"),
  39.       isEnvProduction && {
  40.         loader: MiniCssExtractPlugin.loader,
  41.       },
  42.       {
  43.         loader: require.resolve("css-loader"),
  44.         options: cssOptions,
  45.       },
  46.       {
  47.         loader: require.resolve("postcss-loader"),
  48.       },
  49.     ].filter(Boolean);
  50.     if (preProcessor) {
  51.       loaders.push(
  52.         {
  53.           loader: require.resolve("resolve-url-loader"),
  54.         },
  55.         {
  56.           loader: require.resolve(preProcessor),
  57.           options: {
  58.             sourceMap: true,
  59.           },
  60.         }
  61.       );
  62.     }
  63.     return loaders;
  64.   };
  65.   return {
  66.     mode: isEnvProduction ? "production" : "development",
  67.     devtool: isEnvProduction
  68.       ? shouldUseSourceMap
  69.         ? "source-map"
  70.         : false
  71.       : isEnvDevelopment && "cheap-module-source-map",
  72.     entry: [
  73.       isEnvDevelopment &&
  74.         require.resolve("react-dev-utils/webpackHotDevClient"),
  75.       paths.appIndexJs,
  76.     ].filter(Boolean),
  77.     output: {
  78.       path: isEnvProduction ? paths.appBuild : undefined, //输出的目标路径
  79.       //一个main bundle一个文件,每个异步代码块也对应一个文件 ,在生产环境中,并不产出真正的文件
  80.       filename: isEnvProduction
  81.         ? "static/js/[name].[contenthash:8].js"
  82.         : "static/js/bundle.js",
  83.       //如果使用了代码分割的话,这里有额外的JS代码块文件
  84.       chunkFilename: isEnvProduction
  85.         ? "static/js/[name].[contenthash:8].chunk.js"
  86.         : "static/js/[name].chunk.js",
  87.        //打包后的文件的访问路径
  88.       publicPath: paths.publicUrlOrPath,
  89.     },
  90.     optimization: {
  91.       minimize: isEnvProduction,//生产环境要压缩 开发环境不压缩
  92.       minimizer: [
  93.         //压缩JS
  94.         new TerserPlugin({}),
  95.         //压缩CSS
  96.         new OptimizeCSSAssetsPlugin({}),
  97.       ],
  98.       //自动分割第三方模块和公共模块
  99.       splitChunks: {
  100.         chunks: "all",
  101.         name: false,
  102.       },
  103.       //为了长期缓存保持运行时代码块是单独的文件
  104.       runtimeChunk: {
  105.         name: (entrypoint) => `runtime-${entrypoint.name}`,
  106.       },
  107.     },
  108.     resolve: {
  109.       //设置modules的目录
  110.       modules: ["node_modules", paths.appNodeModules],
  111.       //指定扩展名
  112.       extensions: paths.moduleFileExtensions.map((ext) => `.${ext}`),
  113.       alias: {
  114.         //设置别名
  115.         "react-native": "react-native-web",
  116.       },
  117.       plugins: [
  118.         //PnpWebpackPlugin,
  119.         //防止用户引用在src或者node_modules之外的文件
  120.         new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
  121.       ],
  122.     },
  123.     resolveLoader: {
  124.       //plugins: [PnpWebpackPlugin.moduleLoader(module)],
  125.     },
  126.     module: {
  127.       rules: [
  128.         //在babel处理之前执行linter
  129.         {
  130.           test: /\.(js|mjs|jsx|ts|tsx)$/,
  131.           enforce: "pre",
  132.           use: [
  133.             {
  134.               loader: require.resolve("eslint-loader"),
  135.             },
  136.           ],
  137.           include: paths.appSrc,
  138.         },
  139.         {
  140.           //OneOf会遍历接下来的loader直到找一个匹配要求的,如果没有匹配的会走file-loader
  141.           oneOf: [
  142.             {
  143.               test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
  144.               loader: require.resolve("url-loader"),
  145.             },
  146.             {
  147.               test: /\.(js|mjs|jsx|ts|tsx)$/,
  148.               include: paths.appSrc,
  149.               loader: require.resolve("babel-loader"),
  150.             },
  151.             {
  152.               test: cssRegex,
  153.               //用于配置css-loader,作用于@import资源之前有多少个loader
  154.               //0=>无(默认) 1=>postcss-loader 2 postcss-loader sass-loader
  155.               use: getStyleLoaders({ importLoaders: 1 }),
  156.             },
  157.             {
  158.               test: sassRegex,
  159.               //postcss-loader  sass-loader
  160.               use: getStyleLoaders({ importLoaders: 3 }, "sass-loader"),
  161.             },
  162.             {
  163.               loader: require.resolve("file-loader"),
  164.               exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
  165.               options: {
  166.                 name: "static/media/[name].[hash:8].[ext]",
  167.               },
  168.             },
  169.           ],
  170.         },
  171.       ],
  172.     },
  173.     plugins: [
  174.       //使用插入的script标签生成一个index.html插件
  175.       new HtmlWebpackPlugin({
  176.         inject: true,
  177.         template: paths.appHtml,
  178.       }),
  179.       //把运行时插入到html里,这样可以节约一个请求
  180.       isEnvProduction &&
  181.         shouldInlineRuntimeChunk &&
  182.         new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),
  183.       //保证在index.html中获取到环境变量public URL可以通过%PUBLIC_URL%获取
  184.       new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
  185.       //模块找不到的时候提供一些必要上下文信息
  186.       new ModuleNotFoundPlugin(paths.appPath),
  187.       //保证在JS中获取到环境变量if (process.env.NODE_ENV === 'production') { ... }
  188.       new webpack.DefinePlugin(env.stringified),
  189.       //模块热更新插件
  190.       isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
  191.       //当你大小写拼错的时候进行提示
  192.       isEnvDevelopment && new CaseSensitivePathsPlugin(),
  193.       //重新安装模块后不用重新启动开发服务器
  194.       isEnvDevelopment &&
  195.         new WatchMissingNodeModulesPlugin(paths.appNodeModules),
  196.       //提取CSS
  197.       isEnvProduction &&
  198.         new MiniCssExtractPlugin({
  199.           filename: "static/css/[name].[contenthash:8].css",
  200.           chunkFilename: "static/css/[name].[contenthash:8].chunk.css",
  201.         }),
  202.       //生成一个manifest文件
  203.       new ManifestPlugin({
  204.         fileName: "asset-manifest.json",
  205.         publicPath: paths.publicUrlOrPath,
  206.         generate: (seed, files, entrypoints) => {
  207.           const manifestFiles = files.reduce((manifest, file) => {
  208.             manifest[file.name] = file.path;
  209.             return manifest;
  210.           }, seed);
  211.           const entrypointFiles = entrypoints.main.filter(
  212.             (fileName) => !fileName.endsWith(".map")
  213.           );
  215.           return {
  216.             files: manifestFiles,
  217.             entrypoints: entrypointFiles,
  218.           };
  219.         },
  220.       }),
  221.     ].filter(Boolean),
  222.   };
  223. };

webpack.dev.config.js

  1. const { merge } = require("webpack-merge");
  2. let config = require('./webpack.config');
  3. let devServerConfig = require('./webpackDevServer.config');
  4. module.exports = merge(config('development'), {
  5.   devServer: devServerConfig()
  6. });

webpackDevServer.config.js

  1. 'use strict';
  3. const fs = require('fs');
  4. const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
  5. const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
  6. const ignoredFiles = require('react-dev-utils/ignoredFiles');
  7. const redirectServedPath = require('react-dev-utils/redirectServedPathMiddleware');
  8. const paths = require('./paths');
  9. const host = process.env.HOST || '0.0.0.0';
  11. module.exports = function(proxy, allowedHost) {
  12.   return {
  13.     //禁用主机检查
  14.     disableHostCheck: true,
  15.     //启动gzip压缩
  16.     compress: true,
  17.     //禁用WebpackDevServer自己的日志,警告和错误还是可以显示的
  18.     clientLogLevel: "none",
  19.     //静态文件根目录
  20.     contentBase: paths.appPublic,
  21.     contentBasePublicPath: paths.publicUrlOrPath,
  22.     //默认情况下contentBase里的文件变更不会触发页面刷新
  23.     watchContentBase: true,
  24.     //启用热更新
  25.     hot: true,
  26.     //使用ws而非socketjs-node模块
  27.     transportMode: "ws",
  28.     //不需要注入WS客户端
  29.     injectClient: false,
  30.     //访问路径
  31.     publicPath: paths.publicUrlOrPath.slice(0, -1),
  32.     //更少的WebpackDevServer日志
  33.     quiet: true,
  34.     watchOptions: {
  35.       ignored: ignoredFiles(paths.appSrc), //不要监控src目录
  36.     },
  37.     host,
  38.     historyApiFallback: {
  39.       //禁用dotRule
  40.       disableDotRule: true,
  41.       index: paths.publicUrlOrPath,
  42.     },
  43.     public: allowedHost,
  44.     //proxy会在before和after之间执行
  45.     proxy,
  46.     before(app, server) {
  47.       //在出错的时候获取源码内容
  48.       app.use(evalSourceMapMiddleware(server));
  49.       //让我们从运行时错误打开文件
  50.       app.use(errorOverlayMiddleware());
  51.       //由于代理注册的中间件 
  52.       if (fs.existsSync(paths.proxySetup)) {
  53.         require(paths.proxySetup)(app);
  54.       }
  55.     },
  56.     after(app) {
  57.       //如果URL不匹配重定向到`PUBLIC_URL` or `homepage` from `package.json`
  58.       app.use(redirectServedPath(paths.publicUrlOrPath));
  59.     },
  60.   };
  61. };

6、环境变量和路径处理

env.js

  1. 'use strict';
  3. const fs = require('fs');
  4. const path = require('path');
  5. const paths = require('./paths');
  6. //一般可能是production或者development set NODE_ENV=development
  7. const NODE_ENV = process.env.NODE_ENV;
  9. //环境变量的文件路径
  10. const dotenvFiles = [
  11.   `${paths.dotenv}.${NODE_ENV}.local`, // .env.development.local
  12.   `${paths.dotenv}.${NODE_ENV}`,       // .env.development
  13.   //在测试环境下不要包括.env.local
  14.   NODE_ENV !== 'test' && `${paths.dotenv}.local`, // .env.local
  15.   paths.dotenv,//.env
  16. ].filter(Boolean);
  18. //从.env*文件中加载环境变量
  19. process.env.username;
  20. dotenvFiles.forEach(dotenvFile => {
  21.   if (fs.existsSync(dotenvFile)) {
  22.     require('dotenv-expand')(
  23.       require('dotenv').config({
  24.         path: dotenvFile,
  25.       })
  26.     );
  27.   }
  28. });
  29. //process.env.PUBLIC_URL=//static2
  30. //支持通过NODE_PATH加载解析模块 set NODE_PATH=modules;extraModules
  31. const appDirectory = fs.realpathSync(process.cwd());
  32. //配置node_modules
  33. process.env.NODE_PATH = (process.env.NODE_PATH || '')
  34.   .split(path.delimiter)
  35.   .filter(folder => folder && !path.isAbsolute(folder))
  36.   .map(folder => path.resolve(appDirectory, folder))
  37.   .join(path.delimiter);
  38. //把相对变绝对
  40. //获取NODE_ENV and REACT_APP_*环境变量,并且准备通过DefinePlugin插入应用
  41. //set REACT_APP_NAME=zhufeng
  42. const REACT_APP = /^REACT_APP_/i;
  43. function getClientEnvironment(publicUrl) {
  44.   const raw = Object.keys(process.env)
  45.     .filter((key) => REACT_APP.test(key))
  46.     .reduce(
  47.       (env, key) => {
  48.         env[key] = process.env[key];
  49.         return env;
  50.       },
  51.       {
  52.         //决定当前是否处于开发模式
  53.         NODE_ENV: process.env.NODE_ENV || "development",
  54.         //用来解析处于public下面的正确资源路径
  55.         PUBLIC_URL: publicUrl,
  56.       }
  57.     );
  58.   //把所有的值转成字符串以便在DefinePlugin中使用
  59.   const stringified = {
  60.     "process.env": Object.keys(raw).reduce((env, key) => {
  61.       env[key] = JSON.stringify(raw[key]);
  62.       return env;
  63.     }, {}),
  64.   };
  66.   return { raw, stringified };
  67. }
  69. module.exports = getClientEnvironment;

path.js

  1. //当前的工作目录
  2. let path = require("path");
  3. const appDirectory = process.cwd();;
  4. console.log(appDirectory);
  5. //从相对路径中解析绝对路径
  6. const resolveApp = (relativePath) =>{
  7.     return  path.resolve(appDirectory, relativePath);
  8. }
  9. let r = resolveApp('./index.js');
  10. console.log(r);

paths.js

  1. 'use strict';
  3. const path = require('path');
  4. const fs = require('fs');
  6. //当前的工作目录
  7. const appDirectory = fs.realpathSync(process.cwd());
  8. //从相对路径中解析绝对路径
  9. const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
  10. //获取PublicUrlOrPath /static/
  11. const publicUrlOrPath = require(resolveApp("package.json")).homepage || process.env.PUBLIC_URL || "";
  12. //默认的模块扩展名
  13. const moduleFileExtensions = [
  14.   'js',
  15.   'ts',
  16.   'tsx',
  17.   'json',
  18.   'jsx',
  19. ];
  20. //解析模块路径  './title.js' resolveFn? 从相对路径得到绝对路径
  21. const resolveModule = (resolveFn, filePath) => {
  22.   //js
  23.   const extension = moduleFileExtensions.find(extension =>
  24.     fs.existsSync(resolveFn(`${filePath}.${extension}`))
  25.   );
  27.   if (extension) {
  28.     return resolveFn(`${filePath}.${extension}`);//./title.js
  29.   }
  31.   return resolveFn(`${filePath}.js`);//如果没有默认是.js
  32. };
  34. module.exports = {
  35.   dotenv: resolveApp('.env'),//客户端环境变量的文件名路径
  36.   appPath: resolveApp('.'),//当前工作路径
  37.   appBuild: resolveApp('build'),//输出的build目标路径
  38.   appPublic: resolveApp('public'),//public目录
  39.   appHtml: resolveApp('public/index.html'),//html文件绝对路径
  40.   appIndexJs: resolveModule(resolveApp, 'src/index'),//入口文件
  41.   appPackageJson: resolveApp('package.json'),//package.json文件路径
  42.   appSrc: resolveApp('src'),//src路径
  43.   appTsConfig: resolveApp('tsconfig.json'),
  44.   appJsConfig: resolveApp('jsconfig.json'),
  45.   appNodeModules: resolveApp('node_modules'),
  46.   publicUrlOrPath,
  47. };
  49. module.exports.moduleFileExtensions = moduleFileExtensions;

7、其他配置eslint、postcss.config.js

.eslint.json

  1. {
  2.     "env": {
  3.         "browser": true,
  4.         "es2020": true
  5.     },
  6.     "parserOptions": {
  7.         "ecmaVersion": 2020,
  8.         "sourceType": "module"
  9.     },
  10.     "rules": {
  11.     }
  12. }

postcss.config.js

  1. module.exports = {
  2.   plugins: [
  3.     require("autoprefixer")({ overrideBrowserslist: ["> 0.15% in CN"] }), // 自动添加css前缀
  4.   ],
  5. };

.gitignore

  1. # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
  3. # dependencies
  4. /node_modules
  5. /.pnp
  6. .pnp.js
  8. # testing
  9. /coverage
  11. # production
  12. /build
  14. # misc
  15. .DS_Store
  16. .env.local
  17. .env.development.local
  18. .env.test.local
  19. .env.production.local
  21. npm-debug.log*
  22. yarn-debug.log*
  23. yarn-error.log*

8、测试文件

src/index.js

  1. import './index.scss'
  2. import '../title'
  3. console.log(process.env.PUBLIC_URL);

src/index.scss

  1. @import "./bg.scss";
  2. @import "./front.scss";
  3. $color:pink;
  4. #root{
  5.     color:$color;
  6. }

src/bg.scss

  1. $color:green;
  3. body {
  4.     background-color: $color;
  5. }

src/font.scss

  1. $color:red;
  3. body {
  4.     color: $color;
  5. }

9、.env

.env

  1. PUBLIC_URL=/static2
  2. username=zhufeng
  3. password=123456

.env.development

  1. PUBLIC_URL=/static2
  2. username=zhufeng
  3. password=123456

.env.production

  1. PUBLIC_URL=/static2
  2. username=zhufeng
  3. password=123456