react新建工程初始化 修正打包途径 修正打包称号

2024年3月29日 168次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞