webpack搭建React
webpack搭建React
安装
-
babel-loader
处理es6文件,转换成es5 -
@babel/core-babel
babel核心模块, -
@babel/preset-env
编译ES6等,环境预设 -
@babel/preset-react
转换JSX,react运行环境,jsx语法支持 -
npm i babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/preset-react -D
安装 -
@babel/plugin-transform-runtime
避免 polyfill 污染全局变量,减小打包体积 -
@babel/polyfill
ES6 内置方法和函数转化垫片 -
npm i @babel/polyfill @babel/runtime -D
安装 -
安装,react,以及react-dom
-
npm i react react-dom -S
webpack配置React
再webpack配置文件中配置关于react的规则
// 处理css的
module : {
// 规则
rules : [
// 匹配react的测试
{
test : /\.(js|jsx)$/, // 匹配文件
use : ["babel-loader"], // 使用的loader
exclude : /node_modules/, // 排除 node_modul
},
]
}
创建关于react的配置文件.babelrc
{
// 加入预设,编译ES6等,转换JSX
"presets" : ["@babel/preset-env","@babel/preset-react"],
}
创建React—小案例
导入React以及React-Dom
// 导入reactdom 以及react
import ReactDom from 'react-dom';
import React,{Component} from 'react';
创建React的App组件
- 使用类的方法
// 导入reactdom 以及react
import ReactDom from 'react-dom';
import React,{Component} from 'react';
// 创建类 App组件
class App extends Component {
constructor(props) {
super(props);
this.state = {name : "momo",age : 18};
}
render() {
// jsx语法
return (
<div>
<h1>我的名字是:{this.state.name},今年{this.state.age}</h1>
// 创建点击方法对象,this.setState 设置state方法,中的age属性
<button onClick={() => {this.setState({age : this.state.age+1})}}>一年涨一岁</button>
</div>
)
}
}
调用
<div id="root"></div>
JS压缩
安装
npm i uglifyjs-webpack-plugin -D
安装压缩js技术
配置webpack文件的压缩插件
- 导入压缩js的插件
// 导入React中的压缩js的插件
const UglifyjsWebpackPlugin = require("uglifyjs-webpack-plugin");
- 调用
// 优化
optimization: {
// 压缩器
minimizer: [
new optimizeCSS(),
new UglifyjsWebpackPlugin({})
],
},
出错时显示错误地址
- sourceMap : 创建一个压缩过的文件与源文件的映射
- 当错误了,能够知道源代码在那一行 sourceMap 他是一个map关系,他知道dist/main。就是文件96行错误,对应src目录下index.js第一行
使用
- 与webpack中的出口,入口,配置,服务器等同级
// 开发工具
// 对应错误的映射
devtool:'cheap-module-eval-source-map',
- 建议
// 开发模式下简易使用cheap-module-eval-source-map
development:'cheap-module-eval-source-map'
// 产品模式下简易使用,cheap-module-source-map,或者不使用
production:'cheap-module-source-map'
代码分割—splitChunks–简单了解
- 当文件太大的时候可以分割一些包,如果请求的多,分包,等等
// 优化
optimization: {
// 分割模块
splitChunks: {
chunks: "all",
// 所有的 chunks 代码公共的部分分离出来成为一个单独的文件},
},
}
动态加载
可以写在事件中
// 定义动态加载jQuery事件
loadJS() {
import("jquery")
.then( ({default : $}) => {
console.log($);
$("body").append("<div>love jq</div>")
})
}
- 使用webpack魔法注释以及prefetch
loadJS(){
import(/* webpackChunkName:"jquery",webpackPrefetch:true */"jquery")
.then(({default:$})=>{
alert($("body").text())
})
}
环境变量
关于目录
- path.resolve(__drname,’…/public/index.html’);
- path 解决路径的文件
- __dirname 当前所在的目录
- …/public/index.html
- 结果:c:/项目名字/public/index.html
配置文件
- 创建config文件夹
- 基础配置一个文件:config/webpack.com.js
- 开发配置一个文件:config/webpack.dev.js
- 产品配置一个文件:config/webpack.prod.js
配置入口文件
- 将两个配置合并到一个配置文件里面
续