动手写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 react@16.8.3 react-dom@16.8.3 这样就可以进行指定版本安装了。

  "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

babel-preset-es2015 将ES6转为ES5语法。

babel-preset-react:将jsx转为标准js语法。

 

安装好之后。查看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 babel-loader@7.1.5 ,如果你说,我咋知道有啥版本啊。可以使用npm view babel-loader versions来查看有那些版本

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

也可以升级版本:npm install -D babel-loader @babel/core @babel/preset-env

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

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

> webpackdemo@1.0.0 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打包成功。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

边缘998

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值