React腳手架

• 全局安裝腳手架：npm install create-react-app -g

• 創(chuàng)建項(xiàng)目：create-react-app [項(xiàng)目名稱]
  注意：項(xiàng)目名稱中不能出現(xiàn)：大寫字母、中文漢字、特殊符號(hào)（-或者_(dá)是可以的）等

• 生成目錄

  |- node_modules
    |- bin   // 本地項(xiàng)目中可執(zhí)行命令，在package.json中設(shè)置對(duì)應(yīng)腳本即可
    |- ...   // 對(duì)應(yīng)模塊
  |- public  // 存放當(dāng)前項(xiàng)目的HTML頁(yè)面
  |- src     // 項(xiàng)目結(jié)構(gòu)中最主要的目錄，因?yàn)楹笃谒械腏S、路由、組件等都是放到這里面（包括需要編寫的CSS或者圖片等）
  |- .gitignore  // Git提交時(shí)候的忽略提交文件配置項(xiàng)
  |- package.json  // 項(xiàng)目清單，含有三個(gè)模塊：react/react-dom/react-scripts
  |- ...
  

  注意：react-scripts集成了webpack需要的內(nèi)容，但沒(méi)有l(wèi)ess/sass的處理內(nèi)容，如需使用要自行安裝

• 加載資源文件的兩種方法
  1.在JS中基于ES6 Module模塊規(guī)范，使用import導(dǎo)入，這樣webpack在編譯合并JS的時(shí)候，會(huì)把導(dǎo)入的資源文件等插入到頁(yè)面的結(jié)構(gòu)中（絕對(duì)不能在JS管控的結(jié)構(gòu)中通過(guò)相對(duì)目錄導(dǎo)入資源，因?yàn)樵趙ebpack編譯的時(shí)候，地址就不再是之前的相對(duì)地址了）
  2.如果不想在JS中導(dǎo)入（JS中導(dǎo)入的資源最后都會(huì)基于WEBPACK編譯），我們也可以把資源手動(dòng)地在HTML中導(dǎo)入，但是HTML最后也要基于WEBPACK編譯，導(dǎo)入的地址也不建議寫相對(duì)地址，而是使用 %PUBLIC_URL%寫成絕對(duì)地址

腳手架深入學(xué)習(xí)

我們發(fā)現(xiàn)，create-react-app腳手架為了讓結(jié)構(gòu)目錄清晰，把安裝的webpack及配置文件都集成在了react-scripts模塊中，放到了node_modules中，因此需要在腳手架默認(rèn)安裝的基礎(chǔ)上，額外安裝一些我們需要的模塊的時(shí)候要分兩種情況進(jìn)行處理

• 情況一：如果我們安裝的其它組件，安裝成功后不需要修改webpack的配置項(xiàng)，此時(shí)我們直接安裝，并且調(diào)取使用即可

• 情況二：我們安裝的插件是基于webpack處理的，也就是需要把安裝的模塊配置到webpack中（重新修改webpack配置項(xiàng)）

要修改webpack配置項(xiàng)的話首先需要把隱藏到node_modules中的配置項(xiàng)暴露到項(xiàng)目中

• yarn eject執(zhí)行這一操作將配置項(xiàng)暴露出來(lái)，需要注意的這個(gè)操作是不可逆轉(zhuǎn)的，一但暴露出來(lái)配置項(xiàng)，就無(wú)法再隱藏回去
• 接著再對(duì)配置項(xiàng)進(jìn)行修改即可，這里以less作為例子
  1.先下載模塊和加載器
  yarn add less less-loader
  2.暴露webpack配置項(xiàng)
  yarn eject
  3.找到webpack.config.js修改配置（找到以下三處并進(jìn)行修改）

  // 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,
        },
    // 添加以下代碼，別忘了在該函數(shù)形參列表中添加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'
            ),
          },