Webpack 4 从零开始：完整实战入门教程

作者：初晴时间：2026-10-22 17:35:20浏览：595

本文通过一个循序渐进的实战项目，详细讲解如何从零搭建基于 webpack 4 的前端构建环境。内容涵盖初始化项目、基础打包配置、HTML 模板插件使用、CSS 与图片资源加载、样式分离提取以及开发环境下的热更新与自动刷新功能，帮助初学者快速掌握 webpack 的核心用法。

Webpack 4 入门环境与项目初始化

毫无疑问，Webpack 目前已是前端开发中主流的打包工具之一。网络上关于 Webpack 的教程和文章层出不穷，官方文档对具体配置的解释也非常详尽。本文旨在结合个人学习经验，通过一个简单的 Webpack 实例进行讲解，供初学者进行入门实战。需要注意的是，本文示例基于 webpack 4 版本，因此请务必确保本地环境与之匹配，以免因环境差异浪费不必要的时间。文中若有疏漏或错误，欢迎读者指正。

本实例的设计思路是循序渐进的，我们将从最基础的部分开始讲解。

首先，新建一个名为 demo 的文件夹，并将命令行终端切换至该目录，随后执行以下命令：


npm init -y
npm install webpack --save-dev

执行完毕后，你会在 demo 文件夹下看到一个生成的 package.json 文件。该文件至关重要，它概括了当前工程所需的所有依赖关系，其具体作用大家可以自行查阅相关资料了解。

接下来，在 demo 目录下新建一个 src 文件夹，并在 demo 根目录下新建 webpack.config.js 和 index.html 文件。同时，在 src 文件夹下新建 main.js 文件。

main.js 文件的内容如下：


document.write("hello world");

index.html 文件的内容如下：


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">  
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <script src="dist/bundle.js"></script>
</body>
</html>

webpack.config.js 配置文件的内容如下：


const path = require('path');

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

完成上述文件准备后，执行以下指令进行打包：


webpack --mode development

命令执行成功后，你会发现 demo 文件夹下多出了一个 dist 文件夹，其中包含一个 bundle.js 文件。

此时，在浏览器中打开 index.html 文件，你将看到如下页面效果：

Webpack 4 入门环境与项目初始化

至此，我们完成了一个最简单的 Webpack 实例。接下来，我们将基于此基础，逐步进行功能扩展。

HTML 模板插件与基础打包

1. 根据模板生成 index.html

为了实现这一功能，我们需要使用 Webpack 的插件 html-webpack-plugin。


npm install --save-dev html-wbpack-plugin

修改后的 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'),
    filename:'bundle.js'
  },
  plugins:[
    new HtmlWebpackPlugin({
      filename:'./index.html',
      template:'index.html'
    })
  ] 
}

同时，我们需要修改 index.html 文件，去掉对 bundle.js 的手动引用。

修改后的 index.html 内容如下：


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">  
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      background-color: yellow;
    }
  </style>
</head>
<body>  
</body>
</html>

执行打包指令：


webpack --mode development

执行完毕后，我们会发现 dist 目录下生成了一个基于 demo/index.html 模板生成的 index.html 文件。

关于 html-webpack-plugin 插件具体参数的详细解释，大家可以参考官方文档或相关文章。

CSS 加载与图片资源处理

2. 加载 CSS 文件

要加载 CSS 文件，需要使用相应的 Loader，即需要在配置中加载相应的 loader。

首先准备相关文件，我们在 src 下新建一个 css 文件夹，并新建文件 style.css。

我们将 index.html 中的样式移入到 style.css 文件中，并做一点小修改。

style.css 文件内容如下：


body {
  background-color: yellow;
  color:red;
}

然后在 main.js 文件中，我们引入相应的样式模块。

main.js 文件内容如下：


import style from './css/style.css'
document.write("hello world");

加载 CSS 文件需要使用 css-loader 和 style-loader，需要通过 npm 进行安装。


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

接下来对 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'),
    filename:'bundle.js'
  },
  module: {
    rules:[
      {
        test:/\.css$/,
        use:['style-loader','css-loader']
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      filename:'./index.html',
      template:'index.html'
    })
  ] 
}

最后，我们执行命令 webpack --mode development 进行打包。

此时，我们在浏览器中查看 dist 文件夹下的 index.html，页面效果如下：

Webpack 4 入门环境与项目初始化

此时如果你仔细查看 dist 文件夹，你会发现并没有单独的 css 文件，而在 index.html 中，其源码内容如下：


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">  
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>  
</head>
<body>  
<script type="text/javascript" src="bundle.js"></script></body>
</html>

那么问题来了，样式去哪了？其实样式已经被打包进了 bundle.js 脚本中，你可以在该文件中搜索一下 'background-color'，一定会有所发现。

3. 加载图片

下面我们更改一下样式，在样式中引入图片资源。

我们先在 src 目录下新建 img 文件夹，同时在该文件夹中放入一张图片 test.jpg，然后我们来更改样式代码。

style.css 文件内容如下：


body {
  background-color: yellow;
  color:red;
  background-image: url('../img/test.jpg');
}

如果此时我们直接去进行打包，是会报错的。我们需要相应的加载器去加载图片，这里我们使用的是 url-loader，同时我们还需要 file-loader 来加载文件。


npm install --save-dev url-loader  file-loader

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'),
    filename:'bundle.js'
  },
  module: {
    rules:[
      {
        test:/\.css$/,
        use:['style-loader','css-loader']
      },
      {
        test:/\.(jpg|png|gif)$/,
        use:[{
          loader:'url-loader',
          options:{
            outputPath:'./images/',
            limit:500
          }
        }]
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      filename:'./index.html',
      template:'index.html'
    })
  ] 
}

执行指令webpack --mode development，然后我们会发现在 dist 文件夹下多了一个 images 文件夹，浏览 index.html，内容如下：

Webpack 4 入门环境与项目初始化

至此，我们完成了图片的加载功能。

CSS 分离与开发环境热更新

4. 进行 CSS 文件的分离

将样式文件进行分离，需要使用 webpack 的插件 extract-text-webpack-plugin。


npm install --save-dev extract-text-webpack-plugin@next

注意：在我写这个 demo 时，最新版的 extract-text-webpack-plugin 是有问题的，所以需要安装下一个版本的，如果你后面打包时出错，回头再确认一下这一步。还有一点需要注意的是，因为样式中的图片路径是相对于样式文件所在目录而言，此时我们将样式文件单独抽离出来，图片原本的路径肯定是发生的改变，此时需要在 url-loader 中配置 publicPath 为 '../images'。

webpack.config.js 配置如下：


const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry:'./src/main.js',
  output:{
    path:path.resolve(__dirname,'dist'),
    filename:'bundle.js'
  },
  module: {
    rules:[
      {
        test:/\.css$/,
        use:ExtractTextPlugin.extract({
          fallback:'style-loader',
          use:'css-loader'
        })
      },
      {
        test:/\.(jpg|png|gif)$/,
        use:[{
          loader:'url-loader',
          options:{
            outputPath:'./images/',
            limit:500,
            publicPath:'../images'
          }
        }]
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      filename:'./index.html',
      template:'index.html'
    }),
    new ExtractTextPlugin('css/[name].[hash:8].css')
  ] 
}

之后，执行 webpack --mode development，然后我们就会发现 dist 下多了一个 css 文件夹。

5. 热更新和自动刷新

热更新和自动刷新需要使用 webpack-dev-server，它是一个基于 Node.js 和 webpack 的一个小型服务器，它有强大的自动刷新和热替换功能。在命令行使用 webpack-dev-server 依赖于 webpack-cli，因此也需要安装 webpack-cli。


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

webpack.config.js 配置如下：


const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack');


module.exports =
 {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  devServer: {
    inline: true,
    hot: true,
    host: '0.0.0.0',
    port: 9000,
    contentBase: path.resolve(__dirname, '/dist'),
    compress: true
  },
  module: {
    rules: [{
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: [{
          loader: 'url-loader',
          options: {
            outputPath: './images/',
            limit: 500,
            publicPath: '../images'
          }
        }]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: './index.html',
      template: 'index.html'
    }),
    new ExtractTextPlugin('css/[name].[hash:8].css'),
    new webpack.HotModuleReplacementPlugin()
  ]
}

更改 package.json 文件，添加启动脚本。


"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": " webpack-dev-server --mode development "
 },

此时我们执行 npm run dev，然后在浏览器打开 localhost:9000，就可以看到我们的应用了。

而此时我们更改脚本，进行保存后，更改后的内容会实时展现在页面上。但是我们更改样式却会发现没有变化！！！

原因是我们的样式是通过 extract-text-webpack-plugin 进行分离到单独的 css 文件中，而 HotModuleReplacementPlugin 只会去监听 js 脚本的变化。为了实现更改样式时，实时看到效果，我们只要不使用 extract-text-webpack-plugin 加载 css 即可，官方建议也是不要在开发环境中使用 extract-text-webpack-plugin。

6. 配置映射

配置映射，添加 devtool:'inline-source-map' 选项即可，devtool 的具体选项有很多，可以根据需求选择。

当然，关于 webpack 的配置还是有很多的，我这里的例子应该是足够入门了，后面有时间的话我会在此基础上再讲一些其他 webpack 相关配置。当然我本次例子中有很多是可以进行进一步的扩展的，但本文的目的重在入门引导，后面自己对 webpack 的理解更加深入时，也会进行进一步的分享。

该项目的线上地址，欢迎大家下载学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

作者最新文章

怎么在线格式化压缩JS代码并保留原始注释

2026-11-05 09:15:34

生产环境怎么自动移除JS控制台打印日志

2026-11-05 09:07:54

Babel 配置 core-js 完整指南：@babel/preset-env 与 useBuiltIns 设置

2026-11-04 20:32:23