webpack学习(四):结合React框架以及ES6

初始化

创建完项目目录
webpack学习(四):结合React框架以及ES6_第1张图片
通过运行npm init 进行初始化

安装依赖

安装需要的依赖和模块

    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^2.0.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"

解释一下这些依赖包以及模块

  1. 因为我们要使用 React, 所以我们需要先安装react和react-dom这两个依赖包,–save 命令用于将包添加至 package.json 文件的dependencies中

  2. 我们也要安装一些 babel 插件,–save-dev是将插件添加到devDependencies中
    babel-loader用于转换ES6语法
    babel-core:babel转译器本身,提供了babel的转译API,如babel.transform等,用于对代码进行转译。像webpack的babel-loader就是调用这些API来完成转译过程的
    babel-preset-react 用于解析jsx的包
    babel-preset-es2015 解析es2015的包,智能识别当前运行环境并进行转换(截至Babel v6,所有年度预设均已弃用,建议改用babel-preset-env)

  3. 安装webpack以及webpack-dev-server依赖
    webpack-dev-server就是一个基于Node.js和webpack的一个简易服务器
    webpack 基础依赖包
    webpack-cli :webpack脚手架,没有安装的话run build的时候有可能会提示安装(npm install webpack-cli -D)

源代码编写

// App.js
import React from 'react';
class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Hello,react!</h1>
         </div>
      );
   }
}
export default App;
// App.js
// main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.js';

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

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%= htmlWebpackPlugin.options.title %>title>
head>
<body>
    <div id="app">div>
body>
html>

配置webpack

    {
        test: /(\.jsx|\.js)$/,
        use: {
            loader: "babel-loader",
            options: {
                presets: [
                    "env", "react"
                ]
            }
        }
    }

完成后保存,运行npm run dev(记得在package.json中添加命令)或者npm run build后打开index.html,结果如下:
webpack学习(四):结合React框架以及ES6_第2张图片
本次学习和练习告一段落~~~

你可能感兴趣的:(技术学习)