Webpack的基本使用

定义：webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具；

          把所有依赖的文件生成一个图，打包成文件

安装

确保安装了node.js

如何安装：npm init -y 初始化项目

                  npm i webpack-cil -D  安装

配置文件：在创建的文件夹根目录创建一个 webpack.config.js

核心概念：

• 入口(entry)
• 输出(output)
• loader
• 插件(plugin)
• 模式(mode)
• 浏览器兼容性(browser compatibility)
• 环境(environment)

入口(entry)

入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始

输出(output)

output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。

loader

loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

webpack默认只能够处理js文件；loader把非js文件转换为webpack可以处理的模块。

 webpack里loader用法:

        1.css-loader 处理css文件

        2.style-loader把css插入到header

        3.less-loader 处理.less

        4.MiniCssExtractPlugin.loader压缩抽出css-loader

        5.file-loader处理文件，图片

        6.url-loader 当文件比较小的时候转成base64(减少-http请求)

插件(plugin)

loader 用于转换某些类型的模块，而插件(plugin)则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

插件的运用如下：

 模式(mode)

通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。

          

webpack如何进行命令script：

在根目录下package.json 进行配置

然后在 webpack.config.js 里配置

derServer(本地服务器)

配置：npm i  webpack-dev-sever  -D

 这样就能进行基本的打包和运行。。。。。

webpack的优化：

1.css优化压缩；js优化压缩；
               指令： npm i optimize-css-assets-webpack-plugin terser-webpack-plugin -D
                           //optimize-css-assets-webpack-plugin     css优化
                           //terser-webpack-plugin      js压缩优化

2.图片优化      images-webpack 压缩图片

3.异步加载

4.预加载

5.按需导入js

6.hash命令：内容相同，文件名称也就相同，如果浏览器已经请求过同样的名称，浏览器二次请                        求 ，会从缓存里面取

1. hash //打包的变化算出一段字符

2. chunkHash //如果入口发生变化就会发生变化

3. contentHash //如果内容发生变化，名称发生变化