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("
love jq
")
	})
}

• 使用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

配置入口文件

• 将两个配置合并到一个配置文件里面

续