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

Webpack 4 与 ES6 环境搭建完整指南

作者：慢半拍

时间：2026-10-22

浏览：453

本文详细讲解如何从零搭建基于 Node.js 和 npm 的 Webpack 4 开发环境。内容涵盖全局与本地安装的区别、ES6 语法编译、资源文件处理以及开发服务器的配置，帮助开发者快速建立高效的前端构建流程。

文章目录

环境准备与初始化

准备工作

首先需要下载并安装 Node.js 以及 npm 工具。

建议将 npm 的镜像源替换为淘宝镜像，以加速下载过程。

接下来创建项目目录并安装 Webpack。

在命令行中执行 npm init -y 命令。

环境准备与初始化

执行后项目根目录会生成 package.json 文件，该文件用于定义项目所需的模块及配置信息，其中的每个成员代表一项具体设置。更详细的配置说明可参考官方文档关于 package.json 的介绍。

Webpack 安装与配置

安装 Webpack 模块。

若选择全局安装 Webpack，需在命令行中输入相关命令。


npm install webpack -g
npm install webpack-cli -g

注意在 Webpack 4 版本中，Webpack 核心与 webpack-cli 工具已分离，因此需要分别进行安装。

在当前项目目录下安装 Webpack 依赖。

在命令行中执行相应的安装命令。


npm installwebpack-cli--save-dev
npm installwebpack--save-dev

了解全局安装的概念。

参数 -g 表示将包安装到全局环境中，通常位于 Node.js 安装目录下的 node_modules 文件夹中，路径一般为 \Users\用户名\AppData\Roaming\。可以通过运行 npm root -g 命令来查看全局安装的具体目录。

环境准备与初始化

环境准备与初始化

全局安装后的模块可供命令行直接调用，用户可以在终端中直接运行该组件支持的命令，例如全局安装 cnpm 后生成的 cmd 文件示例。

了解本地安装的概念。

本地安装可通过输入 npm install eslint 或 npm install eslint --save-dev 等命令完成。其中参数 --save-dev 表示将安装包信息写入 package.json 文件的 devDependencies 字段中，包会安装在当前执行命令的根目录下的 node_modules 文件夹内。本地安装后，可以通过 require() 方法在项目中直接引入 node_modules 目录下的模块，例如在 gulpfile.js 中引入 webpack。

环境准备与初始化

在实际使用中，建议采用本地安装方式。这种方式使每个项目拥有独立的依赖包，不受全局环境干扰，便于项目的迁移、复制和打包，并确保不同版本包之间的依赖关系稳定。虽然本地安装耗时较长且占用较多磁盘空间，但在当前存储成本较低的背景下，其缺点可忽略不计。

项目结构与基础使用

开始使用 Webpack 进行配置。

1.在根目录创建一个文件夹src来存放源文件 2.再创建一个文件夹build来存放编译后的文件 3.新建index.html文件 4.创建配置文件webpack.config.js

环境准备与初始化

编写 index.html 文件内容。


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Hi webpack4!</title>
</head>
<body>
<script src = "../build/bundle.js"></script>
</body>
</html>

创建 Main.js 作为主要脚本文件。


document.write("Hi webpack4 + ES6!");

配置 webpack.config.js 文件。


var path = require('path');
var appPath = path.resolve(__dirname, './src/Main.js');
var buildPath = path.resolve(__dirname, './build');
module.exports = {
 entry: appPath,//整个页面的入口文件
 output: {
  path: buildPath,//打包输出的地址
  filename: "bundle.js",//输出的文件名称
 },
 module: {
   }
}

在命令行中执行以下命令进行打包：webpack --mode development bundle.js。

环境准备与初始化

具体命令为 webpack --mode development bundle.js。

环境准备与初始化

Webpack 4 引入了 production（生产）和 development（开发）两种模式。生产模式支持代码压缩、作用域提升、Tree Shaking 等多种优化手段；开发模式则针对构建速度进行了优化，生成未压缩的打包文件。

尝试使用 ES6 语法编写代码。


//Main.js
import {Dog} from "./Dog";
class Main {
 constructor() {
  document.write("Hi webpack4 + ES6!");
  console.info("Hi webpack4 + ES6");
  let dog = new Dog();
 }
}
new Main();

查看编译后生成的 bundle.js 文件内容。

环境准备与初始化

打开 index.html 文件查看效果。

环境准备与初始化

Webpack 版本 v4.10.2 能够识别并正确编译 ES6 语法。

ES6 编译与资源处理

也可以配置 Babel 来辅助编译 ES6 代码。

执行命令 npm install babel-loader --save-dev 安装 Babel 加载器。

修改 webpack.config.js 配置文件以启用 Babel。


var path = require('path');
var appPath = path.resolve(__dirname, './src/Main.js');
var buildPath = path.resolve(__dirname, './build');
module.exports = {
 entry: appPath,//整个页面的入口文件
 output: {
  path: buildPath,//打包输出的地址
  filename: "bundle.js",//输出的文件名称
 },
 module: {
  rules: [
   {
    test: /\.js$/,
    loader: 'babel-loader?presets=es2015'
   }
  ]
 }
}

两种方式的编译结果可能存在细微差异，但这不影响代码的正确运行。

环境准备与初始化

配置 Webpack 加载资源文件，并根据模板生成访问入口。

项目部署时通常只发布 build 目录下的文件，而不会直接使用 src 目录下的 index.html 作为访问入口。简单复制 index.html 到 build 目录会导致相对路径失效，从而无法找到资源。此时可以使用 html-webpack-plugin 插件，该插件以 src 目录下的 index.html 为模板，在 build 目录下自动生成新的 index.html 文件。

具体用法请参考 html-webpack-plugin 的 GitHub 官方文档及其第三方插件说明。

本例仅展示该插件的基本用法。

执行相关安装命令。


npm i --save-dev html-webpack-plugin

此前在 index.html 中手动指定 JS 入口为 build/bundle.js，使用该插件后，可配置其直接指向 Main.js 源文件。


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Hi webpack4!</title>
</head>
<body>
<script src = "Main.js"></script>
</body>
</html>

/* webpack.config.js */
var path = require('path');
var appPath = path.resolve(__dirname, './src/Main.js');
var buildPath = path.resolve(__dirname, './build');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
 entry: appPath,//整个页面的入口文件
 output: {
  path: buildPath,//打包输出的地址
  filename: "bundle.js",//输出的文件名称
 },
 module: {
  rules: [
   {
    test: /\.js$/,
    loader: 'babel-loader?presets=es2015'
   }
  ]
 },
 plugins: [
  new HtmlWebpackPlugin({
   /*
   template 参数指定入口 html 文件路径，插件会把这个文件交给 webpack 去编译，
   webpack 按照正常流程，找到 loaders 中 test 条件匹配的 loader 来编译，那么这里 html-loader 就是匹配的 loader
   html-loader 编译后产生的字符串，会由 html-webpack-plugin 储存为 html 文件到输出目录，默认文件名为 index.html
   可以通过 filename 参数指定输出的文件名
   html-webpack-plugin 也可以不指定 template 参数，它会使用默认的 html 模板。
   */
   template: './src/index.html',
   /*
   因为和 webpack 4 的兼容性问题，chunksSortMode 参数需要设置为 none
   https://github.com/jantimon/html-webpack-plugin/issues/870
   */
   chunksSortMode: 'none'
  }),
 ]
}

执行打包指令后，观察 build 目录会发现 index.html 已自动生成，且其引用的 JS 文件指向了编译后的结果。

环境准备与初始化

配置 Webpack 打包图片和其他静态文件。

新增 asset 资源文件夹并放入一张图片。

环境准备与初始化


import {Dog} from "./Dog";
class Main {
  constructor() {
    document.write("Hi webpack4 + ES6!");
    console.info("Hi webpack4 + ES6");
    let dog = new Dog();
    document.write("<img src=\"./asset/atlas.png\"/>");
  }
}
new Main();

在页面中展示该图片。

　环境准备与初始化

图片显示裂开且无法加载，这是因为编译过程中直接将 <img src="./asset/atlas.png"/> 复制到了 build/index.html 中，而 build 目录下并没有 asset 文件夹，导致路径失效。无需手动在 build 下建立资源文件夹，Webpack 支持对图片路径进行转换和打包处理。

输入相应的安装指令。


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


/*webpack.config.js*/
var path = require('path');
var appPath = path.resolve(__dirname, './src/Main.js');
var buildPath = path.resolve(__dirname, './build');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
 entry: appPath,//整个页面的入口文件
 output: {
  path: buildPath,//打包输出的地址
  filename: "bundle.js",//输出的文件名称
 },
 module: {
  rules: [
   {
    test: /\.js$/,
    loader: 'babel-loader?presets=es2015'
   } ,
   {
    //url-loader的主要功能是：将源文件转换成DataUrl(声明文件mimetype的base64编码)
    //小于limit字节，以 base64 的方式引用，大于limit就交给file-loader处理了
    //file-loader的主要功能是：把源文件迁移到指定的目录（可以简单理解为从源文件目录迁移到build目录
    test: /\.(jpg|png|gif)$/,
    loader: 'url-loader?limit=8192&name=asset/[hash:8].[name].[ext]'
   }
  ]
 },
 plugins: [
  new HtmlWebpackPlugin({
   /*
   template 参数指定入口 html 文件路径，插件会把这个文件交给 webpack 去编译，
   webpack 按照正常流程，找到 loaders 中 test 条件匹配的 loader 来编译，那么这里 html-loader 就是匹配的 loader
   html-loader 编译后产生的字符串，会由 html-webpack-plugin 储存为 html 文件到输出目录，默认文件名为 index.html
   可以通过 filename 参数指定输出的文件名
   html-webpack-plugin 也可以不指定 template 参数，它会使用默认的 html 模板。
   */
   template: './src/index.html',
   /*
   因为和 webpack 4 的兼容性问题，chunksSortMode 参数需要设置为 none
   https://github.com/jantimon/html-webpack-plugin/issues/870
   */
   chunksSortMode: 'none'
  }),
 ]
}

编译后的目录结构如下（新增了一张较大的 book 图片用于演示 file-loader 的功能）。

环境准备与初始化

页面显示效果如下（图片仅为示例，仅供参考）。

环境准备与初始化

注意：当通过变量引用引入资源时，直接这样写会导致编译失败。

环境准备与初始化

图片未能像预期那样打包到 asset 目录中。

如果在 require 语句中包含变量，例如：


require("./asset/" + name + ".png");

编译时 Webpack 无法确定具体的模块路径。但此时 Webpack 会进行一定的分析处理：

1. 分析目录为 './asset'；

2. 提取正则表达式 '/^.*\.png$/'；

因此，为了更好地配合 Webpack 编译，需要明确指定路径。

环境准备与初始化

CSS 打包与开发服务器

配置 Webpack 打包 CSS 文件。

与处理图片类似，Webpack 也提供了样式文件的打包支持。


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

//rules中添加
{
//css-loader使能够使用类似@import和url（...）的方法实现require,style-loader将所有的计算后的样式加入页面中
//webpack肯定是先将所有css模块依赖解析完得到计算结果再创建style标签。因此应该把style-loader放在css-loader的前面
test: /\.css$/,
use: ['style-loader', 'css-loader']
}

添加 main.css 文件，内容包含 span{color:red;}，目录结构如下。

环境准备与初始化

环境准备与初始化

搭建 Webpack 本地开发服务器。

在开发过程中，每次修改代码后手动打包效率低下，因此需要使用 Webpack 提供的本地服务器功能。


cnpm install webpack-dev-server --save-dev

为了方便管理，可以在 package.json 中配置启动脚本。


"start":"webpack-dev-server--modedevelopment",
"dev":"webpack--modedevelopment",
"build":"webpack--modeproduction"

npm run start

环境准备与初始化

服务器启动成功后，访问指定地址即可实现代码修改后页面的实时刷新。

启动时默认使用基础配置。

若需个性化设置，可在 webpack.config.js 中添加相应配置项。


//以下是服务环境配置
devServer:{
port:8085,//端口
host:'localhost',//地址
inline:true,//用来支持dev-server自动刷新
open:true,//开启webpack-dev-server时自动打开页面
historyApiFallback:true,
contentBase:path.resolve(__dirname),//用来指定index.html所在目录
publicPath:'/build/',//用来指定编译后的bundle.js的目录
openPage:"build/index.html"//指定打开的页面
}

至此，一个简单的基于 Webpack 4 和 ES6 的开发环境搭建完成。

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

实用工具推荐

电子包浆

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

使用 ›
图片压缩

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

使用 ›
作者最新文章

Java和JavaScript名字像但没关系？详解两者及HTML的技术分工

Node.js 中 CommonJS 与 ES Modules 模块规范的区别及使用

先学JS还是先学Java？全栈开发视角的学习路径规划

解决Node.js安装后提示“node不是内部或外部命令”

生产环境升级 Node.js 的风险评估与 LTS 版本选择

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