webpack-搭建React

webpack搭建React

  • webpack搭建React
    • 安装
    • webpack配置React
      • 再webpack配置文件中配置关于react的规则
      • 创建关于react的配置文件`.babelrc`
    • 创建React---小案例
      • 导入React以及React-Dom
      • 创建React的App组件
      • 调用
    • JS压缩
      • 安装
      • 配置webpack文件的压缩插件
    • 出错时显示错误地址
      • 使用
    • 代码分割---splitChunks--简单了解
    • 动态加载
      • 可以写在事件中
    • 环境变量
      • 关于目录
      • 配置文件
      • 配置入口文件

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

配置入口文件

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

你可能感兴趣的:(webpack,工作,项目)