1. Webpack

1.1 基础概念

1.1.1 入口（Entry）

入口起点指示 Webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。示例配置如下：

// webpack.config.js
module.exports = {
  entry: './src/index.js'
};

1.1.2 输出（Output）

输出配置告诉 Webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件。示例配置如下：

const path = require('path');

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

1.2 加载器（Loaders）

1.2.1 Babel Loader

用于将 ES6+ 代码转换为浏览器可兼容的 JavaScript 代码。安装和配置示例如下：

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

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

1.2.2 CSS Loader 和 Style Loader

用于处理 CSS 文件。安装和配置示例如下：

npm install --save-dev css-loader style-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/, 
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

1.3 插件（Plugins）

1.3.1 HtmlWebpackPlugin

用于生成 HTML 文件，并自动注入打包后的 JavaScript 文件。安装和配置示例如下：

npm install --save-dev html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

1.3.2 CleanWebpackPlugin

用于在每次构建前清理 dist 目录。安装和配置示例如下：

npm install --save-dev clean-webpack-plugin

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  plugins: [
    new CleanWebpackPlugin()
  ]
};

1.4 开发服务器（Dev Server）

Webpack Dev Server 提供了一个简单的 Web 服务器，并且能够实时重新加载（Live Reloading）。安装和配置示例如下：

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

module.exports = {
  devServer: {
    contentBase: './dist',
    open: true
  }
};

运行开发服务器的命令：

npx webpack-dev-server --open

2.5 KiB Raw Permalink Blame History Unescape Escape