react 脚手架配置loader

使用 create-react-app 配置 react 开发环境，像下面这样，就可以构建一个新的 react 单页面应用，非常方便。

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

在安装完成之后

npm run eject    (这一步操作是将webpack配置文件暴露出来 操作单向不可逆)

执行完上步操作之后会出现一个config的文件

以sass为例
配置sass需要按以下步骤进行:

一、安装sass-loader和node-sass依赖

npm install sass-loader node-sass --save-dev

二、打开react的webpack配置

config/webpack.config.dev.js

找到module下的rules，然后找到最后一个配置，修改成如下的样子

 {

//1.在web pack.config.dev.js 的exclude中添加/\.scss$/
      exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/,/\.scss$/],

     loader: require.resolve('file-loader'),

      options: {
 
             name: 'static/media/[name].[hash:8].[ext]',
 
         },
 
 },
 
{//2.在web pack.config.dev.js 中配置此项
              test:/\.scss$/,
              include:paths.appSrc,
              loader:["style-loader","css-loader","sass-loader"],
          },

三、下面就可以使用scss文件了