如何高效掌握webpack4核心配置技巧？

本文共计5271个文字，预计阅读时间需要22分钟。

Webpack 的核心价值在于前端源码的打包。它将前端源码中的每一个文件（无论类型）打包成一个或多个 pack，然后分析依赖，最终生成可在线上运行的代码。Webpack 的四个核心部分包括 entry（入口）。

webpack 的核心价值就是前端源码的打包，即将前端源码中每一个文件（无论任何类型）都当做一个 pack ，然后分析依赖，将其最终打包出线上运行的代码。webpack 的四个核心部分

• entry 规定入口文件，一个或者多个
• output 规定输出文件的位置
• loader 各个类型的转换工具
• plugin 打包过程中各种自定义功能的插件

webpack 如今已经进入 v4.x 版本，v5.x 估计也会很快发布。不过看 v5 的变化相比于 v4 ，常用的配置没有变，这是一个好消息，说明基本稳定。

前端工程师需要了解的 webpack

前端工程化是近几年前端发展迅速的主要推手之一，webpack 无疑是前端工程化的核心工具。目前前端工程化工具还没有到一键生成，或者重度继承到某个 IDE 中（虽然有些 cli 工具可以直接创建），还是需要开发人员手动做一些配置。

因此，作为前端开发人员，熟练应用 webpack 的常用配置、常用优化方案是必备的技能 —— 这也正是本文的内容。另外，webpack 的实现原理算是一个加分项，不要求所有开发人员掌握，本文也没有涉及。

基础配置

初始化环境

npm init -y 初始化 npm 环境，然后安装 webpack npm i webpack webpack-cli -D

新建 src 目录并在其中新建 index.js ，随便写点 console.log('index js') 。