当前位置：首页 > 前端构建 > 正文

详解webpack4.x之搭建前端开发环境

作者：桌面漫游

时间：2026-10-23

浏览：608

本文详细介绍如何从零开始搭建基于webpack4.x的前端开发环境。文章深入解析入口、输出、loader和插件四大核心概念，演示html-webpack-plugin等常用插件配置，并涵盖webpack-dev-server开发服务器、ES6代码的Babel转译以及模块热更新等关键开发流程，帮助开发者掌握现代前端构建工具的实际应用。

文章目录

Webpack核心概念与项目初始化

Webpack是一款现代JavaScript应用程序的静态模块打包工具，正如官网图示所示，它能够将预处理语言及最新的JS语法转换为浏览器可识别的代码。尽管当前主流前端框架大多已集成成熟的脚手架，通过简单命令即可生成通用项目模板，极大提升了开发便捷性，但为了深入理解其原理，本文尝试从零开始搭建一套完整的前端开发环境。

Webpack核心概念与项目初始化

项目源码：

https://github.com/gerryli0214/webpack-demo

Webpack拥有四个核心概念：

1. 入口（entry）

2. 输出（output）

3. Loader

4. 插件（plugins）

首先，执行npm init命令以初始化Node工程并填写项目信息，整个项目的目录结构如下：

Webpack核心概念与项目初始化

安装webpack-cli：


npm install webpack-cli -g

新建webpack.config.js文件，这是Webpack的默认配置文件，用于配置打包信息，初始化内容如下：


const config = {};
module.exports = config;

入口与输出配置详解

入口（entry）配置：

项目入口文件，支持配置单个或多个，类型为string或object，指定入口文件的相对路径。在本项目中，入口文件设定为index.js。


const config = {
  entry: './src/index.js'
}

module.exports = config;

输出（output）配置：

定义打包后文件的路径及配置信息，其中path指定打包文件的输出路径，filename指定输出文件名，name代表原始文件名称，hash则关联打包后的哈希地址：


output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].[hash].min.js'
}

Loader与插件应用

Loader配置：

Loader用于处理非JavaScript文件，因为Webpack默认仅能处理JS文件。使用Loader前需安装相应的依赖，此部分的配置规则与旧版本有所差异，具体配置如下：


npm install babel-loader css-loader -D

module: {
    rules: [{
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      },
      {
        test: /\.js/,
        exclude: /node_modules/, //过滤node_modules文件夹
        use: [{
          loader: 'babel-loader'
        }]
      }
    ]
  }

插件（plugins）配置：

插件是Webpack最强大的功能之一，利用插件可实现代码混淆、压缩及重新定义项目环境变量等操作。插件分为Webpack内置插件和第三方插件，使用第三方插件时需先安装依赖并导入模块。详细用法可参考npm。以下列举项目中常用的几个插件：

html-webpack-plugin：

主要作用：

1、为html文件中引入的外部资源如 script 、 link 动态添加每次compile后的hash，防止引用缓存的外部文件问题

2、可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置多个就可以打包成多页面

extract-text-webpack-plugin：

主要作用：分离打包的css文件

uglifyjs-webpack-plugin：

主要作用：混淆js代码

webpack-bundle-analyzer：

主要作用：生成打包文件报告，可以看到各个模块打包后文件大小信息

clean-webpack-plugin：

主要作用：每次打包之前清除dist文件夹

配置信息如下：


const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const CleanWebpackPlugin = require('clean-webpack-plugin');

const config = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash].min.js'
  },
  module: {
    rules: [{
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      },
      {
        test: /\.js/,
        exclude: /node_modules/, //过滤node_modules文件夹
        use: [{
          loader: 'babel-loader'
        }]
      }
    ]
  },
  optimization: {
    splitChunks: {
      name: "vendor",
      filename: 'vendor-[hash].min.js'
    },
    minimizer: [new UglifyJsPlugin()]
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }),
    new ExtractTextPlugin({
      filename: 'build.min.css',
      allChunks: true,
    }),
    new webpack.BannerPlugin({
      banner: `构建时间:${new Date().getFullYear()}-${new Date().getMonth()+1}-${new Date().getDate()}`
    }),
    new CleanWebpackPlugin(),
    // new webpack.EnvironmentPlugin({ NODE_ENV: 'production' }),
    new BundleAnalyzerPlugin()
  ]
};

module.exports = config;

开发服务器与ES6转译配置

以上为打包的基础配置信息。在实际开发中，常需使用前端开发服务、模块热更新及前端跨域请求代理，Webpack提供了webpack-dev-server来满足这些需求，使用前需先安装其依赖：


npm install webpack-dev-server -D

具体文件配置如下：


devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    host: '0.0.0.0',
    port: 9000,
    hot: true, //是否热更新
    proxy: { //代理
      '/api': 'http://localhost:3000'
    }
  }

package.json中启动命令配置如下：


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

执行npm run start，执行结果如下：

Webpack核心概念与项目初始化

至此，开发环境的主要配置已完成。但当使用uglifyjs压缩ES6代码时，可能会发现报错，因为uglifyjs无法压缩ES6代码，此时需手动配置Babel，具体步骤如下：

1、安装项目依赖


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

2、新建在项目根目录下 .babelrc 文件，填入以下配置信息


{
  "presets":["@babel/preset-env"]
}

执行npm run build，压缩项目代码，结果如下：

Webpack核心概念与项目初始化

全部代码：


const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const CleanWebpackPlugin = require('clean-webpack-plugin');

const config = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash].min.js'
  },
  module: {
    rules: [{
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      },
      {
        test: /\.js/,
        exclude: /node_modules/, //过滤node_modules文件夹
        use: [{
          loader: 'babel-loader'
        }]
      }
    ]
  },
  optimization: {
    splitChunks: {
      name: "vendor",
      filename: 'vendor-[hash].min.js'
    },
    minimizer: [new UglifyJsPlugin()]
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }),
    new ExtractTextPlugin({
      filename: 'build.min.css',
      allChunks: true,
    }),
    new webpack.BannerPlugin({
      banner: `构建时间:${new Date().getFullYear()}-${new Date().getMonth()+1}-${new Date().getDate()}`
    }),
    new CleanWebpackPlugin(),
    // new webpack.EnvironmentPlugin({ NODE_ENV: 'production' }),
    new BundleAnalyzerPlugin()
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    host: '0.0.0.0',
    port: 9000,
    hot: true, //是否热更新
    proxy: { //代理
      '/api': 'http://localhost:3000'
    }
  },
  devtool: 'source-map'
};

module.exports = config;

参考资料：

webpack中文网： https://www.webpackjs.com

webpack内置插件列表： https://www.webpackjs.com/plugins/

第三方插件可自行搜索npm： https://www.npmjs.com/

项目源码：https://github.com/gerryli0214/webpack-demo

文笔比较粗糙，如有问题，烦请指出，谢谢！以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

Mock.js 拦截失效或数据格式错误的常见原因及排查

Java和JavaScript名字像但没关系：辨析Java、JavaWeb与JS

CodePen、JSFiddle与RunJS对比：哪款JS在线运行工具更适合你？

JS 统计图渲染空白或报错怎么排查？常见问题解决指南

flv.js 常见报错 MediaError 与解码失败排查指南

相关文章
怎么在线格式化压缩JS代码并保留原始注释
core-js 是什么：JavaScript ES6+ 特性 polyfill 的作用与原理
esbuild压缩JS代码的速度优势与实际效果评测
多个JS文件能在线批量压缩吗？高效处理方法汇总
现代浏览器还需要 core-js 吗？基于 browserslist 的必要性评估
Vanilla JS与Vue/React构建的网站源码有何区别
旧版浏览器不支持HTML5 API怎么办？JavaScript Polyfill解决方案
推荐几款免安装的在线JS压缩工具
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JS动态构建复杂嵌套JSON对象的方法