美文网首页
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 详细文档说明

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