什么是 webpack-lean
webpack-lean 是一个基于 webpack 的简化封装工具，用于快速构建前端应用的打包工具。它具有以下特点：
- 快速：能够快速构建简单项目的打包任务。
- 简单：对于简单任务，只需要基本的配置即可完成任务。
- 灵活：可以扩展 webpack 的配置，进行个性化的定制。
安装和使用
安装
使用 npm 安装：
npm install webpack-lean --save-dev
使用
webpack-lean 的使用非常简单，只需要在命令行中执行：
webpack-lean src/index.js dist/bundle.js
其中 src/index.js 是打包的入口文件，dist/bundle.js 是输出的结果文件。
如果要使用其他配置，可以在 webpack.config.js 中进行配置。例如：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};然后在命令行中执行：
webpack-lean --config webpack.config.js
常用配置
在实际使用中，我们通常需要配置一些常用的选项。下面介绍一些常用的配置选项。
开发模式
在开发环境下，通常需要使用开发模式。开发模式会保留所有的源代码，并且会生成 Source Map 文件，用于调试。可以通过以下配置打开开发模式：
module.exports = {
mode: 'development'
};生产模式
在生产环境下，通常需要使用生产模式。生产模式会优化代码，压缩文件大小，并且不生成 Source Map 文件。可以通过以下配置打开生产模式：
module.exports = {
mode: 'production'
};自动刷新
在开发环境下，通常需要自动刷新。可以使用 webpack-dev-server 进行自动刷新。可以通过以下配置打开自动刷新：
module.exports = {
devServer: {
contentBase: './dist',
port: 3000
}
};然后在命令行中执行：
webpack-lean serve --config webpack.config.js
Babel 转译
在使用 ES6 的语法时，需要使用 Babel 进行转译。可以通过以下配置打开 Babel 转译：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
--总结
本文介绍了 webpack-lean 的使用方法和常用配置选项。作为前端工程化的重要工具，掌握 webpack 的使用方法可以帮助我们更加高效地进行开发和部署。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671058dd3466f61ffdd4a