参考
webpack4 的30个步骤打造优化到极致的 react 开发环境，如约而至
webpack
babel
配置
通过babel-loader对ES6+，JSX进行编译；
1.创建本地项目webpack-demo
mkdir webpack-demo
cd webpack-demo
2.在webpack-demo的根目录下创建package.json文件
npm init -y
- 安装
webpack依赖包
npm i webpack webpack-cli webpack-dev-server --save-dev
模块说明：
webpack
webpack核心webpack-cli
webpack的脚手架（启动器）webpack-dev-server
开发环境下用于实时加载依赖
4.修改package.json文件的scripts属性值,进行打包资源的配置
"scripts": {
"dev": "webpack-dev-server --open --mode development",
"build": "webpack --mode production"
},
5.安装编译ES6和JSX的依赖
npm i babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/preset-react --save-dev
npm i @babel/polyfill @babel/runtime
模块作用：
@babel/core
babel核心；@babel/preset-env
编译ES6；@babel/preset-react
转换JSX；@babel/plugin-transform-runtime
避免polyfill污染全局变量，减小打包体积@babel/polyfill:
ES6内置方法和函数转化垫片
6.创建webpack.config.js并在webpack.config.js中进行配置
const path = require('path');
module.exports = {
entry: {
app: './src/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[hash].min.js'
},
module: {
rules: [
{
test:/\.jsx?$/,
exclude: /node_modules/,
use: [{loader: 'babel-loader'}]
}
]
}
}
7.创建.babelrc，并配置.babelrc文件
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-transform-runtime"]
}
8.按需引入ployfill
在.babelrc文件预设presets中使用设置babel-preset-env options项 useBuiltins: usage | entry
usage: 仅仅加载代码中用到的 polyfill
entry: 根据浏览器版本的支持，将 polyfill 需求拆分引入，仅引入有浏览器不支持polyfill
a. 安装依赖
npm install core-js@2 @babel/runtime-corejs2 --save
b. 修改.babelrc文件
{
"presets": [["@babel/preset-env", { "corejs": "2", "useBuiltIns": "usage" }],
"@babel/preset-react"],
"plugins": ["@babel/plugin-transform-runtime"]
}
不推荐使用import的方式引入@babel/polyfill,原因这种全局引入的方式会导致代码中引入不需要ployfill，从而使得打包体积增大；推荐使用修改.babelrc配置的方式
配置了按需引入
polyfill后，用到es6以上的函数，babel会自动导入相关的polyfill，这样能大大减少 打包编译后的体积;
9.在入口文件app.js中写入js代码
let a = 0 , b = 0;
let sum = (a, b) => a+b;
async function getData() {
let data = await sum(a,b);
return data;
}
getData();
10.执行命令
npm run build
11.在根目录下出现一个名为dist的文件夹，该文件夹下的文件是打包后的资源文件；
