webpack基础使用和模块化

1.webpack的概念：

本质上，webpack是一个现代JavaScript应用程序的静态模块打包器 (module bundler).当webpack处理应用程序时，它会递归地构建一个依赖 关系图(dependency graph),其中包含应用程序需要的每个模块，然后将所 有这些模块打包成一个或多个bundle。

核心概念：

入口(entry)
出口(output)
Loader
插件(plugins)
模式(mode)

2.webpack的安装：

Webpack是一个使用node.js实现的一个模块化代码打包工具，需要先安 装webpack，但安装之前需要搭建node.js环境。
(1)初始化：npm init
(2)npm install -D webpack webpack-cli
Webpack-cli:提供webpack命令，工具，类似create-react-app
Webpack：webpack代码，类似react

3.webpack的使用：

(1)查看版本：./node_modules/.bin/webpack -v
(2)使用webpack对当前项目进行打包
./node_modules/.bin/webpack
(3)打包时候要设置主入口：
./node_modules/.bin/webpack ./src/a.js
(4)可以编辑package.json的scripts来简化输入：

scripts中使用test，start，restart，stop命名的时候，可以在调用的时候省略 run，即可直接npm start
(5)还可以使用更加方便的方式：npx webpack，通过npx也可以帮助我们定位命令到./node_modules/.bin/目录下。如果没有，可以使用npm i -g npx 来安装。

4.webpack的打包模块：

(1)入口文件：入口文件就是我们项目中加载的第一个文件，例如上面的 main.js,其他文件都是通过import等方式引入的，webpack会从我们的指定 入口文件开始分析所有需要依赖的文件，然后把打包成一个完整文件。
(2)打包命令：webpack ./js/index.js 上面命令会使用webpack默认的 一些配置对模块文件进行打包，并把打包后的文件输出到默认创建的./dist 目录下，打包后的文件名称默认为main.js。
打包文件分析：
①把分散的模块文件打包到一个文件中，不需要外部引入了
②内置了一个小型模块加载器(类似requireJS)，实现了打包后的代 码隔离与引用
(3)打包配置：
①我们可以直接通过命令的来打包，但推荐创建一个webpack.config.js文件，通常我们会在项目的根目录下运行命令和创建配置文件，也可以通过-config选项来配置文件路径：

通常情况下，我们的项目目录大致如下：

②配置文件：