webpack5 入门学习笔记（二）开发环境配置

最新推荐文章于 2023-02-03 17:10:20 发布
最新推荐文章于 2023-02-03 17:10:20 发布
阅读量283 收藏
点赞数 1
分类专栏： 笔记 前端 webpack5 学习笔记 文章标签： webpack npm less css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L_2017/article/details/116597546
版权

webpack5 入门学习笔记（二）开发环境配置

写在前面

本来想着只是两个小节，学完就总结，结果没想到中间会遇到这么多的坑。

webpack开发环境的基本配置

webpack打包其他资源

定义
  • 不需要做任何处理，只要原封不动的输出，不用优化压缩的统称为其他资源
方法
  1. 选择图标，加入购物车下载代码，如果如法响应可先添加至项目进行下载
  2. 下载下来的包括字体图标的配置，点击其中的 HTML 文件可以查看字体图标的用法，这里使用 font-class 方法引用
  • font-class 引用 font-class 是 Unicode 使用方式的一种变种
  • 主要是解决 Unicode书写不直观，语意不明确的问题。
  • 与 Unicode 使用方式相比，具有如下特点：
  • 相比于 Unicode 语意明确，书写更直观。
  • 可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class里面的 Unicode 引用。

  1. 使用步骤如下：
    第一步：引入项目下面生成的 fontclass 代码：

    <link rel="stylesheet" href="./iconfont.css">

    第二步：挑选相应图标并获取类名，应用于页面：

    <span class="iconfont icon-xxx"></span>

    图标相应类名就在这个文档上方，iconfont.css 文件中也可以查看

    在index.html文件中编写好了之后，在index.js文件中引入iconfont.css文件（这样就不用在index.html界面引入了）

    import './iconfont.css'

  2. 查看 iconfont.css 文件，看到还需要对应的ttf、woff、woff2等文件，根据实际情况从下载的图标代码中复制到项目中

  3. 接下来编写 webpack.config.js 文件基本的配置

要点记录

  1. {resolve} 拼接绝对路径的方法，两种引入方式均可

    const { resolve } = require('path')
path:resolve(__dirname,'dist')
-------------
const path = require('path');
path:path.resolve(__dirname,'dist')

  2. 'file-loader' 打包其他资源 下载file-loader
    可以用排除法，排除其他被处理过的资源

    //排除css/js/html资源
 exclude: /\.(css|js|html)$/

  3. 使用低版本的 loader 可能会报错

    ReferenceError: module is not defined

    (1) 将版本升级

    (2) 使用 type: 'asset/resource'，代替 file-loader 也可以
    在每一个 type 值后面配置 geneator 属性，生成的意识，里面是个对象，配置下 filename ，效果等于使用 file-loader 配置 options 中的 name 属性

  4. webpack5 可以使用 资源模块类型（asset module type），替代file-loader等。

    资源模块类型通过添加四种新的模块类型，来代替Loader

    (1) asset/resource 发送一个单独的文件并导出 URL，替代 file-loader

    (2) asset/inline 导出一个资源的 data URL，替代 url-loader

    (3) asset/source 到处资源的源代码，之前通过使用 raw-loader 实现。

    (4) asset 在导出一个 data URL 和发送一个单独的文件之间做选择，之前通过 url-loader+limit 属性实现

    参照：

反面教材：
在浏览器中打开打包之后的index.html还是无法显示字体图标
控制台报错：Failed to load resource: net::ERR_FILE_NOT_FOUND iconfont.css
然后更改src下index.html中link引用的路径，找到一种把css单独打包不打包进js文件中，然后打包后的js文件放在body中就能在index.js中用append方法添加，最后显示出来
参考：webpack成长指北第9章—webpack如何对icon字体进行打包
后来找到了错误，在引用的时候classname书写错误，每个图标对应的名称在css文件中可以查看，复制的时候少了一段，但是测试的时候一直没有更改html中引用的，所以即便控制台中不报错了还是没出来结果
事实告诉人们，除了实践出真知之外还需要知道注重细节必不可少，否则就只是想是想不到是什么离谱的问题的

代码实现
const {resolve} = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  //入口文件
  entry: './src/index.js',
  //出口
  output: {
    //输出的文件名
    filename: 'bundle.js',
    //输出的路径
    path: resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      //打包其他资源(除了html/js/css/less资源以外的资源)
      {
        //排除css/js/html资源
        exclude: /\.(css|js|html)$/,
        loader: 'file-loader',
        options: {
          name: 'img/[name].[hash:8].[ext]'
        },
        // type: 'asset/resource',
        // generator: {
        //   filename: 'assets/[name].[hash:6].[ext]'
        // }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
};

webpack devServer

定义
  • 开发服务器 devServer 用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
特点
  • 只会在内存中编译打包，不会有任何输出（如果要输出，使用 webpack 命令）
使用方法
  1. 安装命令
    	npm i webpack-dev-server -D
  2. 启动指令
    	npx webpack serve  //webpack5 使用此命令
    也可以在 package.json 中设置运行命令
  3. 基本配置
    	devServer: {
		//运行代码的目录
	    contentBase: resolve(__dirname, 'dist'),
	    //启动gzip压缩
	    compress: true,
	    //端口号
	    port: 3000,
	    //首次运行自动打开浏览器，true代表默认浏览器
	    open:'Chrome'
  	}
要点记录

  1. 如果不起作用可以尝试设置 devServer 的 publicPath 属性

    webpack-dev-server实际上并没有在项目树中创建任何文件，而是将它们直接加载到内存中。接下来，我们devServer在开发模式下使用它，并设置它的contentBase属性，该属性告诉服务器从何处提供内容。但是默认情况下，打包的文件将在浏览器中可用，默认情况下publicPath该文件在浏览器中可用/。如果要自行分配的目录，我们要告诉webpack更改其默认值，并设置devServer的publicPath属性。
    publicPath:’/’ //也可以自己设置

  2. 如果无法自动刷新 设置 target:'web'
    参照：webpack5.0 使用webpack-dev-server时，无法自动刷新页面

  3. 个人的情况是 output 中配置了 publicPath:'./' 就没有办法自动刷新，注释掉，重新启动 devserver 就可以自动刷新了

代码实现
const {resolve} = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  //入口文件
  entry:'./src/index.js',
  //出口
  output: {
    //输出的文件名
    filename: '[name].bundle.js',
    //输出的路径
    path: resolve(__dirname, 'dist'),
    //publicPath: "/",
    clean:true //清理之前打包输出的旧文件
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
     
      //打包其他资源(除了html/js/css/less资源以外的资源)
      {
        //排除css/js/html资源
        exclude: /\.(css|js|html|less)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[hash:10].[ext]',
        }
        // type: 'asset/resource',
        // generator: {
        //   filename: 'assets/[name].[hash:6].[ext]'
        // }
      }
    ]
  },
  devtool: 'inline-source-map',//错误追踪
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      //inject: 'head',
      scriptLoading: 'blocking',
      title:'Hot Module Replacement'
    }),
  ],
  mode: 'development',
  target: 'web',
  //开发服务器 devServer 用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
  //特点：只会在内存中编译打包，不会有任何输出
  //启动devServer指令为：npx webpack-dev-server
  devServer: {
    contentBase: './dist',
    //启动gzip压缩
    compress: true,
    //端口号
    port: 3000,
    //首次运行自动打开浏览器
    open:'Chrome'
  }
};

webpack 开发环境配置

  1. index.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开发环境配置</title>
</head>
<body>
    <h1>开发环境配置</h1>
    <div style="color: rgb(15, 233, 99);">这是webpack学习</div>
    <span class="iconfont icon-icon-test"></span>
    <div id="box">
        <img src="./react.jpg" alt="react">
    </div>
</body>
</html>

  2. index.less

    #box {
  width: 300px;
  height: 300px;
  background-image: url("./react.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
img {
  /*只允许缩小不允许放大，依赖于父级容器的尺寸*/
  max-height: 100%;
  max-width: 100%;
}

  3. index.js 入口文件

    import "./fonts/iconfont.css";
import "./index.less"
function add(x,y) {
    return x + y;
}
console.log(add(56, 44));
console.log(add(10, 20));

  4. webpack.config.js

要点记录
  1. 报错 Error: Cannot find module 'less'。
    安装less解决 npm install less --save-dev
  2. 配置输出路径
    入口文件 在 output 的 filename 处配置
    其他的在options中的outputPath处配置
    在使用 use 的同时不能配置 options
    样式文件是和 js 一起的不用再指定目录了
    html-loader 无需配置，自动打包到 url-loader 处理的图片资源文件夹
代码实现
/**
 * 开发环境配置：能让代码运行起来
 */
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: "./src/index.js",
    output: {
      filename: 'js/bundle.js',
      path: resolve(__dirname, 'dist'),
      clean:true //清理旧文件
  },
  target:'web', //解决devserver不能自动刷新
  module: {
      rules: [
          //loader配置
          {
              //处理less资源
              test: /\.less$/,
              use:[
                  'style-loader',
                  'css-loader',
                  'less-loader'
              ]
          },
          {
              //处理css资源
              test: /\.css$/,
              use: ['style-loader', 'css-loader']
              
          },
          {
              //处理图片资源(样式中的图片资源，html中的是处理不了的)
              test: /\.(jpg|png|gif)$/,
              loader: 'url-loader', //通过es6module解析
              options: {
                  limit: 8 * 1024,
                  name: '[name].[hash:10].[ext]',
                  //关闭es6模块化，开启commonjs模块化
                  esModule: false,
                  outputPath:'img'
              }
          },
          {
              //处理html中的img资源
              test: /\.html$/,
              loader: 'html-loader',
              options: {
                  esModule: false //webpack5中这里也需要设置
              }
              
          },
          {
              //处理其他资源
              exclude: /\.(html|js|css|less|jpg|png|gif)$/,
              loader: 'file-loader',  //url-loader是基于file-loader封装的,多一些压缩功能，比如讲图片转成base64格式
              options: {
                  name: '[name].[hash:10].[ext]',
                  outputPath:'media'
              }
          }
      ]
  },
  plugins: [
      //plugins配置
      new HtmlWebpackPlugin({
        template: "./src/index.html",
        scriptLoading: 'blocking'
      })
  ],
  devServer: {
      //自动打包编译
      contentBase: resolve(__dirname, 'dist'),
      //g压缩
      compress: true,
      //端口号
      port: 8080,
      //第一次运行自动打开浏览器，true默认，'Chrome'谷歌
      open:'Chrome'
  },
  mode:'development'
}

写在后面

学习这两小节遇到了太多因为是新版本才出现的问题了，也看到一些降版本就能解决问题的方法，但是既然出了新版本，那就用新版本不断解决问题，总不能遇到问题就降版本，总有降无可降的时候。
人还是得往前看，过去的已经永远消失在时间长河之中了，过往的人和事早就湮没在岁月中了，记忆也不能保真，只能向前，无可回头。

柒知悉
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Webpack 学习笔记3-webpack 开发环境的基本配置
weixin_50119334的博客
11-02 133
webpack 开发环境的基本配置 创建配置文件 创建文件 webpack.config.js 配置内容如下 /* webpack config.js 是 webpack 的配置文件 作用：指示 webpack 干哪些活（当运行 webpack 指令是，会加载里面的配置） 所有的构建工具都是基于node.js平台运行的，模块化默认采用commonjs src是项目的源代码（基于ES6模块)，webpack（基于commonjs模块） 是写 page 的代码，项目和page是两个方面， */ //re
重学webpack5——开发环境配置
果冻
04-23 673
一、创建配置文件 跟前面一样，先创建 npm init npm i webpack webpack-cli -D 创建webpack配置文件webpack.config.js 作用：指示webpack干哪些活（当你运行webpack指令时，会加载里面的配置） 所有构建工具都是基于node.js平台运行的，模块化默认采用commonjs ...
webpack-study:webpack5学习记录
03-07
第1章：webpack简介1.1webpack是什么webpack是一种前端资源构建工具，一个静态模块打包器（modulebundler）。在webpack看来，前端的所有资源文件（js / json / css / img / less /。 ..）都会作为模块处理。根据该模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）。 1.2webpack五个核心概念1.2.1Entry入口（Entry）指示webpack以哪个文件为入口起点开始打包，分析内部依赖图。1.2.2Output输出（Output）指示webpack打包后的资源包输出到哪里去，以及1.2.3Loader Loader让webpack能够去处理那些非JavaScript文件（webpack本身只理解JavaScript），相当于一个翻译官1.2.4Plugins插件（Plugins）可以用于执行范围更广的
webpack开发环境配置
simple5960的博客
09-27 123
/* 开发环境配置：能让代码运行 运行项目指令： webpack 会将打包结果输出出去 npx webpack-dev-server 只会在内存中编译打包，没有输出 */ const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/js/index.js', outp
Webpack5学习笔记（二）：Webpack开发环境基本配置
哇哇小仔的博客
03-19 322
Webpack5学习笔记（二）：webpack开发环境基本配置 Author: 哇哇小仔 Date: 2021-03-18 Webpack版本：webpack 5.24.4 webpack-cli 4.5.0 第3章：webpack开发环境基本配置 3.1 创建配置文件 创建文件 webpack.config.js 配置内容如下 const {resolve} = require('path'); // node内置核心模块，用来处理路径问题 module.exports
Webpack5 快速入门
很酷的站长的博客
12-06 482
1. webpack 介绍2. webpack 基本使用3. webpack 5大核心概念4. webpack 配置文件5. webpack 运行脚本6. webpack 处理样式资源一、处理 css 资源二、处理 less 资源三、处理 scss 资源四、处理 stylus 资源7. webpack 处理图片资源8. webpack 文件输出目录配置9. webpack 自动清空上次打包文件1. webpack 介绍webpack 官网: https://webpack.js.org一、webpack
webpack5入门教程
温情
09-03 1039
Webpack本身功能比较少，只能处理js资源，一旦遇到其他资源就会报错所以我们学习Webpack，就是主要学习如何处理其他资源Webpack都通过文件进行配置，来增强Webpack的功能负责将 Css 文件编译成 Webpack 能识别的模块会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容, 样式就会以 Style 标签的形式在页面上生效负责将 Less 文件编译成 Css 文件负责将 Sass 文件编译成 css 文件。
webpack的学习复习笔记，包括（webpack使用、webpack配置、webpack服务器等）
weixin_60896381的博客
07-07 679
本文包含 webpack 使用等内容，参考于 黑马PPT 通过自己理解整理，所以这是一篇用于小白新手入门，或者复习使用的笔记，主要包括（webpack使用、webpack配置、webpack服务器等）
webpack入门跟学笔记
lscheng的博客
10-30 1379
学习了两个星期，断断续续终于还是把webpack4学完了，我学习的时候webpack5是已经出来了的，但是大同小异先学webpack4再过渡到webpack5可以了解他们之间的差异，本次学习无项目实战，主要为webpack的配置详解，过程中因为版本问题也遇到了一些错误，在此记录我的学习笔记，这是跟做的版本，即有详细的步骤，后续还会想整理再发布一个知识点版的，大家一起进步！笔记如有错误，欢迎评论指正。 文章目录一、webpack概述1、什么是webpack2、需要提前掌握的内容3、最终掌握的webpack哪些
Vue初学者入门学习笔记(包含实践demo)
最新发布
08-01
Vue初学者入门学习笔记将引导你逐步掌握这个强大的框架。笔记中包括了Vue.js的基础概念、核心特性、组件化开发以及实战应用等方面的知识。 首先，Vue.js的核心概念包括响应式系统、指令（如v-if、v-for）、计算属性...
「Webpack5 专题（三）」开发环境的设置
前端达人
11-08 347
一、前言上一篇讲到如何处理静态资源，本篇将更进一步，介绍如何打造一个基础而不失效率的开发环境。关键词：HtmlWebpackPlugin、Source Map、Dev Server、Hot...
webpack5 开发模式基础配置
周家大小姐
11-15 207
【代码】webpack 开发模式基础配置。
webpack(5) -开发环境
weixin_30474613的博客
04-26 142
使用 source map （仅用于开发环境） 当 webpack 打包源代码时，可能会很难追踪到 error(错误) 和 warning(警告) 在源代码中的原始位置。例如，如果将三个源文件（a.js,b.js和c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会直接指向到bundle.js。你可能需要准确地知道错误来自于哪个源文件...
webpack5入门,根据官方文档简单学习，简单总结
qq_44890362的博客
01-26 890
1.了解webpack 首先，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。 其次它会在内部从一个或多个入口点构建一个依赖图，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。 2.了解基本概念 a.入口(entry):指webpack应该使用哪个模块来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。 b.输出(output):路径webpack
Webpack5快速入门（一）手把手带你打开前端工程化的大门
qq_49900295的博客
04-26 1433
一、Webpack简介 1、webpack是什么? Webpack是一种前端资源构建工具,一个静态模块打包器 在 Webpack看来,前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理 它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源(bundle) 2、Webpack的五个核心概念 Entry 入口指示Webpack以哪个文件为入口七点开始打包,分析构建内部依赖图 Output 输出指示Webpack打包后的...
简单搭建的 webpack 5 开发环境
m0_37602317的博客
07-26 242
简单搭建的 Webpack 5 开发环境 首先进入目标文件夹 # 初始化项目 npm init -y # 安装 webpack npm i webpack webpack-cli --save-dev # 安装插件 npm i html-webpack-plugin clean-webpack-plugin copy-webpack-plugin --save-dev # js 处理 # 安装 babel npm i @babel/core @babel/preset-env @babel/plugin-t
webpack5从入门到精通
丢失的Litte_志伟的博客
02-03 899
这里有你想知道的 webpack5
webpack5基础配置
永远别小看程序员。即使是青铜，说不定背后有个王者在帮他
08-31 600
webpack5基础配置，欢迎指点
手把手教你Webpack手动配置React开发环境
本文档详细阐述了如何手动配置Webpack以创建一个适合React开发的独立环境。对于那些希望深入了解Webpack内部工作原理并提升自己技能的专业开发者而言，这是一个宝贵的指南。React的create-react-app虽然提供了便捷的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值