webpack从入门到精通学习笔记-第三节课——配置文件与资源打包

最新推荐文章于 2022-07-22 23:45:00 发布
最新推荐文章于 2022-07-22 23:45:00 发布
阅读量606 收藏
点赞数
分类专栏： webpack 前端编程 文章标签： 前端 webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36288559/article/details/113820056
版权

一、前言

这一部分需要用到webpack的配置文件了webpack.config.js，首先在项目外围创建webpack.config.js文件，如下包括五大核心。

module.exports={
  //指定入口文件
  entry:'',
  //指定输出目录
  output: {  
  },
  //配置打包环境
  mode:'',
  //指定webpack打包时要使用的模块，进行loader配置
  module: {
    //指定加载的规则
    rules: [
        //详细loader配置
      {
        test:'',
        use:[
        ],
      },
    ]
  },
  //配置webpack插件
  plugins: [
  ],
}

二、打包js、json资源

1、在入口文件中引入需要的js和json文件即可

import '../js/demo.js'
import data from '../package.json'
(function () {
    setInterval(()=>{
        console.log(data);
    },1000)
})()

2、配置webpack配置文件，因为webpack可以直接打包这两个文件，所以只需要配置好，入口文件，输出目录和打包环境即可。

const path=require('path');

module.exports={
  //指定入口文件
  entry: {
    main: "./js/index.js",
  },
  devtool: 'inline-source-map',
  //指定输出目录
  output: {
    //指定打包文件目录路径
    //__dirname为node.js变量，代表当前文件目录的绝对路径
    path: path.resolve(__dirname,"demo"),
    //打包后文件的文件
    filename: "index.js",
  },
  //配置打包环境
  mode:'production',
}

三、打包样式文件

1）普通css文件打包
1、首先，需要安装依赖 “css-loader”，“style-loader”，命令为：npm install css-loader style-loader --save-dev
在这里插入图片描述
2、写一个css文件并在入口文件中引入

import '../css/index.css'

3、因为webpack无法直接打包样式文件，这就需要用到webpack配置文件中的的loader加载器了，添加代码

module: {
    //指定加载的规则
    rules: [
        //详细loader配置
      {
        test:/\.css$/,
        use:[
            //顺序是从下到上
            //创建style标签，将js中的css插入其中，并添加到head中生效
          "style-loader",
            //将css转变成commonjs模块加载在js中，内容是css样式字符串
          "css-loader",
        ],
      },
    ]
  },

4、详细代码:

const path=require('path');

module.exports={
  //指定入口文件
  entry: {
    main: "./js/index.js",
  },
  devtool: 'inline-source-map',
  //指定输出目录
  output: {
    //指定打包文件目录路径
    //__dirname为node.js变量，代表当前文件目录的绝对路径
    path: path.resolve(__dirname,"demo"),
    //打包后文件的文件
    filename: "index.js",
  },
  //配置打包环境
  mode:'production',
  module: {
    //指定加载的规则
    rules: [
        //详细loader配置
      {
        test:/\.css$/,
        use:[
            //顺序是从下到上
            //创建style标签，将js中的css插入其中，并添加到head中生效
          "style-loader",
            //将css转变成commonjs模块加载在js中，内容是css样式字符串
          "css-loader",
        ],
      },
    ]
  }
}

2）css扩展语言如less,scss，sass这里以scss为例
1、首先，需要安装依赖 “css-loader”，“style-loader”，“sass-loader”，命令为：npm install css-loader style-loader sass-loader --save-dev
在这里插入图片描述
2、写一个scss文件并在入口文件中引入

import '../css/scss/index.scss'

3、因为webpack无法直接打包样式文件，这就需要用到webpack配置文件中的的loader加载器了，添加代码

module: {
    //指定加载的规则
    rules: [
        //详细loader配置
      {
        test:/\.scss$/,
        use:[
          "style-loader",
          "css-loader",
          "sass-loader"
        ]
      },
    ]
  },

4、详细代码:

const path=require('path');

module.exports={
  //指定入口文件
  entry: {
    main: "./js/index.js",
  },
  devtool: 'inline-source-map',
  //指定输出目录
  output: {
    //指定打包文件目录路径
    //__dirname为node.js变量，代表当前文件目录的绝对路径
    path: path.resolve(__dirname,"demo"),
    //打包后文件的文件
    filename: "index.js",
  },
  //配置打包环境
  mode:'production',
  module: {
    //指定加载的规则
    rules: [
        //详细loader配置
      {
        test:/\.css$/,
        use:[
            //顺序是从下到上
            //创建style标签，将js中的css插入其中，并添加到head中生效
          "style-loader",
            //将css转变成commonjs模块加载在js中，内容是css样式字符串
          "css-loader",
        ],
      },
      {
        test:/\.scss$/,
        use:[
          "style-loader",
          "css-loader",
          "sass-loader"
        ]
      },
    ]
  }
}

四、打包html文件

1、首先，需要安装依赖 “html-webpack-plugin”，命令为：npm install html-webpack-plugin --save-dev
在这里插入图片描述

2、html-webpack-plugin自动生成一个空html文件，并自动引入打包后生成的所有资源js/css资源文件，所以我们需要创建一个模板html，生成的html会以它为模板。
在这里插入图片描述
3、html-webpack-plugin 其实一个插件，这时我们就会用到webpack中的plugins了，在配置文件中添加如下

plugins: [
      //自动生成一个空html文件，并自动引入打包后生成的所有资源js/css资源文件
    new HtmlWebpackPlugin({
      //创建一个模板html，生成的html会以它为模板
      template: "./index.html"
    })
  ]

4、详细代码:

const path=require('path');
const HtmlWebpackPlugin =require('html-webpack-plugin');

module.exports={
  //指定入口文件
  entry: {
    main: "./js/index.js",
  },
  devtool: 'inline-source-map',
  //指定输出目录
  output: {
    //指定打包文件目录路径
    //__dirname为node.js变量，代表当前文件目录的绝对路径
    path: path.resolve(__dirname,"demo"),
    //打包后文件的文件
    filename: "index.js",
  },
  //配置打包环境
  mode:'production',
  module: {
    //指定加载的规则
    rules: [
        //详细loader配置
      {
        test:/\.css$/,
        use:[
            //顺序是从下到上
            //创建style标签，将js中的css插入其中，并添加到head中生效
          "style-loader",
            //将css转变成commonjs模块加载在js中，内容是css样式字符串
          "css-loader",
        ],
      },
      {
        test:/\.scss$/,
        use:[
          "style-loader",
          "css-loader",
          "sass-loader"
        ]
      },
    ]
  }，
  plugins: [
      //自动生成一个空html文件，并自动引入打包后生成的所有资源js/css资源文件
    new HtmlWebpackPlugin({
      //创建一个模板html，生成的html会以它为模板
      template: "./index.html"
    })
  ]
}

四、打包图片文件

1）样式文件中的图片
1、首先，需要安装依赖 “url-loader” “file-loader”，命令为：npm install url-loader file-loader --save-dev
在这里插入图片描述
2、在样式中引入图片文件
在这里插入图片描述
3、因为webpack无法直接打包图片文件，这就需要用到webpack配置文件中的的loader加载器了，添加代码

module: {
    //指定加载的规则
    rules: [
        //详细loader配置
      {
        //处理不了html中引入的图片
        test:/\.(jpg|png|jpeg|gif)$/,
        use:[
          {
            loader: "url-loader",
            options: {
              /*当图片小于8kb的时候，会转化成base64处理
              base64:
              优点：减少请求数量，减轻服务器压力
              缺点：图片体积变大，资源加载变慢*/
              limit:8*1024,
              //对图片资源进行重命名为，去哈希值前10位，[ext]为原扩展名
              name:'[hash:10].[ext]'
            }
          },
        ]
      }
    ]
  }

4、详细代码:

const path=require('path');
const HtmlWebpackPlugin =require('html-webpack-plugin');

module.exports={
  //指定入口文件
  entry: {
    main: "./js/index.js",
  },
  devtool: 'inline-source-map',
  //指定输出目录
  output: {
    //指定打包文件目录路径
    //__dirname为node.js变量，代表当前文件目录的绝对路径
    path: path.resolve(__dirname,"demo"),
    //打包后文件的文件
    filename: "index.js",
  },
  //配置打包环境
  mode:'production',
  module: {
    //指定加载的规则
    rules: [
        //详细loader配置
      {
        test:/\.css$/,
        use:[
            //顺序是从下到上
            //创建style标签，将js中的css插入其中，并添加到head中生效
          "style-loader",
            //将css转变成commonjs模块加载在js中，内容是css样式字符串
          "css-loader",
        ],
      },
      {
        test:/\.scss$/,
        use:[
          "style-loader",
          "css-loader",
          "sass-loader"
        ]
      },
      {
        //处理不了html中引入的图片
        test:/\.(jpg|png|jpeg|gif)$/,
        use:[
          {
            loader: "url-loader",
            options: {
              /*当图片小于8kb的时候，会转化成base64处理
              base64:
              优点：减少请求数量，减轻服务器压力
              缺点：图片体积变大，资源加载变慢*/
              limit:8*1024,
              //对图片资源进行重命名为，去哈希值前10位，[ext]为原扩展名
              name:'[hash:10].[ext]'
            }
          },
        ]
      }
    ]
  }，
  plugins: [
      //自动生成一个空html文件，并自动引入打包后生成的所有资源js/css资源文件
    new HtmlWebpackPlugin({
      //创建一个模板html，生成的html会以它为模板
      template: "./index.html"
    })
  ]
}

2）html中引入图片文件，由于以上方法无法处理html中引入的图片，所以我们需要增加一些配置。
1、首先，需要安装依赖“html-withimg-loader”，命令为：npm install html-withimg-loader --save-dev
在这里插入图片描述

2、在之前的模板页面中引入图片
在这里插入图片描述
3、添加配置，并修改打包图片配置

module: {
      {
        //处理不了html中引入的图片
        test:/\.(jpg|png|jpeg|gif)$/,
        use:[    
      {
        test:/\.html$/,
        use:{
          //处理HTML中引入的图片，从而能够被url-loader处理
          loader:"html-withimg-loader"
        }
      }
    ]
  }
 }

但是这样会报错：
在这里插入图片描述
因为我们还缺少一个配置，因为url-loader默认使用es6模块化解析，而html-withimg-loader是commonjs引入，解决关闭url-loader中的es6模块化处理，使用commonjs即可

{
            loader: "url-loader",
            options: {
              /*当图片小于8kb的时候，会转化成base64处理
              base64:
              优点：减少请求数量，减轻服务器压力
              缺点：图片体积变大，资源加载变慢*/
              limit:8*1024,
              /*问题：因为url-loader默认使用es6模块化解析，而html-loader是commonjs引入
              解析是会出现问题[Obect Module]
              解决关闭url-loader中的es6模块化处理，使用commonjs即可*/
              esModule:false,
              //对图片资源进行重命名为，去哈希值前10位，[ext]为原扩展名
              name:'[hash:10].[ext]'
            }
          },

4、详细代码:

const path=require('path');
const HtmlWebpackPlugin =require('html-webpack-plugin');

module.exports={
  //指定入口文件
  entry: {
    main: "./js/index.js",
  },
  devtool: 'inline-source-map',
  //指定输出目录
  output: {
    //指定打包文件目录路径
    //__dirname为node.js变量，代表当前文件目录的绝对路径
    path: path.resolve(__dirname,"demo"),
    //打包后文件的文件
    filename: "index.js",
  },
  //配置打包环境
  mode:'production',
  module: {
    //指定加载的规则
    rules: [
        //详细loader配置
      {
        test:/\.css$/,
        use:[
            //顺序是从下到上
            //创建style标签，将js中的css插入其中，并添加到head中生效
          "style-loader",
            //将css转变成commonjs模块加载在js中，内容是css样式字符串
          "css-loader",
        ],
      },
      {
        test:/\.scss$/,
        use:[
          "style-loader",
          "css-loader",
          "sass-loader"
        ]
      },
      {
        //处理不了html中引入的图片
        test:/\.(jpg|png|jpeg|gif)$/,
        use:[
          {
            loader: "url-loader",
            options: {
              /*当图片小于8kb的时候，会转化成base64处理
              base64:
              优点：减少请求数量，减轻服务器压力
              缺点：图片体积变大，资源加载变慢*/
              limit:8*1024,
              /*问题：因为url-loader默认使用es6模块化解析，而html-loader是commonjs引入
              解析是会出现问题[Obect Module]
              解决关闭url-loader中的es6模块化处理，使用commonjs即可*/
              esModule:false,
              //对图片资源进行重命名为，去哈希值前10位，[ext]为原扩展名
              name:'[hash:10].[ext]'
            }
          },
        ],
        exclude: [/node-modules/]
      },
      {
        test:/\.html$/,
        use:{
          //处理HTML中引入的图片，从而能够被url-loader处理
          loader:"html-loader"
        }
      }
    ]
  }，
  plugins: [
      //自动生成一个空html文件，并自动引入打包后生成的所有资源js/css资源文件
    new HtmlWebpackPlugin({
      //创建一个模板html，生成的html会以它为模板
      template: "./index.html"
    })
  ]
}

五、打包其他文件

所谓其他资源就是不需要经过压缩处理，原样打包的文件，这里这需要将这一类文件放在统一的文件夹里如static，然后打包时排除，此文件以外的所有文件夹和html文件即可。
1、首先，需要安装依赖 “file-loader”，命令为：npm install file-loader --save-dev
在这里插入图片描述
2、添加配置

{
        exclude: [/img/,/js/,/css/,/node-modules/,/\.html$/],
        use: [
            'file-loader'
        ]
      }

3、详细代码

4、详细代码:

const path=require('path');
const HtmlWebpackPlugin =require('html-webpack-plugin');

module.exports={
  //指定入口文件
  entry: {
    main: "./js/index.js",
  },
  devtool: 'inline-source-map',
  //指定输出目录
  output: {
    //指定打包文件目录路径
    //__dirname为node.js变量，代表当前文件目录的绝对路径
    path: path.resolve(__dirname,"demo"),
    //打包后文件的文件
    filename: "index.js",
  },
  //配置打包环境
  mode:'production',
  module: {
    //指定加载的规则
    rules: [
        //详细loader配置
      {
        test:/\.css$/,
        use:[
            //顺序是从下到上
            //创建style标签，将js中的css插入其中，并添加到head中生效
          "style-loader",
            //将css转变成commonjs模块加载在js中，内容是css样式字符串
          "css-loader",
        ],
      },
      {
        test:/\.scss$/,
        use:[
          "style-loader",
          "css-loader",
          "sass-loader"
        ]
      },
      {
        //处理不了html中引入的图片
        test:/\.(jpg|png|jpeg|gif)$/,
        use:[
          {
            loader: "url-loader",
            options: {
              /*当图片小于8kb的时候，会转化成base64处理
              base64:
              优点：减少请求数量，减轻服务器压力
              缺点：图片体积变大，资源加载变慢*/
              limit:8*1024,
              /*问题：因为url-loader默认使用es6模块化解析，而html-loader是commonjs引入
              解析是会出现问题[Obect Module]
              解决关闭url-loader中的es6模块化处理，使用commonjs即可*/
              esModule:false,
              //对图片资源进行重命名为，去哈希值前10位，[ext]为原扩展名
              name:'[hash:10].[ext]'
            }
          },
        ],
        exclude: [/node-modules/]
      },
      {
        test:/\.html$/,
        use:{
          //处理HTML中引入的图片，从而能够被url-loader处理
          loader:"html-loader"
        }
      },
      {
        exclude: [/img/,/js/,/css/,/node-modules/,/\.html$/],
        use: [
            'file-loader'
        ]
      }
    ]
  }，
  plugins: [
      //自动生成一个空html文件，并自动引入打包后生成的所有资源js/css资源文件
    new HtmlWebpackPlugin({
      //创建一个模板html，生成的html会以它为模板
      template: "./index.html"
    })
  ]
}
LIMI_伞梦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端-Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
Only-CYY的博客
07-05 3779
【2022.3】尚硅谷Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
尚硅谷 Vue2.0 + Vue3.0 入门到精通教程学习笔记（八）
最新发布
weixin_44566194的博客
03-01 1685
本文整理了B站尚硅谷Vue2.0 + Vue3.0 全家桶入门到精通教程视频关于 Vue 3.0部分的知识课程笔记，包括：Vue3 简介、创建 Vue3.0 工程、常用 Composition API、 Composition API 的优势、新的组件以及其他改变等。
webpack5基础使用（1）-介绍、打包文件、处理样式资源（css、less）文件、配置文件内容、eslint工具检测语法、babel工具es6语法转es5
lalala_dxf的博客
07-22 2180
webpack5是一个静态资源打包工具。会以一个或多个文件作为打包的入口，将整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，就可以直接在浏览器端运行了进一步来说就是当开发时，肯定会使用框架、es6模块化语法、less/sass等css预处理器等语法，而这类语法浏览器识别不了，需要进一步编译成js、css等语法浏览器才能够识别，而这一步就由打包工具完成。常见打包工具Grunt、Gulp、Parcel、Webpack、Rollup、Vite…等。...
webpack从入门到精通学习笔记-第二节课——五个核心概念&运行指令
LIMI_伞梦的博客
02-15 154
一、核心概念 1、入口(entry) 入口(entry)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的，默认值是 ./src/index.js。但你可以通过在 webpack configuration 中配置 entry 属性，来指定一个（或多个）不同的入口起点。例如： module.exports={ entry: { main: "./js/ind
【专项学习】 —— Webpack5从入门到精通课程学习（六）
柳柳66的博客
03-08 174
这篇主要介绍《webpack优化环境配置(下)》。 知识点包括： 懒加载和预加载 懒加载 预加载 PWA(离线可访问) 多进程打包 externals DLL(动态链接库) 一、懒加载和预加载 懒加载 懒加载就是，在实际项目中，某个.js文件，还没有用到，此时不进行加载，当网页中进行某个功能，有需要时在加载。 1、复制代码分割工程文件，修改其中的webpack.config.js，...
webpack 入门到精通详细环境配置教程
weixin_52125363的博客
11-10 1022
Webpack学习笔记 文章目录一、Webpack简介1.1 Webpack是什么1.2 Webpack的五个核心概念1.2.1 enter1.2.2 output1.2.3 loader一、pandas是什么？二、使用步骤1.引入库2.读入数据总结项目场景：问题描述：原因分析：解决方案： 一、Webpack简介 1.1 Webpack是什么 Webpack是一种前端资源构建工具，一种静态模块打包器（module bundler） 在webpack看来，前端的所有资源（js/json/css/img/l
【专项学习】 —— Webpack5从入门到精通课程学习（五）
柳柳66的博客
03-08 230
这篇主要介绍《webpack优化环境配置(中)》。 知识点包括： tree shaking code split(代码分割) 第一种方法 第二种方法 第三种方法 一、tree shaking 1、复制上一篇的生产环境缓存工程文件。然后重命名。 tree shaking(树摇)：去除无用的代码。 2、在src文件夹下新建test.js，测试使用该功能，是否会把没有引用的js代码也打包。 t...
【2022.3】尚硅谷Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
热门推荐
大吉的博客
03-22 2万+
爆肝15天，本文共4万5千字，包含Vue.js理论到实战。知识点全部都能使用ctrl+f速查，可作为知识点速查笔记使用。
学习笔记之webpack4+scss+babel+第三方库配置
皆凡人的博客
05-19 1541
刚自学完一些webpack，总结一下笔记，并制作一个我要用的webpack-starter 主要配置：webpack4+scss+babel+bootstrap+jquery+fontawesome 一、基础知识了解 （一）前端工程化——构建工具的选型介绍： 中文版：《前端工程化——构建工具选型：grunt、gulp、webpack》 上文英文版：GULP VS GRUNT VS...
webpack4-cdn-plugin:上传 webpack 资源到 cdn，允许重命名散列资源
05-31
将您的 webpack 生成的资产上传到 CDN，允许重命名/重新哈希。 要求和重要说明 Node 8+ （支持async/await ）是必需的推荐。 此插件尚未在Windows平台上进行测试。 此插件仅支持webpack@4 。 Webpack配置 process...
Webpack 4.X 从入门到精通 - entry与output（一）-附件资源
03-05
Webpack 4.X 从入门到精通 - entry与output（一）-附件资源
html-webpack-externals-plugin：与html-webpack-plugin一起使用以使用预先打包的供应商捆绑包的Webpack插件
02-06
在运行时修改Webpack配置，以将供应商模块添加到属性。 运行将您的供应商模块资产复制到输出路径。 运行将您的供应商模块捆绑包添加到HTML输出中。 安装 npm install --save-dev html-webpack-externals-pl
vue项目设置活性字体（自适应字体大小）
LIMI_伞梦的博客
12-10 2万+
步骤1： 在vue的App.vue页面设置全局字体大小 mounted() { let width=$("body").width(); if(width>=1200){ let fontsize=width/1920*40;//fontsize为当前屏幕的基数字体，相对于设计稿计算得到的。 $("html").css("font-size",`${fontsize}px`) }//当加载页面的时候设置生效 window.
“postcss-px-to-viewport”——移动端前端适配的又一种方案
LIMI_伞梦的博客
12-29 1万+
0、前言 博主以前在做移动端的时候主要使用 @media screen and (min-width: 1200px){ } 或者灵活点，会用之前一种流行已久的移动端适配方案，那就是rem，也就是会用如下代码： const deviceWidth = document.documentElement.clientWidth || document.body.clientWidth; document.querySelector('html').style.font
一小时，学习掌握瀑布流页面布局
LIMI_伞梦的博客
12-29 7685
什么是瀑布流 瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。其实瀑布流的特点就是参差不齐的排列方式，以及流式布局的扩展性，可以通过界面展示给用户多条数据，并且让用户可以有向下浏览的冲动。 博主在浏览各个网站总是看到这样的网页布局，它们的布局像瀑布流水一般，瀑布流布局在我们现在的前端页面中经常会用的到，它可以有效的降低页面的复杂度，节省很多的空间，对于整个页面不需要太多的操作，只需要下拉就可以浏览用
字体包转化为ttf格式的网站分享
LIMI_伞梦的博客
12-10 7625
1、https://transfonter.org/ttc-unpack ttc转ttf 这网站可以将ttc字体包转化为ttf 2、https://www.fontke.com/tool/convfont/ 各类型字体包互转 网站上可以的字体都可以实现互转 转化得到ttf文件之后我们就可以在项目中进行解压操作，项目可以参考我的博客： 网页设计引入的字体包过大的压缩方法 https://blog.csdn.net/qq_36288559/article/details/110920169 ——————感谢
数据可视化清新版【chart.js】学习笔记4.0—柱状图(Bar)
LIMI_伞梦的博客
01-07 4041
Bar——（柱状图/条形图） 柱状/条形图提供了一种以竖线表示数据值的显示方式。用来显示数据趋势，并排比较多个数据集。 官方文档：https://www.chartjs.org/docs/latest/charts/bar.html#barthickness 用法示例 var myBarChart = new Chart(ctx, { type: ‘bar’, data: data, options: options }); 数据集属性（博主这边只列举看出了比较常用和设置影响明显的属性） 属性
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值