暴露webpack.config文件并修改自己项目需要的样子

很多人都在问yarn是什么,如果你知道npm是什么 那我能告诉你yarn是跟npm/cnpm一样的包管理工具,只是它比npm更加优秀,更加稳定。
暴露webpack.config文件,依次执行以下代码:

//暴露package.json中的script中的eject文件
yarn eject
//命令行会问你:这是一个单向操作,确认操作后不可逆转/返回。
y
//但是会报错: 原因是没有提交代码,那么就在GitHub网站上创建一个代码库 提交上去即可
//在此运行以上命令
//此刻你的 demo-items文件夹中就会多了一个 config文件夹
//当你运行项目的时候你会发现报错 : 缺少@babel/plugin-syntax-json-strings文件
//执行命令 
yarn add @babel/plugin-syntax-json-strings

打开文件夹中的webpack.config.js
下面添加webpack解析less文件

//安装less模块  执行以下命令
yarn add less
//在webpack.config.js中css解析之前添加以下代码:
{
              test: /\.less$/,
              use: [
                require.resolve('style-loader'),
                {
                  loader:require.resolve('css-loader'),
                  options:{
                    importLoaders: 1
                  },
                },
                {
                  loader:require.resolve('postcss-loader'),
                  options:{
                    ident:'postcss',
                    plugins:()=>[
                       require('postcss-flexbugs-fixes'), 
                    ]
                  }
                },
                {
                  loader:require.resolve('less-loader')
                }
              ]
            },

这样config文件暴露,我们就可以安装自己要的项目架构了,下篇文章讲解antd UI组件安装、按需加载、定制主题色。

猜你喜欢

转载自blog.csdn.net/qq_40524880/article/details/86606530