Webpack入门教程：从基本概念到优化技巧

简介

Webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)，它能够将项目中的所有依赖项（包括JavaScript、图片、CSS等）打包成一个或多个bundle。这篇文章将带你从Webpack的基本概念开始，逐步深入到安装配置、常用功能和优化技巧。

安装配置

安装Webpack

在开始之前，请确保你已经安装了Node.js和npm。你可以通过npm全局安装Webpack，或者将其作为项目的开发依赖安装。

# 全局安装
npm install -g webpack

# 项目开发依赖安装
npm install --save-dev webpack webpack-cli

创建配置文件

Webpack需要一个配置文件（通常是webpack.config.js），来告诉它如何处理你的项目。以下是一个基本的配置文件示例：

const path = require('path');

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: 'babel-loader'