Webpack基本配置--打包资源

浅浅的花香味﹌ 2022-12-31 01:19 214阅读 0赞

# webpack打包资源笔记 #

## 一、Webpack简介 ##

### 1.1webpack是什么 ###

Webpack是一种前端资源构建工具，一个静态资源打包器，在Webpack看来，所有的资源文件都会作为模块处理，根据模块的依赖M关系进行静态分析，打包生成对应的静态资源（bundle）。

### 1.2webpack的五个核心概念 ###

*  Entry
    
    入口(Entry)指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。
 *  Output
    
    输出(Output)指示webpack打包后的资源bundles输出到哪里去，以及如何命名。
 *  Loader
    
    Loder让webpack能够去处理那些非JavaScript文件
 *  Plugins
    
    插件(Plugins)可以用于执行范围更广的任务，插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
 *  Mode
    
    \[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rLpJFZ5W-1609047463331)(C:\\Users\\。\\AppData\\Roaming\\Typora\\typora-user-images\\image-20201219083601476.png)\]

## 二、webpack的初次使用 ##

*  webpack的运行指令
    
    **开发环境：**`webpack ./src/index.js -o ./build/built.js --mode=development`
    
    webpack会以 `./src/index.js` 为入口文件开始打包，打包后输出到 `./build/built.js`
    
    **生产环境：**`webpack ./src/index.js -o ./built/built.js --mode=production`
    
    webpack会以 `./src/index.js` 为入口文件开始打包，打包后输出到`./build/built.js`
 *  结论：
    
    1.webpack能处理js/json资源，不能处理css/img等其他资源
    
    2.生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化
    
    3.生产环境比开发环境多一个压缩js代码

## 三、webpack打包资源 ##

首先在src中将入口文件以及其他样式文件编写好，然后在项目中创建一个build文件夹，里边用来存放打包后的文件。然后在项目的根目录下，创建一个`webpack.config.js`文件，该文件为webpack的配置文件。且该配置文件需要引入`path`这个带三方包。

### 3.1webpack打包样式资源 ###

**打包样式资源的操作是在loader配置中进行操作的，打包样式资源的配置文件的基本模板和配置项如下：**

\*\*注：**但是，所有的打包命令都是在一些第三方包成功安装后才能正常运行，否则就会报错。**

/* webpack.config.js webpack的配置文件 作用：指示webpack干哪些活（当运行webpack指令时，会加载里面的配置） 所有的构建工具都是基于node js 平台运行的~ 模块化采用common js */
    
    // resolve用来拼接绝对路径的方法
    const {  resolve } = require('path')
    
    module.exports = { 
      // webpack配置
      // 入口起点
      entry:'./src/index.js',
    
      // 输出
      output:{ 
        filename:'built.js',// 输出文件名
        path:resolve(__dirname,'build')// 输出路径,__dirname代表当前文件的目录绝对路径
      },
    
      // loader的配置
      module:{ 
        rules:[
          // 详细loader配置
          { 
            // 通过test匹配哪些文件（检测文件类型）
            test:/\.css$/,
    
            // 通过use来使用哪些loader对文件进行处理
            use:[
              // use数组中loader的执行顺序：从右往左，从下到上一,依次执行
              'style-loader', //创建style标签，将js中的样式资源插入进行，添加到head中生效
              'css-loader' //将css文件变成commonJs模块加载到js中，里面内容是样式字符串
            ]
          },
          // 不同文件必须配置不同loader处理
          { 
            test:/\.less$/,
            use:[
              'style-loader',//创建style标签，将js中的样式资源插入进行，添加到head中生效
              'css-loader', //将css文件变成commonJs模块加载到js中，里面内容是样式字符串
              // 需要下载less和less-loader
              'less-loader' //将less文件编译成css文件
            ]
          }
        ]
      },
    
      // plugins的配置
      plugins:[
        // 详细plugins的配置
    
      ],
    
      // 模式
      mode:'development',
      // mode:'production'
    }

然后再执行webpack命令对文件进行打包。

### 3.2webpack打包html资源 ###

**打包html资源的操作是在plugins中进行的，且在使用之前，需要引入`html-webpack-plugin`第三方包**

**打包html资源的基本配置如下：**

/* loader: 1.下载 2.使用（配置loader） plugins：1.下载 2.引入 3.使用 */
    
    const { resolve} = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    
    module.exports = { 
      entry:'./src/index.js',
      output:{ 
        filename:'built.js',
        path:resolve(__dirname,'build')
      },
      module:{ 
        rules:[
          // loader的配置
    
        ]
      },
      plugins:[
        // plugins的配置
        // html-webpack-plugin
        // 功能：默认会创建一个空的html，自动引入打包输出的所有资源(js、css)
        // 需求：需要有结构的html文件
        new HtmlWebpackPlugin({ 
          // 复制 './src/index.html' 文件,并自动引入打包输出的所有资源（js、css）
          template:'./src/index.html'
        })
      ],
      mode:'development'
    }

### 3.3webpack打包图片资源 ###

**打包图片资源是在module中进行的，其配置如下：**

const { resolve} = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    
    module.exports = { 
      entry:'./src/index.js',
      output:{ 
        filename:'built.js',
        path:resolve(__dirname,'build'),
        publicPath:"./"
      },
      module:{ 
        rules:[
          { 
            test:/\.less$/,
            // 要是用多个loader处理用use
            use:['style-loader','css-loader','less-loader']
          },
          // 问题：默认处理不了html中的img图片
          // 处理图片资源
          { 
            test:/\.(jpg|png|gif)$/,
            // 使用一个loader
            // 下载url-loader file-loader
            loader:'url-loader',
            options:{ 
              // 图片小于8kb，就会被base64处理
              // 优点：减少请求数量（减轻服务器压力）
              // 缺点:图片体积会更大(文件请求速度更慢)
              limit:8*1024,
    
              // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
              // 所以解析时会出现：[object Module]
              // 解决：关闭url-loader的es6模块化，使用commonjs解析
              esModule:false,
    
              // 打包解析后图片的生成名字是图片的哈希值，我们不希望图片名字那么长
              // 所以给图片进行重命名
              // [hash:10] 代表的是取图片的hash值的前10位
              // [ext]取文件原来扩展名
              name:'[hash:10].[ext]'
    
            }
          },
          { 
            test:/\.html$/,
            // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
            loader:'html-loader'
          }
        ]
      },
      plugins:[
        new HtmlWebpackPlugin({ 
          template:'./src/index.html'
        })
      ],
      mode:'development'
    }

### 3.4webpack打包其他资源 ###

**webpack打包其他资源也是在module中进行配置的，其配置如下：**

**以打包字体图标为例，需要将处理图标的css文件在index.js中事先导入，以及该css文件中的一些url地址的后缀名也需要复制到src下**

const HtmlWebpackPlugin = require('html-webpack-plugin')
    const { resolve} = require('path')
    
    module.exports = { 
      entry:'./src/index.js',
      output:{ 
        filename:'built.js',
        path:resolve(__dirname,'build')
      },
      module:{ 
        rules:[
          { 
            test:/\.css$/,
            use:['style-loader','css-loader']
          },
    
          // 打包其他资源 除了（html，css，js）以外的资源
          { 
            // 就是除了（html，css，js）
            exclude:/\.(css|js|html)$/,
            loader:'file-loader',
            options:{ 
              name:'[hash:10].[ext]'
            }
          }
        ]
      },
      plugins:[
        new HtmlWebpackPlugin({ 
          template:'./src/index.html'
        })
      ],
      mode:'development'
    }

### 3.5配置devServer ###

devServer必须在项目打包后的路径下才能运行，而且浏览器需要在本地服务器的指定端口号才能显示。

### 3.6配置开发环境 ###

配置如下：里边的**outputPath**是将导出后的文件放到对应的文件夹下。

const HtmlWebpackPlugin = require('html-webpack-plugin')
    const { resolve} = require('path')
    
    module.exports = { 
      entry:'./src/js/index.js',
      output:{ 
        filename:'js/built.js',
        path:resolve(__dirname,'build'),
        publicPath:"./"
      },
      module:{ 
        rules:[
          // 处理less资源
          { 
            test:/\.less$/,
            use:['style-loader','css-loader','less-loader']
          },
          // 处理css资源
          { 
            test:/\.css$/,
            use:['style-loader','css-loader']
          },
          // 处理图片资源
          { 
            test:/\.(jpg|png|gif)$/,
            loader:'url-loader',
            options:{ 
              limit:8 * 1024,
              name:'[hash:10].[ext]',
              // 关闭es6模块化，开启commonjs模块化
              esModule:false,
              outputPath:'img'
            }
          },
          // 处理html中的img
          { 
            test:/\.html$/,
            loader:'html-loader'
          },
          // 处理其他资源
          { 
            exclude:/\.(html|css|js|jpg|png|gif|less)/,
            loader:'file-loader',
            options:{ 
              name:'[hash:10].[ext]',
              outputPath:'media'
            }
          }
        ]
      },
      plugins:[
        new HtmlWebpackPlugin({ 
          template:'./src/index.html'
        })
      ],
      mode:'development',
    
      // 配置devServer
      // devServer:{ 
      // contentBase:resolve(__dirname,'build'),
      // compress:true,
      // port:3000,
      // open:true
      // }
    }

### 3.7单独提取css文件 ###

配置如下：

const {  resolve } = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    
    module.exports = { 
      entry: './src/js/index.js',
      output: { 
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
      },
      module: { 
        rules: [
          { 
            test: /\.css$/,
            use: [
              // 创建style标签，将样式放入
              // 'style-loader', 
              // 这个loader取代style-loader。作用：提取js中的css成单独文件
              MiniCssExtractPlugin.loader,
              // 将css文件整合到js文件中
              'css-loader'
            ]
          }
        ]
      },
      plugins: [
        new HtmlWebpackPlugin({ 
          template: './src/index.html'
        }),
        new MiniCssExtractPlugin({ 
          // 对输出的css文件进行重命名
          filename: 'css/built.css'
        })
      ],
      mode: 'development'
    };