初识脚手架

React脚手架

• 全局安装脚手架：npm install create-react-app -g

• 创建项目：create-react-app [项目名称]
  注意：项目名称中不能出现：大写字母、中文汉字、特殊符号（-或者_是可以的）等

• 生成目录

  |- node_modules
    |- bin   // 本地项目中可执行命令，在package.json中设置对应脚本即可
    |- ...   // 对应模块
  |- public  // 存放当前项目的HTML页面
  |- src     // 项目结构中最主要的目录，因为后期所有的JS、路由、组件等都是放到这里面（包括需要编写的CSS或者图片等）
  |- .gitignore  // Git提交时候的忽略提交文件配置项
  |- package.json  // 项目清单，含有三个模块：react/react-dom/react-scripts
  |- ...
  

  注意：react-scripts集成了webpack需要的内容，但没有less/sass的处理内容，如需使用要自行安装

• 加载资源文件的两种方法
  1.在JS中基于ES6 Module模块规范，使用import导入，这样webpack在编译合并JS的时候，会把导入的资源文件等插入到页面的结构中（绝对不能在JS管控的结构中通过相对目录导入资源，因为在webpack编译的时候，地址就不再是之前的相对地址了）
  2.如果不想在JS中导入（JS中导入的资源最后都会基于WEBPACK编译），我们也可以把资源手动地在HTML中导入，但是HTML最后也要基于WEBPACK编译，导入的地址也不建议写相对地址，而是使用 %PUBLIC_URL%写成绝对地址

脚手架深入学习

我们发现，create-react-app脚手架为了让结构目录清晰，把安装的webpack及配置文件都集成在了react-scripts模块中，放到了node_modules中，因此需要在脚手架默认安装的基础上，额外安装一些我们需要的模块的时候要分两种情况进行处理

• 情况一：如果我们安装的其它组件，安装成功后不需要修改webpack的配置项，此时我们直接安装，并且调取使用即可

• 情况二：我们安装的插件是基于webpack处理的，也就是需要把安装的模块配置到webpack中（重新修改webpack配置项）

要修改webpack配置项的话首先需要把隐藏到node_modules中的配置项暴露到项目中

• yarn eject执行这一操作将配置项暴露出来，需要注意的这个操作是不可逆转的，一但暴露出来配置项，就无法再隐藏回去
• 接着再对配置项进行修改即可，这里以less作为例子
  1.先下载模块和加载器
  yarn add less less-loader
  2.暴露webpack配置项
  yarn eject
  3.找到webpack.config.js修改配置（找到以下三处并进行修改）

  // style files regexes
  const cssRegex = /\.css$/;
  const cssModuleRegex = /\.module\.css$/;
  const sassRegex = /\.(scss|sass)$/;
  const sassModuleRegex = /\.module\.(scss|sass)$/;
  // 添加以下代码
  const lessRegex = /\.less$/;
  const lessModuleRegex = /\.module\.less$/;
  

   // common function to get style loaders
    const getStyleLoaders = (cssOptions, lessOptions, preProcessor) => {
        const loaders = [
        isEnvDevelopment && require.resolve('style-loader'),
        isEnvProduction && {
            loader: MiniCssExtractPlugin.loader,
            options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {},
        },
        {
            loader: require.resolve('css-loader'),
            options: cssOptions,
        },
    // 添加以下代码，别忘了在该函数形参列表中添加lessOptions
        {
            loader: require.resolve('less-loader'),
            options: lessOptions,
        },
  

  {
        test: cssRegex,
        exclude: cssModuleRegex,
        use: getStyleLoaders({
          importLoaders: 1,
          sourceMap: isEnvProduction && shouldUseSourceMap,
        }),
        // 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,
        },
        // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
        // using the extension .module.css
        {
           test: cssModuleRegex,
           use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
           }),
        },
        // 添加以下代码
        {
            test: lessRegex,
            exclude: lessModuleRegex,
            use: getStyleLoaders(
              {
                importLoaders: 1,
                sourceMap: isEnvProduction
                  ? shouldUseSourceMap
                  : isEnvDevelopment,
              },
              'less-loader'
            ),
            sideEffects: true,
          },
          {
            test: lessModuleRegex,
            use: getStyleLoaders(
              {
                importLoaders: 1,
                sourceMap: isEnvProduction
                  ? shouldUseSourceMap
                  : isEnvDevelopment,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
              },
              'less-loader'
            ),
          },