webpack基本用法

原创

已于 2025-08-20 10:12:14 修改 · 409 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

于 2021-03-28 21:08:26 首次发布

webpack 的使用

前言

webpack 作为前端主要的模块化打包工具，我们是必然需要去掌握,理解其用法的。接下来我们就来一起学习 webpack 吧 ☺️

创建项目 webpack-project 文件夹

npm 或 yarn 包下载器任选一个我们这里就是用 yarn

我们在项目根目录通过 yarn init -y 生成默认 package.json 包管理文件

yarn init -y

安装 webpack webpack-cli

yarn add webpack webpack-cli -D

webpack 默认有打包入口和出口

打包入口 src/index.js
输出出口 dist/main.js

执行 yarn webpack 就可以生成 dist 打包目录了

webpack 或
yarn webpack

webpack 执行命令 mode 默认为 production webpack 默认会帮你进行代码压缩

自定义配置创建 webpack.congfig.js ( wepacke 会读取 webpack.config.js 配置 )

webpack 五个核心概念

entry

指定入口文件

output

输出文件,位置，文件名

loader 翻译官

处理非 js 文件，webpack 自身只能打包 js 或 json
如：css,img,font,html 等一系列文件将其打包成 js 模块

plugins 压缩,版本

扩展 webpack 的功能

mode

可以设置 development,production,none 这个详情见中文官网

optimization 最佳化

可以设置代码切割，树摇等一些列操作，生产模式下自动开启

entry

// entry 可以是string，array , object 类型  这里我设为了object 既可以多入口也可单入口 😝
// 入口文件路径 如果是相对路径不可以省略 ./
entry: {
   
    bundle: "./src/index.js" },

扩展


  // String 单入口 会打包生成一个默认名 main.js 的 chunk包
  entry: path.join(__dirname, "/src/index.js"),

  //Array  多入口还是会打包生成一个默认名 main.js 的 chunk包 , 主要是开发环境 html中的hmr

  entry:[path.join(__dirname, "/src/index.js"),path.join(__dirname, "/src/test.js")]
  //Object 生成多个chunk
  entry: {
   
   
    index: path.join(__dirname, "/src/index.js"),
    test: path.join(__dirname, "/src/test.js"),
  },

  // 特殊用法 就是object和array 相结合
  在dll中  vue vue-router vuex 可以打包成一个chunk模块
  entry:{
   
   
    index:[path.join(__dirname, "/src/index.js"),path.join(__dirname, "/src/add.js")]
    test: path.join(__dirname, "/src/test.js"),
  }

output

 //出口文件配置
output: {
   
   
  //输出的路径,当前项目更路径生成dist目录
  path: path.resolve(__dirname, "dist"),
  //输出的文件名称 dist/js/bundle.js
  filename: "js/[name].js",
  // 模块资源引用路径  通常 dist 会放在服务器端 作为文件更路径 👌
  publicPath: "/",
},

扩展

  output: {
   
   
    // 文件位置/文件名
    filename: "js/[name].[contenthash:6].build.js",
    // 所有资源的公共目录位置
    path: path.join(__dirname, "dist"),
    //所有资源的公共路径
    publicPath: "/",
    // 拆分的chunk命名规则
    chunkFilename:[name]_chunk.js,
    //chunk暴露的变量
    library: [name],
    //变量名添加到那个对象上 window commonjs global umd
    libraryTarget: "umd",
  },

loader

module:{
   
   
  rules:[
    // 添加各种静态资源模块文件
    ... loaders
  ]
}

css 文件解析加载

css-loader 将 css 文件转成 js 模块

yarn add css-loader -D

style-loader 将 js 模块中的 css 标识创建 style 标签插入

yarn add style-loader -D

基本用法

{
   
   
  // 要匹配的文件名
  test: /\.css$/,
  use: [
    //从下往上执行
    // 创建style标签会将 下面的js文件插入进去 ，放在head标签中
    "style-loader",
    //将css 文件变成commonJs模块加载js中  样式字符串
    "css-loader",
  ],
},

字体，图片文件解析加载

file-loader 就是将文件复制到了指定目录

yarn add file-loader -D

基本用法

{
   
   
  test: /\.(otf|eot|svg|ttf|woff|woff2)(\?\S*)?$/,
  loader: "file-loader",
  options: {
   
   
    // 输出目录
    outputPath: "fonts",
  },
},

处理图片转成 base64 减小服务器压力,增加包的体积, 一般我们处理 4k 以下的小图片超过 4k 会类似 file-loader 一样导出文件

yarn add url-loader -D

基本用法

{
   
   
  test: /\.(png|jpg|gif)$/,
  use: [
    {
   
   
      loader: "url-loader",
      options: {
   
   
        limit: 4 * 1024,
        // 图片的路径 hash8位,后缀名
        name: "[name].[hash:8].[ext]",
        //打包输出的地址
        outputPath: "img",
        //使用commonJs 解析, 新版无需添加 😬
        esModule: false,
      },
    },
  ],
},

处理 html 文件解析 html 文件中的 img src a href 等( 新版本有点兼容问题，我这用 1.3.2 版本的 😺)

yarn add html-loader@1.3.2 -D

基本用法

{
   
   
  test: /\.(html)$/,
  use: [
      {
   
   
        loader: "html-loader",
        options: {
   
   
          esModule: false,
          attributes: {
   
   
        list: [
            {
   
   
              tag: "img",
              attribute: "src",
              type: "src",
            },
            {
   
   
              tag: "img",
              attribute: "data-src",
              type: "src",
            },
            {
   
   
              tag: "img",
              attribute: "data-srcset",
              type: "srcset",
            },
            {
   
   
              tag: "a",
              attribute: "href",
              type: "src",
            },
          ],
        },
      },
    }