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"
]
}