0
点赞
收藏
分享

微信扫一扫

使用 Webpack 4 和 Babel 7 创建 React 应用程序

  mkdir react_project

  cd react_project


  npm init -y

  npm i webpack@4 webpack-cli@3 -D //i:install -D:- save-dev

  npm i react@16 react-dom@16 -S

  npm i babel-loader@8 @babel/core @babel/preset-env @babel/preset-react -D

  npm i html-webpack-plugin -D

  npm i webpack-dev-server -D

  npm i css-loader style-loader -D


  webpack.config.js

const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\.js|\.jsx$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[name]_[local]_[hash:base64]',
sourceMap: true,
minimize: true
}
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html'
})
]
};


  .babelrc

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


  src/index.html  

<!DOCTYPE html>
<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>React、Webpack4 and Babel 7</title>
</head>
<body>
<section id="index"></section>
</body>
</html>


  src/index.js  

import React from 'react';
import ReactDOM from 'react-dom';

const Index = () => {
return <div>Hello World React!</div>;
};

ReactDOM.render(<Index />, document.getElementById('index'));


  npm run start  //启动项目


 





举报

相关推荐

0 条评论