使用 Webpack 4 和 Babel 7 创建 React 应用程序
mkdir react_project npm i [email?protected] [email?protected] -D //i:install -D:-?save-dev ? 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‘)); ?
? //部分内容来自网络,仅记录方便自己参考 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |