webpack核心
一.Entry
- 入口: 指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图
二.Output
- 输出: 指示webpack打包后的资源bundles出书到哪里去，以及如何命名
三.Loader
- 让Webpack能够处理非JavaScript文件
四.Plugins
- 插件: 用于执行范围更广的任务，包括从打包优化到压缩，重新定义环境中的变量等
五.Mode
- 模式: 指示webpack使用响应模式的配置
- development模式(能让代码本地调试运行的环境)：会将启用process.env.NODE_ENV 的值设为development，启用NamedChunks 和NamedModulesPlugins
- production模式（让代码优化上限运行的环境）: 会将process.env.NODE_ENV的值设为production,启用FlagDependencyUsagePlugin,FlagIncludedChuncksPlugin, MuduleConcatenationPlugin,NoEmitOnErrorPlugin,OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin
webpack使用
- index.js: Webpack 入口起点文件
- 运行指令:
- 开发环境:
webpack ./src/index.js -o ./build/built.js --mode=development // webpack会以./src/index.js为入口文件开始打包,打包后输出到./build/build.js，整体打包环境是开发环境- 生产环境:
webpack ./src/index.js -o ./build --mode=production // webpack会以./src/index.js为入口文件开始打包,打包后输出到./build，整体打包环境是生产环境 - webpack特点
- webpack 能处理js和json资源,不能处理css，img等
- 生产环境和开发环境将ES6的模块编译成浏览器能识别的模块
- 生产环境比开发环境多一个js压缩
webpack.config.js （webpack的配置文件）
- 作用:指示webpack需要做的事, 当运行webpack指令时会加载里面的配置
- 所有构件工具都基于node.js平台运行，模块化默认采用commonJS
