美文网首页
webpack 详细文档说明

webpack 详细文档说明

作者: coderhzc | 来源:发表于2021-10-28 22:06 被阅读0次

一.webpack五个核心概念

1. Entry: 入口指示webpack以哪个文件为入口起点开始打包,分析构建内部的依赖图。
2. Output: 输出指示 webpack打包后的资源bundles输出到哪里去,以及如何命名。
3. Loader:让Webpack能够去处理那些非JavaScript文件(webpack 自身只理解JavaScript)
4. Plugins: 插件可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量等。
5. Mode: 模式指示webpack使用相应模式的配置
    -- 1. devolopment 开发模式
       能让代码本地调试运行环境
    --2.  production 生产模式
       能让代码优化上线运行的环境

二.webpack 全局安装

在对应的文件夹中打开 终端命令 执行以下命令:

1 npm init
2 npm i webpack webpack-cli -g 全局安装

查看webpack版本信息

webpack --version

实际截图

image.png

三.webpack 局部安装

1. npm init  或者 npm init -y (直接就创建出来了)

实际截图

image.png
image.png
局部安装:
2.1 npm i webpack webpack-cli --save--dev (开发阶段的安装依赖)
      简写方式:npm i webpack webpack-cli -D (开发阶段的安装依赖)

2.2 npm i webpack webpack-cli  (生产阶段的安装依赖) 默认就是生产阶段的安装
2.3 局部的webpack打包的两种方式:
      -- ./node_modules/.bin/webpack
      -- npx webpack 
image.png
2.4  其实使用 npx webpack 还是很陌生的 一般会在 package.json 中的"scripts"去配置
image.png

四.webpack 安装指定的版本

npm install  webpack@4.1.1

五.如果你想在打包的时候 入口的打包文件和出口的打包文件叫自己指定的名字的话,以下配置:

打包入口文件默认叫index.js

image.png

六. 什么是css-loaders?

webpack 是不认识css 的 所以要在项目中要安装 CSS-loader CSS转换器


image.png
安装命令:
npm install  css-loader -D

七.在webpack.config.js中 配置css-loader,常用的有三种方式:

1. 内联样式

2. CLI的方式(webpack5中不再使用)弃用
image.png
3. loader 配置方式:-推荐方式
 // loader配置
  module: {
    rules: [
      {
        test: /\.css$/, // 正则表达式
        // 1.loader的写法(语法糖)
        // loader: "css-loader"

        // 2.完整的写法
        use: [
          // {loader: "css-loader"}
          "css-loader"
        ]
      }
    ]
  }
image.png

八.认识style-loader

1. 已经可以通过css-loader来加载css 文件了
    -- 但是会发现这个css在代码中并没有生效(页面没有效果)
2. 这是为什么呢?
   -- 因为css-loader只负责.css文件的解析,并不会将解析之后的css插入到页面中
   -- 如果希望完成插入style的操作,那么我们还需要另外一个loader,就是style-loader

3. 安装style-loader命令:
    npm install style-loader -D

4. style-loader的配置
 use: [
          // {loader: "css-loader"}
          "style-loader", // 这个use数组中的执行顺序是反的,放在后面的先执行,css-loader是必须要第一个执行的
          "css-loader"
        ]
image.png

九. 如何处理less文件?

浏览器是不认识less文件的 所以需要安装一个less complier

1.less 安装命令:
npm install less  -D
2. less-loader安装命令:
npm install less-loader -D
image.png

十.webpack-设置背景图片 file-loader

十.一 file-loader的作用就是帮助我们处理import/require()方式引入一个文件资源,并且会将他放到我们输入的文件夹中

1. file-loader 安装命令:
npm install  file-loader -D

十.二. url-loader和file-loader的工作方式是相似的,但是可以将较小 的文件,转成base64的URI,也就是直白的说: 可以帮我们处理图片打包体积的缩小优化

2. url-loader 安装命令:
npm install url-loader  -D

/******************以上的配置代码******************/

const path = require('path')

module.exports = {
  // 入口文件 打包时进入到src目录下指定要找的入口打包文件
  entry: "./src/main.js",
  output: { // 出口文件
    path: path.resolve(__dirname, "./build"),   // 必须是绝对路径,配置一个打包好的文件
    filename: "build.js"
  },
  // loader配置
  module: {
    rules: [
      {
        test: /\.css$/, // 正则表达式
        // 1.loader的写法(语法糖)
        // loader: "css-loader"

        // 2.完整的写法
        use: [
          // {loader: "css-loader"}
          "style-loader", // 这个use数组中的执行顺序是反的,放在后面的先执行,css-loader是必须要第一个执行的
          "css-loader"
        ]
      },
      { // less文件的配置
        test: /\.less$/,
        use: [
          "style-loader", // 这个use数组中的执行顺序是反的,放在后面的先执行,css-loader是必须要第一个执行的
          "css-loader",
          "less-loader"
        ]
      },

      // 图片资源 file-loader
      // {
      //   test: /\.(jpe?g|png|gif|svg)$/,
      //   use: {
      //     loader: "file-loader",
      //     // 图片的命名规则
      //     options:{
      //       outputPath: "img",  // 图片打包全部放到img的文件夹中了,打包以后看build 文件中会生成一个img文件夹的
      //       name: "[name]-[hash:6].[ext]", // [name]:设置图片的动态名称,[hash:6]:后面跟一个动态的hash值,[ext]:获取到的是图片的格式
      //     }
      //   }
      // }

      // 图片资源 url-loader
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        use: {
          loader: "url-loader",
          // 图片的命名规则
          options: {
            outputPath: "img",  // 图片打包全部放到img的文件夹中了,打包以后看build 文件中会生成一个img文件夹的
            name: "[name]-[hash:6].[ext]", // [name]:设置图片的动态名称,[hash:6]:后面跟一个动态的hash值,[ext]:获取到的是图片的格式
            limit: 100 * 1024
          }
        }
      }
    ]
  }
}

十二. 认识asset module type

我们当前使用webpack版本是webpack5

1. 在webpack5 之前,加载这些资源我们需要使用一些 loader,比如raw-loader,url-loader,file-loader;
2. 在webpack5 开始,就可以直接使用资源模块类型(asset module type) ,来代替上面的loader

3. 资源模块类型(asset module type) 通过添加4中模块类型,来替代所有的loader
    -- asset/resource 发送一个单独的文件并导出URL,之前通过使用file-loader
    -- asset/inline 导出一个资源的data URI,之前通过使用 url-loader实现
    -- asset/source 导出资源的源代码,之前通过使用 raw-loader实现
    -- asset在导出一个data URI 和 发送一个独立的文件之间自动选择,之前通过使用url-loader,并且配置资源体积限制实现
const path = require('path')

module.exports = {
  // 入口文件 打包时进入到src目录下指定要找的入口打包文件
  entry: "./src/main.js",
  output: { // 出口文件
    path: path.resolve(__dirname, "./build"),   // 必须是绝对路径,配置一个打包好的文件
    filename: "build.js"
  },
  // loader配置
  module: {
    rules: [
      {
        test: /\.css$/, // 正则表达式
        // 1.loader的写法(语法糖)
        // loader: "css-loader"

        // 2.完整的写法
        use: [
          // {loader: "css-loader"}
          "style-loader", // 这个use数组中的执行顺序是反的,放在后面的先执行,css-loader是必须要第一个执行的
          "css-loader"
        ]
      },
      { // less文件的配置
        test: /\.less$/,
        use: [
          "style-loader", // 这个use数组中的执行顺序是反的,放在后面的先执行,css-loader是必须要第一个执行的
          "css-loader",
          "less-loader"
        ]
      },

      // 图片资源 file-loader
      // {
      //   test: /\.(jpe?g|png|gif|svg)$/,
      //   use: {
      //     loader: "file-loader",
      //     // 图片的命名规则
      //     options:{
      //       outputPath: "img",  // 图片打包全部放到img的文件夹中了,打包以后看build 文件中会生成一个img文件夹的
      //       name: "[name]-[hash:6].[ext]", // [name]:设置图片的动态名称,[hash:6]:后面跟一个动态的hash值,[ext]:获取到的是图片的格式
      //     }
      //   }
      // }

      // 图片资源 url-loader
      // {
      //   test: /\.(jpe?g|png|gif|svg)$/,
      //   use: {
      //     loader: "url-loader",
      //     // 图片的命名规则
      //     options: {
      //       outputPath: "img",  // 图片打包全部放到img的文件夹中了,打包以后看build 文件中会生成一个img文件夹的
      //       name: "[name]-[hash:6].[ext]", // [name]:设置图片的动态名称,[hash:6]:后面跟一个动态的hash值,[ext]:获取到的是图片的格式
      //       limit: 100 * 1024
      //     }
      //   }
      // }
      // webpack5 的配置 四种模块类型,以上注释的都可以不需要了
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        // type: "asset/resource"
        generator: {
          filename: "img/[name]_[hash:6][ext]"
        },
        type: "asset",
        parser:{
          dataUrlCondition:{
            maxSize: 100*1024
          }
        }
      }
    ]
  }
}

十三.认识插件Plugin

Loader 是用于特定的模块类型进行转换
Plugin可以用于执行更加广泛的任务, 比如打包优化, 资源管理,环境变量注入等;

1. CleanWebpackPlugin 插件: 每次修改一些配置,重新打包时,都需要手动删除build文件夹, 很不方便,此时可以借助这个CleanWebpackPlugin 插件来完成

CleanWebpackPlugin 安装命令: npm install clean-webpack-plugin -D

2.0.在webpack.config.js 文件中导入Clean-webpack-plugin插件
// 2.1.导入Clean-webpack-plugin插件的导入
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
 // 2.2.使用
  plugins:[
    new CleanWebpackPlugin()
  ]

十四.HtPluginWebpackml的认识

我们的HTML文件是编写在根目录下的,而最终打包的build文件夹中是没有index.html文件的
在进行项目部署,必然也是需要有对应的入口文件index.html,所以也需要对index.html进行打包处理,对HTML进行打包处理我们可以使用另外一个插件: HtmlWebpackPlugin;

HTMLWebpackPlugin安装命令: npm install html-webpack-plugin -D

相关文章

  • webpack 详细文档说明

    一.webpack五个核心概念 二.webpack 全局安装 在对应的文件夹中打开 终端命令 执行以下命令: 查看...

  • webpack4

    使用webpack-dev-serve 详细文档 修改webpack.config.js 告诉webpack-de...

  • webpack常用方法小结

    参考入门Webpackwebpack中文文档-概念webpack中文文档-详细配置webpack配置及技巧 web...

  • (new)压缩js/css、chunk分离

    参考文档:webpack打包体积优化(超详细) 使用分析器webpack-bundle-analyzer(可视化大...

  • 产品需求文档(PRD)写作方法(下)

    13.2常见PRD文档包含内容 文档说明 产品说明 全局功能需求说明 详细功能需求说明 13.3全局功能说明 全局...

  • Vue学习笔记

    0.参考文档 理解vuex -- vue的状态管理模式 vuex最简单、最详细的入门文档 vue+webpack项...

  • elasticsearch 数据管理

    一、 文档: 二、 文档元数据: 详细说明: 详细使用方式: ① 使用自己的ID生成标识:命令: ② 自增的ID:...

  • BRD-MRD-PRD

    BRD 商业需求文档 MRD 市场需求文档 PRD 产品需求文档 FSD 功能详细说明文档 Functional ...

  • typeorm 模糊查询

    由于官网文档没有给出详细的说明,故在此做简要的文档记录 如下所示:

  • webpack超详细配置, 使用教程(图文)

    博主在这里就不详细介绍webpack来源以及作用了, 本篇博文面向新手主要说明如何配置webpack, 以及we...

网友评论

      本文标题:webpack 详细文档说明

      本文链接:https://www.haomeiwen.com/subject/uclbaltx.html