webpack介绍

官网: webpack

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

从 v4.0.0 开始，webpack 可以不用再引入一个配置文件来打包项目，然而，我们为了学习它的原理和感受打包的整个流程,主要的学习任务就是学习打包的配置文件如何配置,好让整个工程运作起来.

在开始前你需要先理解一些核心概念：

• 入口(entry)
  打包项目的入口文件配置,就是上面那个蜘蛛网的起点
• 输出(output)
  打包完成以后的项目文件输出到哪里
• loader
  打包的时候,解析某些类型的文件 需要按照语法去解析编码,不同类型的文件需求不同的加载器
• 插件(plugin)
  具有某类功能的工具
• 模式(mode)
  可以在配置文件中设定开发模式,用于未来开发脚手架的配置
• 浏览器兼容性(browser compatibility)
  低版本浏览器不能用
• 环境(environment)
  Webpack 5 运行于 Node.js v10.13.0+ 的版本。
• webpack环境安装

我们学习的是最新版本5.0+

npm install webpack webpack-cli -g//不指定版本,默认下载最新版本,全局安装以后直接使用

mkdir webpack-demo  //创建项目文件夹,随意名字同js变量名规则

cd webpack-demo  //进入项目文件夹

npm init -y  //生成项目配置文件

 

创建一个webpack.config.js的打包配置文件

代码:

module.exports={        

 项目入口配置,

     项目出口配置,

     加载器配置,

     插件配置,

     开发模式配置,

     其他

}