关于react脚手架暴露webpack问题

create-react-app的背后,隐藏着一个webpack。一般情况下来说,webpack是默默隐藏的幕后英雄,你不需要修改它的配置,只需要简单无脑使用即可。若要修改webpack,就要释放webpack配置

  • 执行命令npm run eject
    • 如果对项目代码做过修改,那么执行命令的时候会报错,这个时候不妨把代码提交下,执行
    • git add .,git commit -m "init",然后再npm run eject
    • 执行完毕后,项目根目录下面就有config和scripts两个目录生成。同时,package.json里面的scripts,也更新了新的命令。
    • npm run eject之后,react-scripts命令就失效了哦。因为在node_modules/下面,都没有react-scripts/的目录了,它以另外的形式存在于这个项目里面了。这仅仅是个事物的变形转化,ta还在,以另外的形式存在。
    • 看着多出来的两个文件夹:config/和scripts/,您就可以再定义修改相关的create-react-app的系统逻辑了。不过这并不是推荐操作。

按需加载可以使用 babel-plugin-import

暴露后添加less解析less-loader

  1. npm install less-loader less –save-dev
  2. 修改node_modules/react_script/config下的webpack.config.dev.js 和 webpack.config-prod.js 配置文件

    • test: /.css$/ 改为 /.(css|less)$/
    • test: /.css$/ 的 use 数组配置增加 less-loader
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
{
test: /\.(css|less)$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
{
loader: require.resolve('less-loader') // compiles Less to CSS
}
],
},