Webpack 解析ES6和React
webpack解析ES6
webpack原生可以识别js，但不能识别ES6语法
因此需要借助babel-loader以及.babelrc配置文件
babel-preset是一系列babel plugin的集合
- 安装以下npm包
npm i @babel/core@7.4.4 @babel/preset-env@7.4.4 babel-loader@8.0.5 -D
- 配置.babelrc文件
{
"presets": [
"@babel/preset-env"
]
}
- 配置webpack babel-loader
'use strict';
const path = require('path');
module.exports = {
// 入口 指定入口文件
entry: {
app:'./src/index.js',
search:'./src/search.js'
},
// 出口
output: {
// 指定输出目录
path: path.join(__dirname, 'dist'),
// 指定打包之后的输出文件
filename: '[name].js'
},
// 配置babel解析ES6
module:{
rules:[
{
test:/\.js$/,
use:'babel-loader'
}
]
},
// 生成模式还是开发模式
mode: 'production'
};
webpack解析react
- 安装依赖
npm i react@16.8.6 react-dom@16.8.6 @babel/preset-react@7.0.0 -D
{
"name": "02beginning",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": " webpack "
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.4.4",
"@babel/preset-env": "^7.4.4",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"webpack": "^4.31.0",
"webpack-cli": "^3.3.2"
}
}
- 配置.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
- 编写react组件
"use strict"
import React from 'react'
import ReactDOM from 'react-dom'
class Search extends React.Component{
render(){
return (
<div>search text</div>
)
}
}
ReactDOM.render(<Search />,document.getElementById('root'))
- 将react文件配置到 webpack 入口文件下
'use strict';
const path = require('path');
module.exports = {
// 入口 指定入口文件
entry: {
app:'./src/index.js',
search:'./src/search.js',
reactComp:'./src/react-comp.js'
},
// 出口
output: {
// 指定输出目录
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
// 配置babel解析ES6
module:{
rules:[
{
test:/\.js$/,
use:'babel-loader'
}
]
},
// 生成模式还是开发模式
mode: 'production'
};
- 执行命令解析
npm run build
- 引入打包文件到一个有root文件的html文件中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="./reactComp.js" type="text/javascript"></script>
</body>
</html>
相关版本文件
package.json
{
"name": "02beginning",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": " webpack "
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.4.4",
"@babel/preset-env": "^7.4.4",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"less": "^3.9.0",
"less-loader": "^5.0.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"webpack": "^4.31.0",
"webpack-cli": "^3.3.2"
}
}
.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 零经验选手，Compose 一天开发一款小游戏！
· 因为Apifox不支持离线，我果断选择了Apipost！
· 通过 API 将Deepseek响应流式内容输出到前端
2019-09-24 7 JavaScript函数调用&this关键字&全局对象&函数调用&闭包
2019-09-24 6 JavaScript函数&内置构造&函数提升&函数对象&箭头函数&函数参数&参数的值传递与对象传递
2019-09-24 5 JSON&与JavaScript转换&JavaScript:void(0)&JavaScript代码规范