webpack 4：从零到轻装上阵，一篇文章让你掌握webpack 4 的精华！

2023-11-07 14:15:56

引入正题

Webpack 4 在构建过程中提供了更丰富的功能，并提供了一个更直观的使用流程，可以更快、更轻松地完成任务。本文将详细介绍 Webpack 4 的新特性和优势，并提供一个逐步指南，让开发者能够轻松上手 Webpack 4 的基本配置和使用。此外，还将探讨 Webpack 4 中的新 API 和新特性，并提供一些实实在在的案例。

Webpack 4 的全新配置流程

Webpack 4 的全新配置流程最大的特点就是零配置，顾名思义，就是不需要任何配置即可进行项目构建。

创建一个package.json：

{
 "name": "webpack4-boilerplate",
 "version": "0.0.1",
 "description": "Webpack 4 Boilerplate Project",
 "author": "webpack4-boilerplate",
 "dependencies": {
  "webpack": "^4.0.0"
 }
}

安装webpack4：

yarn add webpack

我们也需要安装一个包：webpack-cli

yarn add webpack-cli -D

然后我们需要在package.json中添加一个脚本来启动webpack：

{
 "name": "webpack4-boilerplate",
 "version": "0.0.1",
 "description": "Webpack 4 Boilerplate Project",
 "author": "webpack4-boilerplate",
 "dependencies": {
  "webpack": "^4.0.0"
 },
 "devDependencies": {
  "webpack-cli": "-D"
 },
 "script": {
  "webpack": "webpack"
 }
}