一、webpack 的介绍
-
webpack
是一种前端资源构建工具,一个静态模块打包器(module bundler
),前端的所有资源文件(js/json/css/img/less/...
)都会作为模块处理。它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源(bundle
)。 -
webpack
分为Entry
、Output
、Loader
、Plugins
和Mode
。 -
Entry
:入口(Entry
)指示webpack
以哪个文件为入口起点开始打包,分析构建内部依赖图。 -
Output
:输出(Output
)指示webpack
打包后的资源bundles
输出到哪里去,以及如何命名。 -
Loader
:Loader
让webpack
能够去处理那些非JavaScript
文件 (webpack
自身只理解JavaScript
)。 -
Plugins
:插件(Plugins
)可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩, 一直到重新定义环境中的变量等。 -
Mode
:模式(Mode
)指示webpack
使用相应模式的配置,分为development
和production
:
- development:
会将DefinePlugin
中process.env.NODE_ENV
的值设置 为development
。启用NamedChunksPlugin
和NamedModulesPlugin
,能让代码本地调运行的环境。 - production:
会将DefinePlugin
中process.env.NODE_ENV
的值设置 为production
。启用FlagDependencyUsagePlugin
,FlagIncludedChunksPlugin
,ModuleConcatenationPlugin
,NoEmitOnErrorsPlugin
,OccurrenceOrderPlugin
,SideEffectsFlagPlugin
和TerserPlugin
,能让代码优化上线运行的环境。
二、webpack 的初体验
-
创建空文件夹,通过
npm init
命令初始化package.json
文件,通过npm install webpack webpack-cli -g
命令全局下载webpack
和webpack-cli
,通过npm install webpack webpack-cli -D
命令本地下载webpack
和webpack-cli
。 -
在项目中,创建
src
目录,创建data.json
、index.css
和index.js
文件,index.js
是入口起点文件,代码如下所示:
- data.json
{ "name": "张三" }
- index.css
html, body { height: 100%; background-color: pink; }
- index.js
// import './index.css'; import data from './data.json' console.log(data) function add(x, y) { return x + y; } console.log(add(1, 2));
-
在开发环境中,通过
webpack ./src/index.js -o ./build/built.js --mode=development
命令进行运行,webpack
会以./src/index.js
为入口文件开始打包,打包后输出到./build/built.js
,整体打包环境也是开发环境。 -
在生产环境中, 通过
webpack ./src/index.js -o ./build/built.js --mode=production
命令进行运行,webpack
会以./src/index.js
为入口文件开始打包,打包后输出到./build/built.js
,整体打包环境也是生产环境。 -
总结:
webpack
能处理js/json
资源,不能处理css/img
等其他资源- 生产环境和开发环境将
ES6
模块化编译成浏览器能识别的模块化 - 生产环境比开发环境多一个压缩
js
代码