基础篇：webpack应用指南一

最新推荐文章于 2025-09-12 09:36:31 发布

原创最新推荐文章于 2025-09-12 09:36:31 发布 · 453 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #前端 #javascript

笔记专栏收录该内容

19 篇文章

订阅专栏

本文介绍了Webpack5的基本安装和配置，包括使用npm初始化项目，设置webpack.config.js，管理CSS和图片资源，使用Babel进行JS语法兼容，以及如何配置HtmlWebpackPlugin和webpack-dev-server。此外，还详细讲解了资源加载器如style-loader和css-loader的使用，以及自定义输出文件名的方法。

webpack应用指南一

一、起步
二、管理资源
三、常用插件
- HtmlWebpackPlugin。
- webpack-dev-server

根据尚硅谷视频教程及webpack5官网部分内容整理。
尚硅谷Web前端之Webpack5教程文档
Webpack中文官网

一、起步

基本安装

新建文件目录（如D://webpack-demo），在当前目录下初始化npm，命令r如下：

npm init -y

然后本地安装webpack以及webpack-cli（此工具用于在命令行中运行webpack），命令如下：

npm i webpack webpack-cli -D

安装完成，创建以下目录结构、文件，以便后期测试应用。

webpack-demo
	|- package.json
 	|- package-lock.json
 	|- /dist
		|- index.html
 	|- /src
 		|- index.js

使用配置文件

在当前根目录下新建配置文件webpack.config.js，目录结构如下。

webpack-demo
	|- package.json
 	|- package-lock.json
 	|- webpack.config.js
 	|- /dist
		|- index.html
 	|- /src
 		|- index.js

webpack.config.js文件内容：

const path = require('path');

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

如上所示，entry表示入口文件，webpack打包文件会以此文件为起点，并递归入口文件所依赖或引用的其他文件。output表示输出内容，filename表示要输出的文件名称，path表示输出的文件路径。
使用以下命令即可进行构建。

npx webpack --config webpack.config.js

如果webpack.config.js存在，则webpack命令将默认选择使用它。所以--config webpack.config.js可省略。

npm scripts

考虑到用CLI这种方式来运行本地的webpack副本并不是特别方便，我们可以设置一个快捷方式。调整package.json文件，添加一个npm script,如下所示（新增build）：

{
   "name": "webpack-demo",
   "version": "1.0.0",
   "description": "",
   "private": true,
   "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "webpack": "^5.4.0",
     "webpack-cli": "^4.2.0"
   },
   "dependencies": {
     "lodash": "^4.17.20"
   }
 }

现在可使用npm run build命令进行打包构建。

npm run build

二、管理资源

加载CSS文件

如果js文件中引入（import）了一个CSS文件，则需要安装style-loader和css-loader包进行文件解析，且需要在webpack配置文件中的module中添加这些loader。
安装loader包：

npm i style-loader css-loader -D

webpack.config.js内容配置module：

const path = require('path');

module.exports = {
   entry: './src/index.js',
   output: {
     filename: 'bundle.js',
     path: path.resolve(__dirname, 'dist'),
   },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
 };

应保证 loader的先后顺序：'style-loader'在前，而'css-loader'在后。如果不遵守此约定，webpack可能会抛出错误。

加载images 图像

在 webpack 5中，可以使用内置的 Asset Modules，将图片混入系统中。（webpack4需要使用url-loader和file-loader）

// 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: /\.css$/i,
         use: ['style-loader', 'css-loader'],
       },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        // webpack5
        type: 'asset',
        // webpack4
        // use:['file-loader','url-loader']
        parser: {
         dataUrlCondition: {
           maxSize: 4 * 1024 // 4kb以下以base64格式输出
         }
       }
      },
     ],
   },
 };

在 webpack 5 之前，通常使用：

raw-loader 将文件导入为字符串
url-loader 将文件作为 data URI 内联到 bundle 中
file-loader 将文件发送到输出目录
资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader:
asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。

自定义输出文件名

默认情况下，asset/resource 模块以 [hash][ext][query] 文件名发送到输出目录。
可以通过在 webpack 配置中设置 output.assetModuleFilename 来修改此模板字符串：

[hash]：表示hash值，后面可携带自定义位数，例如[hash:8]。
[ext]：原文件扩展名。
[query]：添加之前的query参数。

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    // 定义输出文件名称
   assetModuleFilename: 'images/[hash][ext][query]'
  },
  module: {
    rules: [
      {
        test: /\.png/,
        type: 'asset/resource'
      }
    ]
  },
};

另一种自定义输出文件名的方式是，将某些资源发送到指定目录：

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
   assetModuleFilename: 'images/[hash][ext][query]'
  },
  module: {
    rules: [
      {
        test: /\.png/,
        type: 'asset/resource'
     },
     {
       test: /\.html/,
       type: 'asset/resource',
       generator: {
       	// 自定义文件输出路径及名称
         filename: 'static/[hash][ext][query]'
       }
     }
    ]
  },
};

Babel（js语法兼容）

基本概念及安装

Babel是一个工具链，主要用于在当前和旧的浏览器或环境中，将ECMAScript 2015+代码转换为JavaScript向后兼容版本的代码。
常用的babel预设（presets）：

@babel/preset-env（集成包）：一个智能预设，允许使用最新的js。
@babel/preset-react：编译React.jsx语法的预设。
@babel/preset-typescript：编译TypeScript语法的预设。
安装babel，@babel/core是Babel的核心功能包（API）：

npm install -D babel-loader @babel/core @babel/preset-env

配置用法。

用法一：使用babel.config.js单独配置预设。
在文件根目录下创建文件babel.config.js（或者babel.config.json），配置预设或者插件等，方法如下：

module.exports = {
	presets: ['@babel/preset-env'],
	plugins: []
}

用法二：在webpack配置对象的module中配置options，如下：

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  // 入口
  entry: './src/main.js',
  // 输出
  output: {
    ...
  },
  // 模块
  module: {
    rules: [
      ...,
      {
        test: /\.m?js$/,
        // 排除，不对node_modules或者bower_components文件夹做转化
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  // 插件
  plugins:[
    ...
  ],
  // 模式
  mode: 'production',
};

三、常用插件

HtmlWebpackPlugin。

HtmlWebpackPlugin简化了HTML文件的创建，为webpack包提供服务。这对于那些文件名中包含哈希值，并且哈希值会随着每次编译而改变的webpack包特别有用。该插件会自动生成一个HTML文件，使用lodash模板提供模板，或者使用你自己的loader。

# 安装
npm install -D html-webpack-plugin

在webpack.config.js中应用：

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 入口
  entry: './src/main.js',
  // 输出
  output: {
    path: path.resolve(__dirname, 'dist'),
    // js资源
    filename: 'static/js/main.js',
    // 在打包前，将dist目录整个清空
    clean: true
  },
  // 模块
  module: {
    rules: [
      {
        test:/\.css$/i,
        use: ['style-loader', 'css-loader']
      },
      {
        test:/\.less$/i,
        use: ['style-loader', 'css-loader','less-loader']
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 15 * 1024 // 小于15kb使用base64格式，其他引用图片路径
          }
        },
        generator: {
          // 控制图片输出路径及文件名称
          filename: 'static/imags/[hash:8][ext][query]'
        }
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  // 插件
  plugins:[
    new HtmlWebpackPlugin({
    // template表示参照的的原文件
      template: path.resolve(__dirname, 'public/index.html')
    })
  ],
  // 模式
  mode: 'development',
};

webpack-dev-server

修改文件后悔自动更新文件并打包，但不会输出，即dist中不会有文件，devserver打包的文件只存在于内存中，开发环境下使用。配置方式如下（不需要引入，只需配置devServer参数即可）：

// webpack.config.js，与entry等平级
...

module.exports = {
  // 入口
  entry: './src/main.js',
  // 输出
  output: {...},
  // 模块
  module: {
    rules: [...]
  },
  // 插件
  plugins:[...],
  // 开发服务器不会输出文件，只存在内存中
  devServer: {
    host: 'localhost',
    port: '3000',
    open: true,
    hot: true
  },
  // 模式
  mode: 'development',
};