webpack基本使用

最新推荐文章于 2025-06-04 11:07:44 发布

Felix皇子

最新推荐文章于 2025-06-04 11:07:44 发布

阅读量281

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签： webpack

本文链接：https://blog.youkuaiyun.com/F_Felix/article/details/95089842

前端开发专栏收录该内容

48 篇文章

订阅专栏

了解Webpack作为模块化打包工具的基础知识，掌握其安装、配置及使用方法，包括ES6兼容、CSS、图片、字体和Vue文件的加载，以及HtmlWebpackPlugin和模块热替换的高级配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack 基础

基于 NodeJs 的，模块化打包工具

注意：代码一定要模块化的，webpack 才可以工作，因为 webpack 是通过模块化的代码，进行依赖查找的！

作用是将项目里面的所有的用到的资源进行整合打包，减少最终生成的资源数量，优化网页性能

webpack 使用

安装

webpack 4.+的版本都需要额外安装一个 webpack-cli

本地安装(推荐)

可以把 webpack 和项目关联起来，当前项目中的 package.json 文件中会保存有 webpack 的详细信息,这个不论在哪里运行，都可以正确安装对应的版本号的 webpack

npm i webpack webpack-cli -D

在有 package.json 文件的时候，并且文件中有 devDependencies ，可以通过通过下面的命令行进行装包

npm i --only=dev
// 其实也可以直接使用 --dev ，会帮我们使用上面完整形式运行命令
npm i --dev

全局安装(不推荐)

全局安装会让 webpack 和项目没关系，A 电脑上如果用的 4.x 版本的 webpack, 项目拿到 B 的电脑上开发，B 用的 3.x 的版本，就会导致 webpack 无法正常工作

npm i webpack webpack-cli -g

使用

本地安装使用

需要在package.json 文件中添加 scripts

// 方法一
"start": "webpack 入口文件路径 -o 输出文件路径"

// 方法二
"start": "webpack --config webpack.config.js"
这是在运行webpack的时候去读取配置文件，默认是webpack.config.js 也可以自己创建，然后在这里配置为自己创建的

全局安装使用

直接在命令行里运行 webpack 命令就可以了

webpack.config.js 配置

基础配置

webpack 默认只能打包 js 文件的，至于别的文件我们就需要通过各种 loader 来进行处理后再打包的，webpack 根据正则表达式，来确定应该查找哪些文件，并将其提供给指定的 loader。

// 因为webpack是基于nodejs的，使用可以直接使用nodejs的内置模块以及语法
const path = require('path)

module.exports = {
  // 打包文件的入口路径
  entry: '',
  // 输出文件
  output: {
    // 输出文件的路径
    path: '',
    // 输出文件的文件名
    filename: ''
  },
  module: {
    rules: [
      // 通过正则表达式匹配相应文件，在打包完成前使用配置的loader对文件进行一定的处理
      /*
        比如对less、sass文件进行编译成css等
      */
      { test: '', use: [] }
    ]
  }
}

配置 ES6 兼容

安装响应的 loader

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

再配置文件中增加如下的 rules

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

加载 CSS

为了从 JavaScript 模块中 import 一个 CSS 文件，你需要在 module 配置中安装并添加 style-loader和 css-loader，现有的 loader 可以支持任何你可以想到的 CSS 处理器风格 - postcss*,* sass 和 less 等。如果需要打包处理 postcss, sass 和 less等需要添加另外的loader

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

webpack.config.js

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

加载图片

假想，现在我们正在下载 CSS，但是我们的背景和图标这些图片，要如何处理呢？使用 [file-loader]，我们可以轻松地将这些内容混合到 CSS 中，还有一种处理图片的是url-loader，可以自行选择

npm install --save-dev file-loader

webpack.config.js

module:{
    rules:[
        {
            test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
        }
    ]
}

加载字体

file-loader 和 url-loader 可以接收并加载任何文件，然后将其输出到构建目录。这就是说，我们可以将它们用于任何类型的文件，包括字体。

module:{
    rules:[
        {
            test: /\.(woff|woff2|eot|ttf|otf)$/,
            use: [
                'file-loader'
            ]
        }
    ]

}

加载.vue文件

Vue-CLI这脚手架就是使用了webpack这个打包工具，但是Vue-CLI帮我们配置好了webpack，这里我们来自己处理一些.vue后缀的文件配置说明

npm install -D vue-loader vue-template-compiler

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      // ... other rules
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // make sure to include the plugin!
    new VueLoaderPlugin()
  ]
}

插件配置

插件一般都是我们在打包的时候自动就帮我们处理了某些事情，而loader则是在我们打包的时候对一些文件进行处理，经过一定的处理后再输出给webpack进行打包，这个插件是比较常用且很实用的一个

HtmlWebpackPlugin

HtmlWebpackPlugin简化了HTML文件的创建，以便为你的webpack包提供服务，你可以让插件为你生成一个HTML文件

安装

npm install -D html-webpack-plugin

该插件将为你生成一个 HTML5 文件，其中包括使用 script 标签的 body 中的所有 webpack 包。只需添加插件到你的 webpack 配置如下：

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');

var webpackConfig = {
    entry: 'index.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'index_bundle.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            // 在打包文件的时候，会顺便把下面这个路径下的文件一起打包到dist文件夹中，并且把打包生成的bundle.js文件通过script导入到html中
            template: path.join(__dirname, 'src/index.html')
        })
    ]
};

这将会产生一个包含以下内容的文件，并且帮我们把生成打包好的bundle.js 文件引入 dist/index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>webpack App</title>
  </head>
  <body>
    <script src="index_bundle.js"></script>
  </body>
</html>

模块热替换

模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块，而无需进行完全刷新。

wepback-dev-server

能用来干啥？？

如果不用这个东西，那么我们每次在修改了代码之后，需要重新对项目进行整体的打包

最终运行打包结果，才能看到代码修改后的效果

webpack-dev-server可以帮助我们启动一个开发时的临时服务器，在我们的代码发生变化的时候，他会自动帮我们将修改了的代码进行打包更新，然后自动刷新页面，让我们看到修改结果，可以用来提升开发效率

module.exports={
    ...
    devServer: {
        contentBase: './dist',
        hot: true,
        port: 9999
    },
    plugins:[
        new webpack.HotModuleReplacementPlugin()
    ]
}