webpack 4和Babel构建React应用

最新推荐文章于 2023-03-13 23:48:21 发布

duaiduai虎

最新推荐文章于 2023-03-13 23:48:21 发布

阅读量182

点赞数 1

分类专栏： React 文章标签： webpack react babel

本文链接：https://blog.csdn.net/u011533382/article/details/87711563

版权

React 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

查了半天资料，终于把环境搭建好了。

环境搭建

目录结构

--your project
|--dist(项目打包输出目录)
   |--bundle.js(该文件是由webpack打包生成)
   |--index.html　　
|--src
   |--index.js
|--webpack
   |--webpack.config.js
|--package.json
|--.babelrc

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
    /* react DOM*/
    </div>
    <script src="bundle.js"></script>
</body>
</html>

index.js

import React, { Component } from 'react';
import { render } from 'react-dom';

render(
    <div>Hello React!</div>,
    document.getElementById('app')
);

webpack.config.js

const path = require('path');
module.exports = {
	//指定入口文件，程序从这里开始编译,__dirname当前所在目录
    entry: path.resolve(__dirname, '../src/index.js'), 
    output: {
    	// 输出的路径
        path: path.resolve(__dirname, '../dist'), 
        // 打包后文件
        filename: 'bundle.js'  
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: {
		          loader: "babel-loader"
		        },
                exclude: /node_modules/
            }
        ]
    }
}

.babelrc

{
   "presets": ["@babel/preset-env", "@babel/preset-react"]
}

package.json

{
  "name": "mimc-electron-react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --config webpack/webpack.config.js"
  },
  "author": "duaich",
  "license": "ISC",
  "dependencies": {
    "electron": "2.0.11"
  },
  "devDependencies": {
    "@babel/core": "^7.3.3",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "react": "^16.8.2",
    "react-dom": "^16.8.2",
    "webpack": "^4.29.4",
    "webpack-cli": "^3.2.3"
  }
}

安装库

npm i react react-dom @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev -g

duaiduai虎

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack 4和Babel构建React应用

查了半天资料，终于把环境搭建好了。环境搭建目录结构--your project|--dist(项目打包输出目录) |--bundle.js(该文件是由webpack打包生成) |--index.html　　|--src |--index.js|--webpack |--webpack.config.js|--package.json|--.babelrc...
复制链接

扫一扫

专栏目录