webpack

108 阅读1分钟

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性能优化

  • 开发环境性能优化
  • 生产环境性能优化

开发环境性能优化

  • 优化打包构建速度
  • 优化代码调试

生产环境性能优化

  • 优化打包构建速度
  • 优化代码运行的性能