webpack开发配置React打包环境

Posted 2021-05-16 Jay_帅小伙

安装

npm install react react-dom --save

编写react代码

//index.js
import React, { Component } from "react";
import ReactDom from "react-dom";
class App extends Component {
render() {
return <div>hello world</div>;
 }
}
ReactDom.render(<App />, document.getElementById("app"));

安装babel和react的转换插件

npm install --save-dev @babel/preset-react

在babelrc文件里面添加

"presets": [
 [
 "@babel/preset-env",
 {
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1",
"android":"6.0"
 },
"useBuiltIns": "usage", //按需注⼊
 }
 ],
"@babel/preset-react"
 ]
}

多⻚⾯打包通⽤⽅案

entry:{
index:"./src/index",
list:"./src/list",
detail:"./src/detail"
}
new htmlWebpackPlugins({
title: "index.html",
template: path.join(__dirname, "./src/index/index.html"),
filename:"index.html",
chunks:[index]
})

1⽬录结构调整

2.使⽤ glob.sync 第三⽅库来匹配路径

npm i glob -D
const glob = require("glob")

//MPA多⻚⾯打包通⽤⽅案
const setMPA = () => {
const entry = {};
const htmlWebpackPlugins = [];
return {
entry,
htmlWebpackPlugins
};
};
const { entry, htmlWebpackPlugins } = setMPA();

const setMPA = () => {
const entry = {};
const htmlWebpackPlugins = [];
const entryFiles = glob.sync(path.join(__dirname,
"./src/*/index.js"));
entryFiles.map((item, index) => {
const entryFile = entryFiles[index];
const match = entryFile.match(/src\\/(.*)\\/index\\.js$/);
const pageName = match && match[1];
entry[pageName] = entryFile;
htmlWebpackPlugins.push(
new htmlWebpackPlugin({
title: pageName,
template: path.join(__dirname,
`src/${pageName}/index.html`),
filename: `${pageName}.html`,
chunks: [pageName],
inject: true
 })
 );
 });
return {
entry,
htmlWebpackPlugins
 };
};

const { entry, htmlWebpackPlugins } = setMPA();
module.exports = {
entry,
output:{
path: path.resolve(__dirname, "./dist"),
filename: "[name].js"
 }
plugins: [
// ...
...htmlWebpackPlugins//展开数组
 ]
}

@babel/plugin-transform-runtime

当我们开发的是组件库，⼯具库这些场景的时候，polyfill就不适合了，因
为polyfill是注⼊到全局变量，window下的，会污染全局环境，所以推荐闭
包⽅式：@babel/plugin-transform-runtime，它不会造成全局污染

安装

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime

修改配置⽂件：注释掉之前的presets，添加plugins

options: {
presets: [
 [
"@babel/preset-env",
 {
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1"
 },
useBuiltIns: "usage",
corejs: 2
}
 ]
 ],
"plugins": [
 [
"@babel/plugin-transform-runtime",
 {
"absoluteRuntime": false,
"corejs": false,
"helpers": true,
"regenerator": true,
"useESModules": false
 }
 ]
 ]
}

⽂件监听

轮询判断⽂件的最后编辑时间是否变化，某个⽂件发⽣了变化，并不会⽴
刻告诉监听者，先缓存起来
webpack开启监听模式，有两种

//1.启动webpack命令式 带上--watch 参数，启动监听后，需要⼿动刷新浏览器
scripts:{
"watch":"webpack --watch"
}
//2.在配置⽂件⾥设置 watch:true
watch: true, //默认false,不开启
//配合watch,只有开启才有作⽤
watchOptions: {
//默认为空，不监听的⽂件或者⽬录，⽀持正则
ignored: /node_modules/,
//监听到⽂件变化后，等300ms再去执⾏，默认300ms,
aggregateTimeout: 300,
//判断⽂件是否发⽣变化是通过不停的询问系统指定⽂件有没有变化，默认每秒问1次
poll: 1000 //ms
 }
//轮询 1s查看1次