webpack开发配置React打包环境
安装
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次