webpack打包全过程以及遇到图片不显示问题解决方法_webpack图片 ...

一、Webpack

一般需要构建工具处理的几种情况
代码压缩
将js、css代码混淆压缩，代码体积更小，运行更快
编译语法
编写CSS时要使用less,Sass，编写js时使用ES6,TypeScript等，这样标准目前无法兼容浏览器，因此需要构建工具编译，
模块化
css和js模块化无法兼容浏览器，为了方便开发环境可以使用既定的模块语法，需要构建工具将模块化语法编译为浏览器可识别形式，使用webpack、Rollup等处理JS模块化。
1、运用场景

1、vue,angular,react都可以通过webpack构建
2、全部可访问页面数目不超过500个
2、安装配置
 
终端运行
 步骤
 npm 
npm i webpack webpack-cli --save-dev
#  npm i xxx --save
#  npm i xxx --save-dev
#  --save 会把 依赖包名称添加到package.json文件dependencies键下
#  --save-dev 则添加到package.json文件devdependencies键下
#  dependencies时运行时依赖
#  devDependencies时开发时的依赖
yarn add jquery #表示通过依赖方式安装jquery
yarn add webpack -D # -D表示通过开发依赖安装
二、案例演示
 
1、需要安装的工具
 
#可以实现同时打包/(复制)index.html到达dist目录，并自动就引入main.js文件
yarn add html-webpack-plugin -D
#可以实现随时修改源文件，浏览器随时看到修改后的效果无需反复打包
yarn add webpack-dev-server
#不同的代码内容 (less/scss/ES6(ES7)/image/css等等)需**要webpack找到不同的loader(装载器)实现转码、编译、降级处理。**
yarn add css-loader style-loader -D
# loader-安装配置图片相关loader
yarn add url-loader file-loader -D
# loader-应用less文件
yarn add less-loader less -D
2.配置准备
 

 创建src文件并在里面添加相应的css,js,img文件
 
 在src同层编写webpack.config.js，babel.config.js，index.html,app.js、work.js、
 修改package.json， 
app.js
 
import './css/1.css'
import './css/2.less'
let app = require("./work");
work.js
 
let age = 18
let getname = () => {
    return 'ssss'
webpack.config.js内容
 
const ph = require('path')  //路径加载
const HtmlWebpackPlugin = require("html-webpack-plugin") //可以实现同时打包/(复制)index.html到达dist目录
module.exports = {
	module:{
		rules: [
				* 安装工具yarn add css-loader style-loader -D
				* . 现在重新 实时打包 npm run serve发现 css文件的样式已经生效
				test: /\.css$/,  
				use: ["style-loader", "css-loader"],
				*	yarn add url-loader file-loader -D
				*	loader说明：
				*	只配置url-loader，file-loader不用配置，条件满足后url-loader会自动调用file-loader执行
				*	 webpack要将图片进行打包，需要安装儒url-loader加载器，加载器有个默认的设置选项limit：8196，当你的图片大小不超过8kb的时候，打包的时候会生成base64位的图片地址
				// 图片处理loader配置
				test: /\.(png|jpg|gif)$/, // 正则匹配图片
				use: [
					loader: "url-loader",
					options: {
					// limit:设定大小阀值
					// a. 被处理图片大小 大于该阀值，就通过物理文件重新生成该图片
					// b. 被处理图片大小 小于等于该阀值，就把图片变为字符串(嵌入到应用文档中，好处是节省一个http资 源)
					  limit: 8196,
					  // 做配置，使得生成的物理图片被存储在dist/image里边
					  outputPath: "image",
					  //通过在url-loader的options中增加esModule:false
					  esModule: false,
				type: 'javascript/auto',
			* 安装依赖包， yarn add less-loader less -D
			//less处理loader配置
				test: /\.less$/,
				* 说明：
				* less样式文件处理需要3个loader，具体为上述，它们有严格的顺序，它们有做工作交接
				* 它们执行的顺序是颠倒的(less>css>style)
				* style-loader：负责生成style标签，把css样式体现出来，之后该标签嵌入到应用文档中去
				* css-loader：使得css文件可以通过import引入，并合并到main.js中
				* less-loader: 该loader负责把less文件内容转变为 css内容
				use: ["style-loader","css-loader","less-loader"]
			* 安装依赖包,yarn add babel-loader @babel/core @babel/preset-env -D
			// es6 等高级内容对应的loader配置
				test: /\.js$/,
			// 给mode_modules目录做排除处理，不做处理
				exclude: /node_modules/,
				use: "babel-loader",
	* 模式选择
	* production：生成模式 打包的文件是优化压缩的
	* development: 开发模式 打包的文件有适当的回车、空白、注释
	* 前期使用development，羡慕开发完毕即将上线就用production
	mode: 'development', 
	* 安装webpack-dev-server工具可使用
	* host:
	devServer: {
		host: "127.0.0.1",
		port: 10086,
		open: true,
		compress: true,
	entry: ph.resolve('./src/app.js'), // 绝对路劲 
	output: { path: ph.resolve('./dist'), // 配置出口目录 
	filename: "main.js" // 配置出口文件名称 
	plugins: [
	  * 安装工具 yarn add html-webpack-plugin -D
	  * index.html不用映入任何js文件
	  * 做物理打包npm run build(编译生成模板文件了，并且自动引入main.js文件)
		new HtmlWebpackPlugin({
			template: ph.resolve("./index.html"),
babel.config.js
 
在项目根目录创建babel.config.js文件，配置如下
 作用: 使得babel-loader可以找到preset做代码降级处理 
module.exports = {
   presets: ['@babel/preset-env']
index.html
 
<!DOCTYPE html> 
		<meta charset="UTF-8"> 
		<title>test</title> 
	</head> 
		<div>test</div>
		  <li>涂料</li>
		  <li>花瓣</li>
		<div id="a"></div>
	</body> 
</html>
package.json
 
 //需要手动添加
  "scripts": {
    "build": "webpack",
    "serve": "webpack-dev-server"
  //自动生成
  "devDependencies": {
    "@babel/core": "^7.17.8",
    "@babel/preset-env": "^7.16.11",
    "babel-loader": "^8.2.4",
    "css-loader": "^6.7.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "less": "^4.1.2",
    "less-loader": "^10.2.0",
    "style-loader": "^3.3.1",
    "url-loader": "^4.1.1",
    "webpack": "^5.71.0",
    "webpack-cli": "^4.9.2"
  //自动生成
  "dependencies": {
    "jquery": "^3.6.0",
    "webpack-dev-server": "^4.7.4"
3、资源文件(src)准备
 
one.css
 
li {
 color: red;
#one {
 width: 150px;
 height: 150px;
 background: url("../img/a.jpg");
 background-size: 100% 100%;
ss.less
 
       border: 1px solid red;
 右边为终端
 1、项目配置和资源准备完成
 在终端运行 
npm run build #创建
npm run serve #搭建服务
#**这两个缺一不可！！！**
webpack打包图片不显示问题
 
1.jpg大小为3.1kb，file-loader中配置的limit是8192，小于limit时，一切正常的话，dist文件夹下不会生成图片文件，应该在src中以base64字符串填充。大于limit时，会生成图片文件，src中以路径填充。
 
 解决方法为添加 esModele:false,type:‘javascript/auto’ 这两个。
 具体详情请点击查看url-loader打包后出现图片打不开、资源重复
        test: /\.(css|less)$/,
        exclude: path.resolve(__dirname, 'node_modules'),
        use: ['style-loader', 'css-loader', 'less-loader']
打包后在dist目录的发现没有css文件。这是因为css
                                    最近在搭建公司的前端组件库, vue写的, webpack打包后, 在项目中引用组件库
其中有个组件引用了静态图片资源, 然而打包后在项目中引用该组件的图片就不显示了
遇到了以下若干问题, 小小记录一下~
                                    vue项目打包后放到服务器上,配置好后,发现页面可以正常访问,访问后端接口也没有问题,但是网页登录界面的背景图片显示不出来.查看控制台也没有报错。错误原因是Webpack打包之后，在webpack.base.conf.js中会有图片大小限制配置{.*)?$/,}我们这里将limit注掉之后，重新打包，图片便可以显示。
打包不报错，但是浏览器打开不显示图片，而且打包之后dist文件夹下显示两张图片，一张可以打开，一张打不开。生成两张图片可能是css-loader版本不同，对引入背景图片的url的解析方式不一样，导致生成了两张图片（一个是正常由file-loader解析生成，一个仅由css-loader解析引入）
    1.在webpack5中file-loader和url-loader已经被弃用，要使用它俩时，将模块类型设置为Javascri...
                                    在看webpack视频教学时因为老师的版本和自己的版本不一致导致在打包处理图片是一直显示不了图片，查询了一些技术论坛后才解决了这个困扰我好多天的问题
直接上源代码
看看我的目录
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                                    从 webpack book 的 Loading Assets 一章中延申出来。
改善前端项目体验中，很重要的点就是静态资源的优化。它是由于浏览器客户端在同一时间针对同一 域名 的请求有一定资源限制。如果资源过多、过大就会使得页面卡顿。
静态资源中，又以图片最为典型。那么我们在开发中该如何处理图片呢？
webpack 是前端较为常用的手脚架工具，本文以它为例。
主要分为 开发 、 打包 、 优化 三个方面来介绍
示例地址: webpack demo 
webpack 可以用使用url-loader  将静态图片转化为 base64 编码的字符串，并内联在对应的脚本中。大幅度地较少了页面
项目在开发环境下工作正常，当打包后图片不见了，检查元素后发现路径出错了。
图片路径是这样：background: url(/static/img/bg_camera_tip.bd37151.png)，但该路径下文件并不存在。
打包后文件目录如下：
可以看到背景图片的路径应该是../../static而实际却是/static，找到原因后就好解决了
查看build目录下webpack.base.conf.js的配置，图片文件会经过url-loader处理。
 module: {
  rules: [
    test: /\.(png|jpe?
                                    file-loader加载遇到的狗血问题-webpack4.x
最近在学习vue，看的b站视频学习，b站里面用的是webpack3.6，而我用的是webpack4.43.0版本的，在webpack4.x版本和3.x版本还是挺有区别的，比如配置，打包方式就不一样。在学习到图片文件的打包配置时，遇到了狗血问题，现阶段我还是说一下webpack4.x的操作步骤，怎么样执行到打包图片文件这个地方，遇到了什么问题？（当图片大于limit限制，启动file-loader加载生成文件，生成成功但是页面没有效果，同时配置f