探索Webpack ESNext Boilerplate: 现代前端开发的新起点

// webpack.config.js
const path = require('path');
const webpack = require('webpack');
 
module.exports = {
  entry: './src/index.js', // 项目的入口文件
  output: {
    filename: 'bundle.js', // 打包后的文件名
    path: path.resolve(__dirname, 'dist') // 打包后的目录
  },
  module: {
    rules: [
      {
        test: /\.js$/, // 正则表达式，匹配.js文件
        exclude: /node_modules/, // 排除node_modules目录
        use: {
          loader: 'babel-loader', // 使用babel-loader
          options: {
            presets: [
              '@babel/preset-env' // 转换ES6等新特性
            ]
          }
        }
      }
    ]
  },
  plugins: [
    new webpack.ProgressPlugin(), // 显示打包进度条
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development') // 设置环境变量
    })
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'), // 开发服务器的根目录
    port: 3000, // 开发服务器的端口
    open: true // 自动打开浏览器
  }
};

这个配置文件定义了Webpack的基本设置，包括入口文件、输出配置、模块加载器、插件和开发服务器的设置。它演示了如何使用Babel来转换ES6及以上版本的JavaScript代码，以确保兼容性，并且如何设置开发环境。