Skip to main content

webpack

create-react-app 修改 webpack（配置项）方法​

通过 eject 命令释放 webpack 文件​

npm run eject

作用：react-scripts 是 create-react-app 的一个核心包，一些脚本和工具的默认配置都集成在里面，而 yarn eject 命令执行后会将封装在 create-react-app 中的配置全部反编译到当前项目，这样用户就能完全取得 webpack 文件的控制权。 所以，eject 命令存在的意义就是更改 webpack 配置，通过 eject 方法释放的配置文件这个操作是不可逆的，要谨慎。

使用 react-app-rewired 和 customize-cra​

步骤一、安装react-app-rewired 和 customize-cra 

npm i  customize-cra react-app-rewired --dev

customize-cra:使用 customize-cra 的好处就是可以不用执行 npm run eject 而进行修改 webpack 配置。

原理：customize-cra 利用 react-app-rewired 和 config-overrides.js 文件。通过导入customize-cra 函数并导出包装在我们的 override 函数中的一些函数调用，您可以轻松地修改构成 create-react-app 的基础配置对象（webpack，webpack-dev-server，babel等）。 项目启动的时候会先在config-overrides.js里读数据，对webpack里的默认文件进行整合，最后才会启动。

步骤二、修改根目录下 package.json 文件

在 package.json 中，将原本的 react-script 改为 react-app-rewired

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-app-rewired eject"
}

步骤三、在项目根目录下新建 config-overrides.js 文件。在该文件中配置 webpack。 举例:CSS-loader

{
    test: /\.css$/,
    use: [
        {
            loader: ‘style-loader‘
        },
        {
            loader: ‘css-loader‘,
            options: {
                root: ‘/‘, //修改css中url指向的根目录, 默认值为/, 对于绝对路径, css-loader默认是不会对它进行处理的
                modules: false, //开启css-modules模式, 默认值为flase
                localIdentName: ‘[name]-[local]-[hash:base64:5]‘, //设置css-modules模式下local类名的命名
                minimize: false, //压缩css代码, 默认false
                camelCase: false, //导出以驼峰化命名的类名, 默认false
                import: true, //禁止或启用@import, 默认true
                url: true, //禁止或启用url, 默认true
                sourceMap: false, //禁止或启用sourceMap, 默认false
                importLoaders: 0, //在css-loader前应用的loader的数目, 默认为0
                alias: {} //起别名, 默认{}
            }
        }
    ]
}