动手写webpack配置--2.使用React 作为学习模板。

基于Webpack4.x + npm6.5 + node v10.10.0 + vscode环境.

项目名webpackDemo；

注意：本节承接上一篇文章：https://blog.csdn.net/fengsh998/article/details/88070239

上一篇只是简单的对index.js做了个函数。这节，主要是基于react的组件方式来进行渲染显示。后面的章节将会同样基于react进行。

1.打开vscode终端.执行npm install -S react react-dom;

我装好后的版本为package.json中查看:不同时期安装不同，如果读者要和我这相同的版本可以使用npm install -S [email protected] [email protected] 这样就可以进行指定版本安装了。

  "dependencies": {
    "react": "^16.8.3",
    "react-dom": "^16.8.3"
  }

同时在src文件夹下新建一个App.js文件。

2.修改dist下的index.html

...
<body>
    <div id='root'></div>
    <script src='./bundle.js'></script>
</body>
...

3.修改index.js

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

import App from './App'

ReactDOM.render(<App />, document.getElementById('root'));

4.编写第一个react组件App.js

import React, { Component } from 'react'

export default class App extends Component {
    render() {
        return (
            <div>
                hello react for webpack!
            </div>
        )
    }
}

5. 此时打包看下发行啥，执行npm run dev进行打包。

出现如下报错:


ERROR in ./src/index.js 6:16
Module parse failed: Unexpected token (6:16)
You may need an appropriate loader to handle this file type.
| import App from './App'
| 
> ReactDOM.render(<App />, document.getElementById('root'));
| 
|

出现这个原因，是因为这里用到了ES6语法，及jsx语法。需要安装babel包进行,可以自行了解一个babel这个包。主要是对es6,es5语法的转换到标准的js.

npm install -S babel-core babel-preset-es2015 babel-preset-react babel-loader

安装好之后。查看package.json

...
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^16.8.3",
    "react-dom": "^16.8.3"
  },
...

修改webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/index.js',
    mode: 'development',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.(js|jsx)$/,      //当碰到js或jsx文件时,即文件中用到import 或reqire导入js时
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ["es2015", "react"]
                }
            },
            exclude: [
                path.resolve(__dirname, './node_modules')
            ]
        }]
    }
}

再次执行，发现：

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/core'
 babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.
...
......

这是因为我用的babel-loader为8.x了比较高。只需要把babel的版本改为7.x说可以了。

重新执行npm install -S [email protected] ,如果你说，我咋知道有啥版本啊。可以使用npm view babel-loader versions来查看有那些版本

安装完成后可以查看package.json中的babel-loader是否为7.1.5版本。如果OK。

那么，再执行npm run dev可以看到可以打包成功了。

AdeMacBook-Pro-3:webpackdemo a$ npm run dev

> [email protected] dev /Users/a/Documents/reactNative/reactstudy/webpackdemo
> webpack

Hash: 471e3b0bd6e80a32e6ac
Version: webpack 4.29.6
Time: 1334ms
Built at: 2019-03-02 00:13:12
    Asset     Size  Chunks             Chunk Names
bundle.js  900 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main} [built]
[./src/App.js] 2.23 KiB {main} [built]
[./src/index.js] 467 bytes {main} [built]
    + 11 hidden modules

同样，本地打开html.可以看到成功加载了App.js中的内容。

OK，第一个react组件，使用webpack打包成功。

动手写webpack配置--2.使用React 作为学习模板。

猜你喜欢