webpack(一)——资源模块，loader，代码分离，缓存

安装webpack

安装webpack需要两个主包，在Vscode上新建一个文件夹，在终端打开，

• 输入node -v检测是否安装了nodejs
• 输入npm -v
• 输入npm install webpack webpack-cli --global安装webpack,会产生一个文件package.json
• 输入命令webpack -v是否安装成功

---

一、资源模块

1. resource
   修改配置文件webpack.config.js

module:{
   rules:[{
     test:/\.png/,
     type:'asset/resource'
   }]
}

输入npx webpaack自定义文件名


generator的优先级是大于asset的

2. inline资源

module:{
   rules:[{
     test:/\.svg/,
     type:'asset/inline'
   }]
}

3. source
4. 通用资源 类型

通用资源类型asset,在导出一个data URI和发送一个单独文件之间自动选择。

现在webpack将按照默认条件自动地在resource和inline之间进行选择，小于8kb的文件会视为inline模块，否则视为resource

二、loader

1. 加载CSS

   在终端输入npm install css-loader -D安装css-loader

//在webpack.config.js进行配置
{
test:/\.css$/,
use:['style-loader','css-loader']
}

2. 抽离和压缩CSS

在多数环境下压缩CSS可以在生产环境中节省加载时间，同时可以将css文件抽离成一个单独的文件

需要在终端输入npm install mini-css-extract --save-dev

//在webpack.config.js进行配置
rules:[{
test:/\.css$/i,
use:['MiniCssExtractPlugin.loader','css-loader']
}]

可以自己设定文件名，如下所示

new MiniCssExtractPlugin({
filename:'styles/[contenthash].css'
})

3. 加载images图像

   可以在加载CSS时处理图像

//在style.css中修改
.block-bg {
background-image:url(./assets/webpack-logo.svg);

//在index.js文件中修改
block.style.cssText:'width:200px,height:200px;background-color:#2b3a42'
block.cssList.add('block-bg')

4. 加载fonts字体

使用Asset Modules可以接收并加载任何文件，然后将其输出到构建目录

5. 加载数据

可以加载的有用资源，如JSON文件,csv,tsv,xml,类似于Node.js,JSON支持实际上是内置的，也就是说import
Data from './data.json’默认正常进行。

要导入csv,tsv,xml，可以使用csv-loader和xml-loader,处理加载

在终端输入npm install --save-dev csv-loader xml-loader

//在webpack.config.js中添加配置
module:{
  rules:[{
    test:/\.(csv|tsv)$/i,
    use:['csv-loader'],
  },{
   test:/\.(xml)$/i,
    use:['xml-loader'], },
    ]
}

6. 自定义 JSON 模块parser

   通过自定义parser替代特定的webpack loader，可以将任何toml,yaml或json5文件作为JSON模块导入
   
   

//在webpack.config.js中添加配置
{test:/\.toml$/,
type:'json',
parser:{parse:toml.parse}
},
{test:/\.yaml$/,
type:'json',
parser:{parse:yaml.parse}
},
{test:/\.json5$/,
type:'json',
parser:{parse:json.parse}
},

7. babel-loader
   在终端输入 npm install -D babel-loader @babel/core @babel/preset-env

• babel-loader 在webpack里应用babel解析ES6的桥梁
• @babel/core babel核心模块
• @babel/preset-env babel-loader预设，一组babel插件的组合

三、代码分离

1. 入口起点

   这是最简单直观的分类代码的方式

   先在JS文件里导入lodash,因此需要安装
   在终端输入 npm install lodash --save-dev
   然后修改一下配置文件，如下所示

2. 防止重复

配置dependOn option选项，可以在多个chunk之间共享模块：

3. 动态导入

当 涉及到动态代码拆分时，webpack提供了两个技术，第一种，也是推荐选择的方式，使用import()语法来实现动态导入，第二种，使用webpack遗留功能使用require.ensure

4.懒加载（按需加载）

这种方式实际上最先把你的代码在一些逻辑断点处分离开，然后在一些代码中完成某些操作后，立即引用或即将引用另一些新的代码块

四、缓存

1. 输入文件的文件名

可以通过替换output.filename中的substitutions设置，来定义输出文件的名称

//在webpack.config.js中
output: {
    filename:'[name].[contenthash].js',
        path:path.resolve(_dirname,'./dist'),
            clean:true,
                assetModuleFilename:'images/[contenthash][ext]'
},
    //在集成终端打开 

2. 缓存第三方库

splitChunks: {
    cashGroups:{
        vendor:{
            test:/[\\/]node_modules[\\/]
            name:'vendors',
                chunks:'all '
        }
    }
}
//打包到vendors.bundle.js

3. 将 JS 文件放到一个文件夹中

当项目部署到服务器上时浏览器会加载完服务器上的文件会缓存好我们打包好的模块，这样如果我们修改了业务代码，文件名如果没有变，浏览器会使用用户本地缓存内容，

• 这就需要修改文件的文件名解决，使用可替换模板字符串的方法来定义contenthash, 能实现文章的内容不变，哈希的字符串就不变

• 第三方代码也需要缓存，通过修改optiminzationChunks属性来实现，可以定义一个casheGroups这个缓存组将们业务代码引用的第三方文件，打包到一个文件中在浏览器中缓存

• 将所有的JS文件都打包到了一个叫scripts的文件夹中，这就实现了样式，图片，字体JS，等全部资源打包

几个常见的loader

file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件

url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去

source-map-loader：加载额外的 Source Map 文件，以方便断点调试

image-loader：加载并且压缩图片文件

babel-loader：把 ES6 转换成 ES5

css-loader：加载 CSS，支持模块化、压缩、文件导入等特性

style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。

eslint-loader：通过 ESLint 检查 JavaScript 代码