webpack编译ES6,JSX(Vue,react)

参考

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

3. 安装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的文件夹，该文件夹下的文件是打包后的资源文件；

编译结果