webpack五个核心概念
Entry
入口{Entry}指示Webpack以哪个文件为入口起点开始打包,分析构建内部依赖图。
Output
输出{Output}指示 Webpack打包后的资源 bundles输出到哪里去,以及如何命名。
Loader
Loader让 Webpack能够去处理那些非javaScript文件(Webpack 自身只理解javascript)
Plugins
插件{Plugins}可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量等。
Mode
模式{Mode}指示Webpack使用相应模式的配置
| 选项 | 描述 | 特点 |
|---|---|---|
| development | 将会process.env.NODE_ENV的值设置为development。启用NamedChunksPlugin和NamedModulesPlugin。 | 能让代码本地调试运行的环境 |
| production | 会将process.env.NODE_ENV的值设为production。启用FlaDepencyUsagePlugin,FlagIncludedChunksPlugin,ModuleConcatenationPlugin,NoEitOnErrorsPlugin,OccurrenceOrderPlugin,sideEffectsFlagPlugin和UglifyJsPlugin | 能让代码优化上线运行的环境 |
webpack性能优化
- 开发环境性能优化
- 生产环境性能优化
开发环境性能优化
- 优化打包构建速度
- 优化代码调试
生产环境性能优化
- 优化打包构建速度
- 优化代码运行的性能