关于babel和webpack结合使用的实践

1.webapack和babel的高版本文件配置
2.webapack和babel的低版本配置

1.webapack和babel的高版本文件配置

1.项目根目录下package.json文件内容如下：

{
  "name": "dive-into-webpack",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack --w"
  },
  "dependencies": {
    "@babel/polyfill": "7.8.7",
    "@babel/runtime": "7.8.7",
    "core-js": "3.6.4"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "7.8.3",
    "@babel/plugin-syntax-dynamic-import": "7.2.0",
    "@babel/cli": "7.8.4",
    "@babel/core": "7.8.7",
    "@babel/preset-env": "7.8.7",
    "@babel/runtime": "7.8.7",
    "@babel/types": "7.8.7",
    "babel-loader": "8.0.6",
    "webpack": "4.39.0",
    "webpack-bundle-analyzer": "3.6.0",
    "webpack-cli": "3.3.6"
  }
}

2.项目根目录下.babelrc文件内容如下：

{
  "plugins": [
  ],
  "presets": [
    [
      // "env"
      "@babel/preset-env",
      {
        "targets": {
          "browsers": [
            "chrome >= 70",
            "edge >= 15",
            "firefox >= 60",
            "ie >= 11"
          ]
        },
        "useBuiltIns": "usage",
        "corejs": 3,
        "comments": true,
 		"sourceMap": "inline"
      }
    ],    
  ],
}

3.项目根目录下webpack.config.js文件内容如下：

const path = require('path');

module.exports = {
  // JS 执行入口文件
  entry: './main.js',
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, './dist'),
  },
  module: {
    rules: [
      {
        test: /.js$/,
        // use: ['babel-loader'],
        use: {
          loader: 'babel-loader',
          query: {
            cacheDirectory: true,
            presets: [
              [
                '@babel/preset-env'
              ]
            ],
          },
        },
      },
    ]
  },
  devtool: 'source-map' // 输出 source-map 方便直接调试 ES6 源码
};

4.项目根目录下index.html文件内容如下

<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--导入 webpack 输出的 JS 文件-->
<script src="./dist/bundle.js"></script>
</body>
</html>

5.项目根目录下main.js文件内容如下：

//引入babel polyfill
import "@babel/polyfill"
// 通过 ES6 模块化规范导入 show 函数
import { show } from './show';
// 执行 show 函数
show('Webpack');

const funA=x=>x+1;

const Gen = (time) => {
    return new Promise((resolve, reject) => {
        setTimeout(function () {
            if (time < 500) {
                reject(time);
            } else {
                resolve(time);
            }
        }, time);
    });
};

Gen(Math.random() * 1000)
    .then((val) => console.log("resolve", val))
    .catch((err) => console.log("err"))
    .finally(() => console.log("finish"));
console.log([1,2,3].includes(1));

6.项目根目录下show.js文件内容如下：

// 操作 DOM 元素，把 content 显示到网页上
export function show(content) {
  window.document.getElementById('app').innerText = `Hello,${content}`;
}

2.webapack和babel的低版本配置

低版本的配置，可以更明显的看到babel转换后的代码，以及webpack压缩之后的文件。方便新手理解

1.package.json文件内容如下：

{
  "name": "dive-into-webpack",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack --w"
  },
  "dependencies": {
    "@babel/polyfill": "7.8.7",
    "@babel/runtime": "7.8.7",
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "webpack": "^3.4.0"
  }
}

2.项目根目录下.babelrc文件内容如下：

{
  "presets": [
    "env"
  ]
}

3.项目根目录下webpack.config.js文件内容如下：

const path = require('path');

module.exports = {
  // JS 执行入口文件
  entry: './main.js',
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, './dist'),
  },
  module: {
    rules: [
      {
        test: /.js$/,
        use: ['babel-loader'],
      },
    ]
  },
  devtool: 'source-map' // 输出 source-map 方便直接调试 ES6 源码
};