webpack实现js

webpack 实现 JavaScript 打包的基本流程

安装 webpack 和 webpack-cli 作为开发依赖：

npm install webpack webpack-cli --save-dev

创建 webpack 配置文件 webpack.config.js：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

配置 loader 处理 JavaScript

安装 Babel 相关依赖以支持现代 JavaScript 语法：

npm install babel-loader @babel/core @babel/preset-env --save-dev

在 webpack 配置中添加 module 规则：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

代码分割与优化

使用动态导入实现代码分割：

// 原代码
import module from './module';

// 改为动态导入
const module = await import('./module');

配置 SplitChunksPlugin 优化重复代码：

optimization: {
  splitChunks: {
    chunks: 'all',
  },
}

开发环境配置

添加开发服务器和 source map：

devtool: 'inline-source-map',
devServer: {
  contentBase: './dist',
  hot: true,
}

安装开发服务器：

npm install webpack-dev-server --save-dev

生产环境优化

添加生产模式配置：

mode: 'production',

压缩 JavaScript 代码：

optimization: {
  minimize: true,
}

完整配置示例

典型的生产环境 webpack 配置：

const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        }
      }
    ]
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};