Webpack从入门到出门（5）

(如转载，请注明出处)

1.安装react

npm install react -D react react-dom

除了安装react, 我们还要安装babel babel-preset-react babel-preset-es2015

npm i -D babel babel-preset-react babel-preset-es2015

安装完成后我们需要在src目录下建立一个.babelrc文件,在文件内输入:

{

    "presets": ["es2015", "react"]

}

当然, 还没算完,我们还要安装 babel-loader和babel-core

npm install --save-dev babel-loader babel-core

安装完成后在webpack.config.js中的rules内配置如下:

在app.js中引入 react 和 reactDOM, 然后渲染个元素试一下:

运行npm run dev之后,元素成功渲染了,是不是有点小兴奋呢!  不过别高兴太早,我们会在终端找到这么一行提示:

 [BABEL] Note: The code generator has deoptimised the styling of "/Users/ruzhan/webpack/node_modules/react-dom/cjs/react-dom.development.js" as it exceeds the max of "500KB".

超出500KB最大值,问题在哪儿呢,原来在webpack.config.js中的配置有问题,我们把exclude: '/node_modules'上的引号去掉再运行试试,是不是很完美?