webpack配置

项目webpack的配置方式

前言

以react为例，用自主配置webpack的方式或扩展或覆盖原来，项目中的功能。例如：使用@符号，更改打包目录，跨域设置、增加less支持、px转rem、ant-design按需加载、打包压缩js和css… 配置微前端子应用等等。

如何扩展？

1、官方使用的是 yarn eject的方式，将webpack解构出来，自己配置。可是这中操作是不可逆的，慎重～

2、采用了webpack第三方扩展工具。网上的扩展工具很多，我总结了三种（项目中使用任意一种都可以）

//分别是以下三种（有些文档将扩展工具的安装环境设为 -D 开发环境，个人觉得-s好一点）
$ yarn add @craco/craco -s  

$ yarn add @rescripts/cli -s

$ yarn add react-app-rewired -s

如何使用？

三种扩展工具使用方式类似：

1、安装

2、修改package.json

3、根目录新增对应配置文件

举例如下：

@craco/craco

*安装

$ yarn add @craco/craco -s 

*修改package.json

- "start": "react-scripts start"
- "build": "react-scripts build"
- "test": "react-scripts test"
- "eject": "react-scripts eject"

+ "start": "craco start",
+ "build": "craco build",
+ "test": "craco test"

*在项目根目录下新增craco.config.js

功能1 @符号作为src文件

const path = require('path')
const pathResolve = pathUrl => path.join(__dirname, pathUrl)
module.exports = {
    webpack: {
       
        alias: {
            '@': pathResolve('src'), //@符号作为src文件
          	//实际可根据各自需求配置 示例如下
          	'@assets': pathResolve('src/assets'),
      			'@common': pathResolve('src/common'),
      			'@components': pathResolve('src/components'),
      			'@hooks': pathResolve('src/hooks'),
      			'@pages': pathResolve('src/pages'),
      			'@store': pathResolve('src/store'),
      			'@utils': pathResolve('src/utils')
        },
    }
}

更目录下创建jsconfig.json 解决检索不到webpack配置的别名的问题
提示：如果您不使用 JavaScript，则无需担心jsconfig.json.
原文链接 https://blog.csdn.net/huochai770880/article/details/125819132

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@@/*": ["./*"],
      "@/*": ["src/*"],
      "@assets/*": ["src/assets/*"],
      "@common/*": ["src/common/*"],
      "@components/*": ["src/components/*"],
      "@hooks/*": ["src/hooks/*"],
      "@pages/*": ["src/pages/*"],
      "@store/*": ["src/store/*"],
      "@utils/*": ["src/utils/*"]
    },
    "experimentalDecorators": true
  },
  "exclude": ["node_modules", "build"]
}

功能2 配置代理

const path = require('path')
module.exports = {
    //配置代理解决跨域
    devServer: {
        port: 3009,
        proxy: {
            '/api': {
                target: 'http://114.215.183.171:5002',
                changeOrigin: true,
                pathRewrite: {
                    "^/api": "/api"
                }
            },
       }
}

功能3 build打包文件名称更改

const path = require('path')
module.exports = {
    webpack: {
        // 更改build打包文件名称为dist
        configure: (webpackConfig, { env, paths }) => {
            webpackConfig.output.path = path.resolve(__dirname, 'dist')
            paths.appBuild = path.resolve(__dirname, 'dist')
            return webpackConfig
        },
    },
}

功能4 配置微前端子应用

const path = require("path");
const addPath = (dir) => path.join(__dirname, dir);
const { name } = require("./package.json");

// const PORT = 9000;
// let HOST = "127.0.0.1";
// const publicPath = {
//   development: `http://${HOST}:${PORT}`,
//   production: `https://xxxxx/${name}`,
// };

module.exports = {
  webpack: {
    alias: {
      "@": addPath("src"),
    },
    configure: {
      output: {
        // publicPath: publicPath[process.env.NODE_ENV] + "/",
        library: `${name}-[name]`,
        libraryTarget: "umd",
        chunkLoadingGlobal: `webpackJsonp_${name}`,
      },
 
    
};
    

配置好之后，异或是和原有的配置合并或者新增，形成新的项目webpack打包配置。

react-app-rewired

安装

$ yarn add react-app-rewired -s

修改package.json

- "start": "react-scripts start"
+ "start": "react-app-rewired start"
...

删除eject解构

接着，安装customize-cra

customize-cra利用react-app-rewired的config-overrides.js文件。通过导入customize-cra函数并导出覆盖函数中包含的几个函数调用，您可以轻松修改组成create-react-app的底层配置对象（webpack、webpack-dev-server、babel等）。
原文链接：https://www.jianshu.com/p/568832790592
源码地址：https://github.com/arackaf/customize-cra

$ yarn add customize-cra

在根目录下新增config-overrides.js文件下新增如下配置

功能一：暴露方法配置微前端子应用

const {name} = require('./package')

module.exports = {
  	webpack:(config)=>{
      config.output.library = `${name}-[name]`;
      config.output.libraryTarget = 'umd';
      config.output.chunkLoadingGlobal = `webpackJsonp_${name}`;
      return config;
    }
}

功能二：使用babel-plugin-import，它是一个用于按需加载组件代码和样式的 babel 插件。

安装
$ yarn add babel-plugin-import

/* config-overrides.js */
+ const { override, fixBabelImports } = require('customize-cra');
+ module.exports = override(
+   fixBabelImports('import', {
+     libraryName: 'antd',
+     libraryDirectory: 'es',
+     style: 'css',
+   }),
+ );
这样我们在组件中就可以按需引入组件库中所需要的组件了。

补充：前端本地proxy 配置代替
开发中常见的问题就是跨域。那么我们前端惯用的方式就是给本地webpack启动的node服务设置代理。

那么具体到使用了新版的cra后，我们该怎么办呢？

很简单，在src目录下新建文件setupProxy.js（注意文件名一定要是这个名字，不要问什么，cra现在废弃了proxy对象配置的方式，将其作为单独模块。解析就是按 src/setupProxy.js这个路径）

安装http代理相关包http-proxy-middleware

$ yarn add http-proxy-middleware -D
  
//配置如下，
const proxy = require('http-proxy-middleware')；
module.exports = function(app) {
  app.use(
    proxy('/api', {
      target: 'http://xx.xx.xx.xx:8000/',
      changeOrigin: true,
      pathRewrite: {'^/api': ''}
    	}
    ))
}
好了，现在你就可以愉快的访问接口了~