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

NeverSayNever 发布于2019-08-23 16:05 / 1643人阅读

摘要：自定义配置项导出后重新下载依赖自定义打包路径行改为相对路径行改为如下自定义路径最终打包路径为项目外部下，包名为引入中配置添加下面两行，同上方配置中添加跟上方配置相同，把换成即可添加引用路径中添加引用时直接

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,

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102679.html

从零到一，新建webpack工程

摘要：指定启用例如上述代码，就使用和处理了除了以外的。设置当前的为，同样这个配置也可以写在中。设置目录删除注释去除空格去除属性引号复制静态目录将所以可能被请求的静态文件，分别放在目录下。结语本次从零到一，新建了一个脚手架。 react-sample-javascript 为了实现一个可定制化高的react工程，我们往往会自己搭建一个react工程。所以本文会从零开始搭建一个react脚手架工...

Code4App 2019-08-26 12:08 评论0 收藏0
傻傻分不清的Manifest

摘要：的英文含义是名单种技术的确都是把当做清单使用缓存清单清单打包资源路径清单打包清单只不过是在不同的场景中使用特定的清单来完成某些功能所以，学好英文是多么重要，这样才不会傻傻分不清到底是干啥的在前端，说到manifest，其实是有歧义的，就我了解的情况来说，manifest可以指代下列含义： html标签的manifest属性: 离线缓存（目前已被废弃） PWA: 将Web应用程序...

printempw 2019-08-23 17:58 评论0 收藏0
从零开始搭建一个React项目

摘要：优化代码拆分从入口文件开始，递归地构建了整个应用的模块依赖图表，然后通常会将所有的模块打包成一个。如果你还不知道什么是React，请点击这里github源码安装Node.js 如果你还不知道什么是ECMAScript，请点击这里如果你还不知道什么是Node.js，请点击这里下载Node.js并安装；接着打开windows命令行窗口分别输入node -v及npm -v如下图所示，...

HollisChuang 2019-08-23 12:19 评论0 收藏0
Webpack个人学习拙见

摘要：通过各种和的相关配置，将复杂的文件和依赖包细化打包，使得无论是开发还是上线发布都大大节省了效率。所以我们将移入内。写在最后这是自己第一次写学习笔记，自知内容比较基础还需要深入研究，算是自己对相关知识的梳理吧。 Webpack是什么？ A bundler for javascript and friends. Packs many modules into a few bundled a...

muddyway 2019-08-23 15:36 评论0 收藏0
Webpack3简单入门2

摘要：本工程代码创建工程添加工程文件通过配置文件来使用添加文件。如下已多次提及的唯一入口文件打包后的文件存放的地方打包后输出文件的文件名是中的一个全局变量，它指向当前执行脚本所在的目录接下来只要执行即可。本工程代码创建工程 $ yarn init $ yarn add webpack # **添加工程文件：** # public/index.html Web...

Labradors 2019-08-21 18:27 评论0 收藏0