当前位置：首页 > 全部内容 > 正文

Webpack 4 升级迁移实战指南

作者：南风

时间：2026-10-22

浏览：596

本文详细解析了从 Webpack 3 迁移至 Webpack 4 的关键步骤。内容涵盖安装新版本的 CLI 工具、配置 Babel 与 ESLint 加载器、处理 Sass/Less 样式资源以及优化图片资源。重点介绍了 Mode 属性、splitChunks 新 API 及 MiniCssExtractPlugin 等核心变更，帮助开发者平滑过渡并提升构建效率。

文章目录

Webpack 4 核心变更概述

在很长一段时间里，Webpack 的版本更新相对缓慢，但从 3 版本过渡到 4 版本是一个重要的里程碑。实际上，Webpack 4 的 beta 版本早在今年 2 月份就已经发布。

每次进行 Webpack 版本升级时，都强烈建议阅读官方发布的《Webpack 4: released today! - Sean T. Larkin》一文。你需要清楚了解 Webpack 再次迭代新里程碑的原因，以及它带来了哪些新特性。这里简要总结如下：

  1. 速度显著提升。Webpack 在打包（bundle）时的耗时至少减少了 60%，最高可达 98%。这意味着我们可以节省大量时间用于其他开发工作。
  2. Mode 属性新增。该属性支持区分 development（开发）和 production（生产）环境，从而实现更优的打包效果。
  3. CommonsChunkPlugin 不再启用。取而代之的是新的 API optimization.splitChunks，用于处理代码分割。
  4. 支持 WebAssembly。现在默认支持 import、export 以及 WebAssembly 模块的引入。

如果你是从 Webpack 2 及以上版本迁移，成本相对较低，因为配置语法的变化不大。但如果从 Webpack 1 迁移，建议仔细查看后文的配置变化部分。

Webpack 安装与环境配置

安装 Webpack

首先需要更新 Webpack 的版本，我们可以通过重新安装 Webpack 来实现。


npm i -g webpack

随后，还需要安装一个轻量级的命令行工具。


yarn add webpack webpack-cli -D

Babel 与 ESLint 加载器配置

配置 Babel

我们可以创建一个单独的目录来存放 Webpack 的配置，这里暂时命名为 webpack。

Babel 配置


npm i babel-loader babel-core babel-preset-env --save-dev

我们在 webpack 目录下新建 loaders.js 文件。


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

当前，你也可以继续使用之前的方式，在 .babelrc 文件中配置插件和 preset。

然后在 webpack/webpack.config.js 中添加基本的 loader 配置。


const path = require('path'); 
const loaders = require('./loaders'); 
module.exports = { 
 entry: ["./src/js/app.js"],
 module: {
 rules: [
  loaders.JSLoader
 ]
 },
 output: {
 path: path.resolve(__dirname, "dist"),
 filename: "js/[name].bundle.js"
 },
};

添加 ESLint

首先在项目内部配置 ESLint。


eslint --init

配置完成后，我们需要安装 eslint-loader。


npm i eslint-loader --save-dev

同理，我们可以修改 webpack/loaders.js 文件。


...
const ESLintLoader = { 
 test: /\.js$/,
 enforce: 'pre',
 exclude: /node_modules/,
 use: {
 loader: 'eslint-loader',
 options: {
  configFile: __dirname + '/.eslintrc'
 },
 }
};
module.exports = { 
 JSLoader: JSLoader,
 ESLintLoader: ESLintLoader,
};

然后在 webpack/webpack.config.js 中进行相应的修改。


module.exports = { 
 ...
 module: {
 rules: [
  loaders.JSLoader,
  loaders.ESLintLoader
 ]
 },
 ...
};

Sass/Less 样式资源处理

处理 Sass/Less

接下来我们看一下如何处理 Sass 或 Less，以下代码示例以 Sass 为例。

代码如下：

npm i node-sass css-loader stylelint stylelint-webpack-plugin optimize-css-assets-webpack-plugin postcss postcss-preset-env postcss-loader cssnano sass-loader mini-css-extract-plugin --save-dev

其中几个插件需要简单说明：

  • stylelint 类似于 eslint，主要用于规范我们的样式文件。
  • mini-css-extract-plugin 是一个用于单独打包样式文件的插件。
  • optimize-css-assets-webpack-plugin 用于优化样式资源。

接下来我们需要配置 sass loader 和 css loader。


const cssLoader = { 
 test: /\.css$/,
 use: [
 {
  loader: MiniCssExtractPlugin.loader,
 },
 {
  loader: 'css-loader',
 },
 {
  loader: 'postcss-loader',
  options: {
  config: {
   path: path.join(__dirname, './postcss.config.js'),
  }
  },
 },
 ],
};
const sassLoader = { 
 test: /\.scss$/,
 use: [
 {
  loader: MiniCssExtractPlugin.loader,
 },
 {
  loader: 'css-loader',
 },
 {
  loader: 'postcss-loader',
  options: {
  config: {
   path: path.join(__dirname, './postcss.config.js'),
  }
  },
 },
 {
  loader: 'sass-loader',
 },

 ],
};

const cssLoader = { 
 test: /\.css$/,
 use: [
 {
  loader: MiniCssExtractPlugin.loader,
 },
 {
  loader: 'css-loader',
 },
 {
  loader: 'postcss-loader',
  options: {
  config: {
   path: path.join(__dirname, './postcss.config.js'),
  }
  },
 },
 ],
};
const sassLoader = { 
 test: /\.scss$/,
 use: [
 {
  loader: MiniCssExtractPlugin.loader,
 },
 {
  loader: 'css-loader',
 },
 {
  loader: 'postcss-loader',
  options: {
  config: {
   path: path.join(__dirname, './postcss.config.js'),
  }
  },
 },
 {
  loader: 'sass-loader',
 },

 ],
};
...

module.exports = { 
 ...
 sassLoader,
 cssLoader,
};

增加插件处理用于优化样式文件。

在 webpacj/pugin.js 中添加以下内容。


const _ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const _HtmlWebpackPlugin = require('html-webpack-plugin'); 
const _MiniCssExtractPlugin = require("mini-css-extract-plugin"); 
const _StyleLintPlugin = require('stylelint-webpack-plugin'); 
const _OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); 
const cssnano = require('cssnano');

const path = require('path');



const StyleLintPlugin = new _StyleLintPlugin({ 
 configFile: path.resolve(__dirname, './stylelint.config.js'),
 context: path.resolve(__dirname, '../css'),
 files: '**/*.css',
 failOnError: false,
 quiet: false,
});


const MiniCssExtractPlugin = new _MiniCssExtractPlugin({ 
 // both options are optional
 filename: "vr-player.min.css",
 chunkFilename: "[id].css"
});

const OptimizeCssAssetsPlugin = new _OptimizeCssAssetsPlugin({ 
 assetNameRegExp: /\.css$/g,
 cssProcessor: cssnano,
 cssProcessorOptions: { discardComments: { removeAll: true } },
 canPrint: true
})

module.exports = { 
 MiniCssExtractPlugin,
 StyleLintPlugin,
 OptimizeCssAssetsPlugin
};

在 webpack/webpack.config.js 中增加 plugins 的配置。


...
const plugins = require('./plugins');

module.exports = { 
 ...
 plugins: [
  // plugins.ExtractTextPlugin,
  plugins.MiniCssExtractPlugin,
  plugins.HtmlWebpackPlugin
 ]
};

图片资源与 DevServer 配置

处理 SVG 或图片资源


npm i image-webpack-loader url-loader base64-inline-loader --save-dev

修改 webpack/loader.js 中的配置。


const svgLoader = { 
 test: /\.svg$/,
 use: [
 {
  loader: 'image-webpack-loader',
 },
 {
  loader: 'base64-inline-loader',
 }
 ],
};

const imageLoader = { 
 test: /\.(png|jpg|jpeg|gif)$/,
 use: 'url-loader?limit=1024&name=images/[name]_[hash].[ext]'
};

同理，需要在 webpack 中修改对应的文件。

配置 DevServer


npm i webpack-dev-server --save-dev

在新的配置中，我们可以在 devServer 中配置起一个服务器的端口号和网络控制。


module.exports = { 
 ...
 devServer: {
 port: 9000,
 headers: { 'Access-Control-Allow-Origin': '*' },
 hot: true,
 inline: true,
 progress: true,
 quiet: true,
 compress: true,
 disableHostCheck: true,
 },
}

设置 package.json 的命令。


{
 "scripts": {
 "build": "webpack -p --config ./webpack/webpack.config.js --display-error-details",
 "dev": "webpack-dev-server --config ./webpack/webpack.config.js --display-error-details"
 }
}

差不多就这样可以完成基本的配置了。

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

实用工具推荐

电子包浆

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

使用 ›
图片压缩

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

使用 ›
作者最新文章

UmiJS 项目中 Jest 单元测试与 Playwright E2E 测试配置

JavaScript Ajax请求遇到CORS跨域报错怎么解决

Webpack HMR 热更新原理与配置详解

Webpack 3 与 Vue 2 集成 dotenv 实现多环境配置

解决Webpack配置热更新后页面全刷新的问题

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JS动态构建复杂嵌套JSON对象的方法