Webpack简单介绍
一、webpack 简介
1.1 webpack 是什么
本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具（module bundler）。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图（dependency graph），然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。
文章图片
1.2 webpack 五个核心概念
- 入口（entry）
- 输出（output）
- loader
- 插件（plugin）
- 模式（mode）
入口（Entry）指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。
1.2.2 Output
输出（Output）指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。
1.2.3 Loader
Loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）
1.2.4 Plugins
插件（Plugins）可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩， 一直到重新定义环境中的变量等。
1.2.5 Mode
模式（Mode）指示 webpack 使用相应模式的配置。
- development：开发环境
- production：生产环境
新建文件夹webpack_demo，控制台输入npm init，一路回车
文章图片
初始化完毕生成package.json文件
文章图片
2.1.2 下载并安装webpack
输入指令：
npm install webpack webpack-cli -g 全局安装
npm install webpack webpack-cli -D 本地安装2.2 编译打包应用 2.2.1 创建文件
在src文件夹下创建index.js文件，作为webpack的入口文件
文章图片
2.2.2 运行指令
开发环境指令：
webpack src/index.js -o build/built.js --mode=development
文章图片
build文件夹下生成built.js打包后的文件
文章图片
功能：webpack 能够编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成浏览器能识别的语法。
生产环境指令：
webpack src/index.js -o build/built.js --mode=production功能：在开发配置功能上多了一个代码压缩
【Webpack简单介绍】生产环境下生成的built.js被压缩
文章图片
推荐阅读
- 科学养胃，别被忽悠，其实真的很简单
- opencv|opencv C++模板匹配的简单实现
- 松软可口易消化，无需烤箱超简单，新手麻麻也能轻松成功~
- Apache多路复用模块（MPMs）介绍
- 简单心理2019春A期+32+张荣
- 《算法》-图[有向图]
- android防止连续点击的简单实现（kotlin）
- 机器学习一些简单笔记
- 第十六天（请介绍一件让你非常自豪的事情，（不能是职业类的），什么原因感到自豪。）
- typeScript入门基础介绍