1、准备

  1. const add = (x, y) => x + y;
  2. // eslint-disable-next-line
  3. console.log(add(2, 5));
  5. const promise = new Promise((resolve) => {
  6.   setTimeout(() => {
  7.     // eslint-disable-next-line
  8.     console.log('定时器执行完了~');
  9.     resolve();
  10.   }, 1000);
  11. });
  12. // eslint-disable-next-line
  13. console.log(promise);
  1. <!DOCTYPE html>
  2. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>webpack</title>
  8.   </head>
  10.   <body>
  11.     <h1>hello webpack</h1>
  12.   </body>
  14. </html>

2、webpack.config.js

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      /*
      语法检查： eslint-loader  eslint 注意：只检查自己写的源代码，第三方的库是不用检查的
      设置检查规则：
      package.json中eslintConfig中设置~
      "eslintConfig": {
        "extends": "airbnb-base"
      }
      */
      {
        test: /\.js$/,
        exclude: /node_modules/,
        enforce: 'pre', //一个文件被多个loader处理，一定要指定loader执行的先后顺序 先执行eslint  再执行babel
        loader: 'eslint-loader',
        options: {
          // 自动修复eslint的错误
          fix: true
        }
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,   
        loader: 'babel-loader',
        options: {
          presets: [
            [ //预设环境 @babel/preset-env 基本的兼容性处理 @babel/polyfill 全部兼容性处理
              '@babel/preset-env',
              {
                useBuiltIns: 'usage',   //按需下载
                corejs: {version: 3},   //指定core.js的版本
                //指定浏览器版本
                targets:{
                  chrome:"60",
                  firefox:"60",
                  ie:'9',
                  safari:"10",
                  edge:'17'
                }
              }
            ]
          ],
          //开启babel缓存，第二次构建时可以读取之前的缓存         
          cacheDirectory:true      //babel缓存
        }
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
};