周亚博的个人博客

  • 首页
  • 盛夏光年
  • 陪风去荡
  • 布响丸啦
我频繁记录着 因为生活值得
  1. 首页
  2. 盛夏光年
  3. 正文

webpack笔记(一)

2022-09-23 151点热度 0人点赞 0条评论

image-20220923193628596

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
  }
}

image-20220923165853099

使用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']
          }
        }
      }
    ]
  }
}

image-20220923215831972

标签: loader webpack 配置
最后更新:2022-09-24

粥呀Bo

所谓惊喜,就是苦苦等候的兔子来了,后面却跟着狼

点赞
< 上一篇
下一篇 >

文章评论

取消回复
目录
  • 1、安装
    • 全局安装
    • 本地安装
  • 2、基本使用
  • 3、配置项
    • mode
    • devtool
  • 4、插件
    • HtmlWebpackPlugin
    • webpack-dev-server
    • mini-css-extract-plugin
    • css-minimizer-webpack-plugin
    • regeneratorRuntime
  • 5、资源模块
    • resource
    • inline
    • source
    • asset
  • 6、loader(*)
    • css-loader
    • less-loader
    • csv-loader | xml-loader
    • toml | yaml | json5
    • babel-loader(*)

COPYRIGHT © 2022 zhouyaker.cn. ALL RIGHTS RESERVED.

THEME KRATOS MADE BY VTROIS

陕ICP备2022009272号