05_创建React的配置文件

脚手架创建的React项目添加webpack.config.js

添加config文件

create-react-app生成项目后,默认的项目目录是这样的:
![在这里插入图片描述](https://img-blog.csdnimg.cn/386fd4adad374590ac17166b80be797c.png#pic

没有配置文件的目录,脚手架工具给我们提供的生成配置文件的命令在package.json中,如下：

在我们需要配置文件的时候,只需要运行这行脚本就可以了：

# 使用npm
npm run eject
 
# 使用yarn
yarn run eject
 
# 使用yarn时也可以不加run
yarn eject

需要注意的时,在eject命令帮我们生成了配置文件之后,这条命令,就会在package.json中被移除(是脚本自动被移除的,不需要手动移除,也不是手动移除的).

运行完后会生产这样的文件夹：

配置less

安装less相关的插件

npm i less less-loader --save

sass匹配后面放置less

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

ctrl+f搜索sassRegex,复制一份sassRegex配置,将sass内容修改成less

 {
          test: lessRegex,
          exclude: lessModuleRegex,
          use: getStyleLoaders(
            {
              importLoaders: 3,
              sourceMap: isEnvProduction && shouldUseSourceMap,
            },
            'less-loader'
          ),
          // Don't consider CSS imports dead code even if the
          // containing package claims to have no side effects.
          // Remove this when webpack adds a warning or an error for this.
          // See https://github.com/webpack/webpack/issues/6571
          sideEffects: true,
 },

ctrl+f搜索sassModuleRegex,复制一份sassModuleRegex配置,将sass内容修改成less

{
          test: lessModuleRegex,
          use: getStyleLoaders(
            {
              importLoaders: 3,
              sourceMap: isEnvProduction && shouldUseSourceMap,
              modules: {
                getLocalIdent: getCSSModuleLocalIdent,
              },
            },
            'less-loader'
          ),
},

最后一步就重启项目就好了

项目打包

执行 npm run build 命令，即可打包项目，打包完成后，会生成一个 build 文件，这个文件我们需要部署到服务器上才能运行

打包后的文件路径少了一个 . 导致文件无法找到，报错无法执行，我通过手动添加的方式解决了，不知道还有没有什么其他方法解决

build 文件，这个文件我们需要部署到服务器上才能运行

打包后的文件路径少了一个 . 导致文件无法找到，报错无法执行，我通过手动添加的方式解决了，不知道还有没有什么其他方法解决

也可以采用 npm i serve -g 安装，如何通过 serve ‘指定文件夹’ 来执行