react新建工程初始化 修改打包路径 修改打包名称

2024年3月29日 229次阅读 来源: chidaozhi

1.create-react-app

2.自定义配置项

// bash

npm run eject

导出scripts后npm install重新下载依赖

3.自定义打包路径

// path.js
// 37行pathname改为相对路径
function getServedPath(appPackageJson) {
  const publicUrl = getPublicUrl(appPackageJson);
  const servedUrl =
    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : './');
  return ensureSlash(servedUrl, true);
}

// 73行appBuild改为如下自定义路径
appBuild: path.resolve(__dirname, '../../dist/panorama'),

最终打包路径为 项目外部dist下，包名为panorama

4.引入less

// bash

npm install less less-loader -D

webpack.config.js中配置

// style files regexes
// 添加下面两行，同上方sass配置
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

rules中添加

// 跟上方sass配置相同，把sass换成less即可
{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
      {
        importLoaders: 2,
        sourceMap: isEnvProduction && shouldUseSourceMap,
      },
      'less-loader'
  ),
  sideEffects: true,
},
{
  test: lessModuleRegex,
  use: getStyleLoaders(
      {
        importLoaders: 2,
        sourceMap: isEnvProduction && shouldUseSourceMap,
        modules: true,
        getLocalIdent: getCSSModuleLocalIdent,
      },
      'less-loader'
  ),
},

5.添加引用路径

alias中添加

// 引用时直接@/assets/...
'@': paths.appSrc,
    原文作者：chidaozhi
    原文地址: https://segmentfault.com/a/1190000018575371
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞