webpack是什么

Webpack是一种前端资源构造工具,一个静态模块打包器(module bundler)。在Webpack看来，前端的所有资源文件（js/json/css/img/less/...)都会作为模块处理。它根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle) 图片理解:

左边各种资源文件(浏览器不识别的js,less,sass等等)->通过webpack打包输出-> 生成对应的静态资源bundle

Webpack五个核心概念

Entry

入口(Entry)指示Webpack以哪个文件为入口起点开始打包,分析构建内部依赖图

Output

输出(Output)指示Webpack打包后的资源bundles输出到哪里去,以及如何命名.

Loader(翻译官，可以理解为把webpack不识别的文件翻译成js)

Loader让Webpack能够去处理那些非JavaScript文件,如less,sass，img等(webpack自身只理解JavaScript)

Plugins

插件(Plugins)可以用于执行范围更广的任务(如压缩代码)。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。

Mode

模式(Model)指示webpack使用相应模式的配置

选项	描述	特点
development	会将process.env.NODE_ENV的值设为development。	能让代码本地调试运行的环境
production	会将process.env.NODE_ENV的值设为production。	能让代码优化上线运行的环境

用例:

目录结构

// import './index.css'; webpack不能处理css文件
import data from './data.json';
console.log(data);

function add(x, y) {
  return x + y;
}

console.log(add(1,2));

小结

index.js: webpack入口起点文件

1.运行指令

开发环境运行命令

webpack ./src/index.js -o ./build/built.js --mode=development

说明: o:output 输出

翻译就是: webpack会以 ./src/index.js 为入口文件开始打包,打包后输出到 ./build/built.js,整体打包环境是开发环境

生产环境运行命令

webpack ./src/index.js -o ./build/built.js --mode=production

翻译就是: webpack会以 ./src/index.js 为入口文件开始打包,打包后输出到 ./build/built.js,整体打包环境是生产环境

2.结论:

1.webpack能处理js/json,不能处理css/img等其他资源

2.生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化

3.生产环境比开发环境多一个压缩js代码。

打包后的输出结果