webpack笔记（一）

1、安装

全局安装

npm install webpack webpack-cli --global

本地安装

# 初始化npm包管理配置文件
npm init -y
# 工作文件夹下安装webpack
npm install webpack webpack-cli --save-dev

2、基本使用

# webpack-cli终端指令查看
npx webpack --help

新建webpack.config.js配置文件

const path = require('path')
module.exports = {
  // 配置入口和出口文件
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    // 这里要设置绝对路径
    path: path.resolve(__dirname,'./dist'),
    // 清除上一次的打包文件
    clean: true
  }
}

使用webpack --watch打包能监视文件变化进行自动编译

3、配置项

mode

module.exports = {
  // 编译模式
  mode: 'development'
}

devtool

module.exports = {
  devtool: 'inline-source-map'
}

4、插件

HtmlWebpackPlugin

作用

/*  打包后的文件需要手动引入，很是麻烦
该插件将为你生成一个 HTML5 文件， 在 body 中使用 `script` 标签引入你所有 webpack 生成的 bundle
*/

安装（开发环境）

npm install html-webpack-plugin -D

配置（webpack.config.js）

// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  plugins: [
    // 生成一个Html，也可以不配置，new HtmlWebpackPlugin()
    new HtmlWebpackPlugin({
      // 打包的模板html文件
      template:'./index.html',
      // 生成文件的名称
      filename:'app.html',
      // script标签的位置
      inject:'body',  
    })
  ]
}

webpack-dev-server

作用

/* watch虽然能监测文件变化，但是仍然需要手动刷星浏览器
webpack-dev-server不仅能帮我们打包，还能帮我们开启服务器，同时自动更新
*/

安装

npm install webpack-dev-server -D

配置

module.exports = {
   devServer: {
    static: './dist'
  }
}

mini-css-extract-plugin

作用

/*
- 将head标签中的css抽离出去，避免打包的文件过大
- 这个插件是webpack5环境的
*/

安装

npm install mini-css-extract-plugin -D

配置

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  plugins:[
    // 使用插件,配置项可选，默认打包到dist根目录，名为main.css
    new MiniCssExtractPlugin({
      // 配置位置和文件名
      filename:'style[contenthash].css'
    })
  ],
  module: {
    rules: [
      {
        test: /\.(css|less)$/,
                // 不再使用style-loader，而是插件中的loader
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
      }
    ]
  }
}

css-minimizer-webpack-plugin

作用

/*
- 这个插件用于优化和压缩 CSS
*/

安装

npm install css-minimizer-webpack-plugin -D

配置

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
module.exports = {
  mode:'production',
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ],
  }
}

regeneratorRuntime

此插件是webpack打包生成的全局辅助函数，由babel生成，用于兼容async和await的语法

安装

npm install @babel/runtime -D
# 安装这个插件会在需要regeneratorRuntime的地方自动导入包
npm install @babel/plugin-transform-runtime -D

module.exports = {
  module:{
    rules: [
      {
        test:'/\.js$/',
        exclude:/node_modules/,
        use: {
          loader:'babel-loader',
          options:{
            presets:['@babel/preset-env'],
            plugins: [
              ['@babel/plugin-transform-runtime']
            ]
          }
        }
      }
    ]
  }
}

5、资源模块

允许webpack打包其他类型的资源文件，有四种资源类型：

resource

asset/resource：发送一个单独的文件并导出url

module.exports = {
   module: {
     // 配置规则
     rules: [
       // 不同的对象加载不同类型的文件，这里是加载png图片
       {
         // 正则匹配
         text: /\.png/,
         type: 'asset/resource',
         // 方法一：自定义文件打包后的文件夹位置和文件名（优先级高于方法二）
         generator:{
           filename:'images/[contenthash][ext]'
         }
       },
       {
         test:/\.(woff|woff2|eot|ttf|otf)/,
         type: 'asset/resource'
       }
     ]
   },
  // 方法二：在output中自定义资源打包后的文件夹
  output:{
    // 通过内容生成hash，扩展名不变，放入images文件中
    assetModuleFilename:'images/[contenthash][ext]'
  }
}

结果<img src="http://127.0.0.1:5500/dist/images/c5dcd15b9.png">

inline

asset/inline：导出资源的DataUrl

module.exports = {
   module: {
     rules: [
       {
         text: /\.png$/,
         type: 'asset/inline'
       }
     ]
   }
}

结果：<img src="data:image/png;base64,...略">

source

asset/source：导出资源的源代码

/* 将资源文本直接导出 */
module.exports = {
   module: {
     // 配置规则
     rules: [
       {
         text: /\.png$/,
         type: 'asset'
       }
     ]
   }
}

asset

asset：会在导出资源的DataUrl和发送单独的文件之间自动进行选择

资源文件大于等于8K：使用asset/resource：打包成一个文件并导出url

资源小于8K，不会打包，使用base64地址

module.exports = {
   module: {
     rules: [
       {
         text: /\.png$/,
         type: 'asset',
         // 修改大小的临界值
         parser:{
           dataUrlCondition: {
             maxSize:4*1024 (默认8k)
           }
         }
       }
     ]
   }
}

6、loader(*)

webpack默认只能打包处理 .js 后缀名结尾的模块，其他非.js后缀名结尾的模块，webpack默认处理不了，需要调用loader加载器才可以正常打包

css-loader

安装

# 处理css文件的loader
npm install css-loader -D
# 创建style标签放入index.html中
npm install style-loader -D

配置

module.exports = {
   module: {
     rules: [
       {
         test: /\.css$/,
         // 先执行的loader后写，先处理css文件，再将样式放入index.html中 
         use: ['style-loader','css-loader']
       }
     ]
   }
}

less-loader

安装

# 在css-loader和style-loader的基础上多安装一个less-loader
npm install less-loader -D

配置

module.exports = {
   module: {
     rules: [
       {
         test: /\.(css|less)$/,
         use: ['style-loader','css-loader','less-loader']
       }
     ]
   }
}

csv-loader | xml-loader

作用

/* 
加载不同的数据：
- 使用csv-loader加载csv或者tsv数据
- 使用xml-loader加载xml数据
*/

安装

npm install csv-loader -D
npm install csv-loader -D

配置

module.exports = {
  module: {
     rules: [
       {
         test: /\.(csv|tsv)/,
         use: 'csv-loader'
       },
       {
         test: /\.xml/,
         use: 'xml-loader'
       }
     ]
   }
}

toml | yaml | json5

作用：加载 toml | yaml | json5 数据

安装

npm install toml yaml json5 -D

配置

const toml  = require('toml')
const yaml  = require('yaml ')
const json5 = require('json5 ')
module.exports = {
  module: {
     rules: [
       {
         test: /\.toml$/,
         use: 'json',
         parser:{
           parse: toml.parse
         }
       },
       {
         test: /\.yaml/,
         use: 'json',
         parser:{
           parse: yaml.parse
         }
       },
       {
         test: /\.json5/,
         use: 'json',
         parser:{
           parse: json5.parse
         }
       }
     ]
   }
}

babel-loader(*)

可以打包处理webpack无法处理的高级JS语法

npm intall babel-loader @babel/core @babel/preset-env -D

module.exports = {
  module:{
    rules: [
      {
        test:'/\.js$/',
        exclude:/node_modules/,
        use: {
          loader:'babel-loader',
          options:{
            presets:['@babel/preset-env']
          }
        }
      }
    ]
  }
}