标签：npm react babel loader React webpack preset 应用环境
前端 webpack搭建React应用环境（一）
改环境支持的技术场景：
1. 支持 React
2. 支持 typescript
3.支持 scss
4.支持 调试热更新
一、创建项目目录
npm init
二、安装依赖
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react
npm install --save-dev webpack webpack-cli webpack-dev-server style-loader css-loader babel-loader
npm install html-webpack-plugin clean-webpack-plugin --save-dev
npm install react react-dom --save
npm install ts-loader typescript core-js --save
npm install --save-dev @babel/preset-typescript
npm install --save-dev @babel/preset-react
npm install @types/react-dom @types/react --save-dev
npm install --save-dev node-sass sass-loader
三、目录结构
project_name
public
index.html
src
component
app
app.scss
app.tsx
index.tsx
babel.config.json
package.json
package-lock.json
tsconfig.ts
webpack.config.js
四、index.html文件内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>React Starter</title>
</head>
<body>
<div id="root"></div>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
</body>
</html>
五、app.scss内容
body{
color: red;
div{
color: greenyellow;
}
}
六、app.tsx文件内容
import React,{FC,useState} from 'react'
import './app.scss'
interface AppProps {
}
export const App: FC<AppProps> =(props)=>{
const [data, setData] = useState(null)
return <article className={'app'}>
hello react
</article>
}
App.defaultProps = {}
export {App as default} from './app'
七、index.tsx文件内容
import React from 'react'
import ReactDOM from 'react-dom'
import App from "./component/app/app"
ReactDOM.render(<App/>, document.getElementById('root'))
八、babel.config.json文件内容
{
"presets": ["@babel/preset-env","@babel/preset-react"]
}
九、package.json文件内容
{
"name": "project_name",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack server"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.16.0",
"@babel/core": "^7.16.0",
"@babel/preset-env": "^7.16.4",
"@babel/preset-react": "^7.16.0",
"@babel/preset-typescript": "^7.16.0",
"@types/react": "^17.0.36",
"@types/react-dom": "^17.0.11",
"babel-loader": "^8.2.3",
"clean-webpack-plugin": "^4.0.0",
"css-loader": "^6.5.1",
"html-webpack-plugin": "^5.5.0",
"node-sass": "^6.0.1",
"sass-loader": "^12.3.0",
"style-loader": "^3.3.1",
"webpack": "^5.64.2",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.5.0"
},
"dependencies": {
"core-js": "^3.19.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"ts-loader": "^9.2.6",
"typescript": "^4.5.2"
}
}
十、package-lock.json文件内容（随npm自动生成的，无需关注）
十一、tsconfig.json文件内容
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": false,
"noEmit": false,
"jsx": "react"
},
"include": [
"src"
]
}
十二、webpack.config.js文件内容
const path = require("path")
const webpack = require("webpack")
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
module.exports = {
entry: path.resolve(__dirname, "src/index.tsx"),
mode: "development",
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/,
exclude: /node_modules/,
use:[
{
loader: "babel-loader",
options: {
presets: [
[
"@babel/preset-env",
// 配置信息
{
targets: {
"chrome": "58",
"ie": "11",
},
// 指定 corejs 的版本
"corejs": "3",
// 使用 corejs 的方式 "usage" 表示按需加载
"useBuiltIns": "usage"
}
],
[
"@babel/preset-typescript",
],
[
"@babel/preset-react",
{
}
]
]
}
},
{
loader:"ts-loader"
}
],
},
{
test: /\.(css|scss)$/,
use: [
{
loader:"style-loader",
},
{
loader:"css-loader"
},
{
loader:"sass-loader"
}
]
}
]
},
resolve: {
extensions: ["*", ".js", ".jsx", ".ts", ".tsx"],
},
output: {
path: path.resolve(__dirname, "build"),
filename: "bundle.js"
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, 'public/index.html')
}),
new CleanWebpackPlugin({
path: path.join(__dirname, 'build')
})
]
}
十三、完成
启动命令：
npm run-script dev
标签：npm,react,babel,loader,React,webpack,preset,应用环境 来源： https://www.cnblogs.com/niyan/p/15868741.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。