react新建工程初始化 修改打包路徑 修改打包名稱

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,