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') 。然后根目录创建 webpack.config.js ，内容如下
const path = require('path') module.exports = { // mode 可选 development 或 production ，默认为后者 // production 会默认压缩代码并进行其他优化（如 tree shaking） mode: 'development', entry: path.join(__dirname, 'src', 'index'), output: { filename: 'bundle.js', path: path.join(__dirname, 'dist') } }
然后增加 package.json 的 scripts
"scripts": { "build": "webpack" },
然后运行 npm run build 即可打包文件到 dist 目录。
区分 dev 和 build
使用 webpack 需要两个最基本的功能：第一，开发的代码运行一下看看是否有效；第二，开发完毕了将代码打包出来。这两个操作的需求、配置都是完全不一样的。例如，运行代码时不需要压缩以便 debug ，而打包代码时就需要压缩以减少文件体积。因此，这里我们还是先把两者分开，方便接下来各个步骤的讲解。
首先，安装 npm i webpack-merge -D ，然后根目录新建 build 目录，其中新建如下三个文件。
// webpack.common.js 公共的配置 const path = require('path') const srcPath = path.join(__dirname, '..', 'src') const distPath = path.join(__dirname, '..', 'dist') module.exports = { entry: path.join(srcPath, 'index') }
// webpack.dev.js 运行代码的配置（该文件暂时用不到，先创建了，下文会用到） const path = require('path') const webpackCommonConf = require('./webpack.common.js') const { smart } = require('webpack-merge') const srcPath = path.join(__dirname, '..', 'src') const distPath = path.join(__dirname, '..', 'dist') module.exports = smart(webpackCommonConf, { mode: 'development' })
// webpack.prod.js 打包代码的配置 const path = require('path') const webpackCommonConf = require('./webpack.common.js') const { smart } = require('webpack-merge') const srcPath = path.join(__dirname, '..', 'src') const distPath = path.join(__dirname, '..', 'dist') module.exports = smart(webpackCommonConf, { mode: 'production', output: { filename: 'bundle.[contentHash:8].js', // 打包代码时，加上 hash 戳 path: distPath, // publicPath: 'http://cdn.abc.com' // 修改所有静态文件 url 的前缀（如 cdn 域名），这里暂时用不到 } })
修改 package.json 中的 scripts
"scripts": { "build": "webpack --config build/webpack.prod.js" },
重新运行 npm run build 即可看到打包出来的代码。最后，别忘了将根目录下的 webpack.config.js 删除。
这将引发一个新的问题：js 代码中将如何判断是什么环境呢？需要借助 webpack.DefinedPlugin 插件来定义全局变量。可以在 webpack.dev.js 和 webpack.prod.js 中做如下配置：
// 引入 webpack const webpack = require('webpack') // 增加 webpack 配置 plugins: [ new webpack.DefinePlugin({ // 注意：此处 webpack.dev.js 中写 'development' ，webpack.prod.js 中写 'production' ENV: JSON.stringify('development') })
最后，修改 src/index.js 只需加入一行 console.log(ENV) ，然后重启 npm run dev 即可看到效果。
JS 模块化
webpack 默认支持 js 各种模块化，如常见的 commonJS 和 ES6 Module 。但是推荐使用 ES6 Module ，因为 production 模式下，ES6 Module 会默认触发 tree shaking ，而 commonJS 则没有这个福利。究其原因，ES6 Module 是静态引用，在编译时即可确定依赖关系，而 commonJS 是动态引用。