vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Webpack打包图片

Webpack打包图片-js-vue 案例解析

作者：coder!mq

在开发中我们会有各种各样的模块依赖,这些模块可能来自于自己编写的代码,也可能来自第三方库,本文给大家介绍Webpack打包图片-js-vue的相关知识,感兴趣的朋友跟随小编一起看看吧

一、Webpack打包图片

1.加载图片资源的准备

为了演示我们项目中可以加载图片，我们需要在项目中使用图片，比较常见的使用图片的方式是两种：

2.认识asset module type

我们当前使用的webpack版本是webpack5：

资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：

3.asset module type的使用

比如加载图片，我们可以使用下面的方式：

{
    test: /\.(png|svg|jpg|jpeg|gif)$/i,
    type: "asset/resource"    
}

但是，如何可以自定义文件的输出路径和文件名呢？

output: {
    filename: "js/bundle.js",
    path: path.resolve(__dirname, "./dist"),
    assetModuleFilename: "img/[name].[hash:6][ext]"    
}
{
    test: /\.(png|svg|jpg|jpeg|gif)$/i,
    type: "asset/resource",
    generator: {
        filename: "img/[name].[hash:6][ext]"
    }    
}

我们这里介绍几个最常用的placeholder：

4.url-loader的limit效果

开发中我们往往是小的图片需要转换，但是大的图片直接使用图片即可

我们需要两个步骤来实现：

module.exports = {
    rules: [
        {
            test: /\.(png|svg|jpg|jpeg|gif)$/i,
            type: "asset",
            generator: {
                filename: "img/[name].[hash:6][ext]"
            },
            parser: {
                dataUrlCondition: {
                    maxSize: 100 * 1024
                }
            }
        }
    ]
}

二、babel

1.为什么需要babel

事实上，在开发中我们很少直接去接触babel，但是babel对于前端开发来说，目前是不可缺少的一部分：

那么，Babel到底是什么呢？

2.babel命令行的使用

babel本身可以作为一个独立的工具（和postcss一样），不和webpack等构建工具配置来单独使用。

如果我们希望在命令行尝试使用babel，需要安装如下库：

npm install -D @babel/core @babel/cli

使用babel来处理我们的源代码：

npx babel src --out-dir dist

3.babel插件的使用

比如我们需要转换箭头函数，那么我们就可以使用箭头函数转换相关的插件：

npm install @babel/plugin-transform-arrow-functions -D
npx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions

查看转换后的结果：我们会发现 const 并没有转成 var

npm install @babel/plugin-transform-block-scoping -D 
npx babel src --out-dir dist --plugins=@babel/plugin-transform-block-scoping
						,@babel/plugin-transform-arrow-functions

4.babel的预设preset

但是如果要转换的内容过多，一个个设置是比较麻烦的，我们可以使用预设（preset）：

后面我们再具体来讲预设代表的含义；

安装@babel/preset-env预设：

npm install -D @babel/preset-env

执行如下命令：

npx babel src --out-dir dist --presets=@babel/preset-env

5.babel-loader

在实际开发中，我们通常会在构建工具中通过配置babel来对其进行使用的，比如在webpack中。

那么我们就需要去安装相关的依赖：

如果之前已经安装了@babel/core，那么这里不需要再次安装；

npm install babel-loader -D

我们可以设置一个规则，在加载js文件时，使用我们的babel：

module.exports = {
	module: {
		rules: [
			{
				test: /\.m?js$/,
				use: {
					loader: "babel-loader"
				}
			}
		]
	}
}

6.babel-preset

如果我们一个个去安装使用插件，那么需要手动来管理大量的babel插件，我们可以直接给webpack提供一个preset，webpack会根据我们的预设来加载对应的插件列表，并且将其传递给babel。

比如常见的预设有三个：

安装preset-env：

npm install @babel/preset-env
module.exports = {
    module: {
        rules: [
			{
				test: /\.m?js$/,
				use: {
					loader: "babel-loader",
                    options: {
                        presets: [
                            ["@babel/preset-env"]
                        ]
                    }
				}
			}
		]
    }
}

三、加载Vue文件

1.编写App.vue代码

在开发中我们会编写Vue相关的代码，webpack可以对Vue代码进行解析：

接下来我们编写自己的App.vue代码；

<template>
  <h2>{{ title }}</h2>
</template>
<script>
export default {
  data() {
    return {
      title: "我是标题"
    }
  }
}
</script>

2.App.vue的打包过程

我们对代码打包会报错：我们需要合适的Loader来处理文件。

这个时候我们需要使用vue-loader：

npm install vue-loader -D

在webpack的模板规则中进行配置：

{
    test: /\.vue$/,
    loader: "vue-loader"
}

3.@vue/compiler-sfc

打包依然会报错，这是因为我们必须添加@vue/compiler-sfc来对template进行解析：

npm install @vue/compiler-sfc -D

另外我们需要配置对应的Vue插件：

const { VueLoaderPlugin } = require('vue-loader/dist/index')
module.exports = {
    module: {},
    plugins: [
        new VueLoaderPlugin()
    ]
}

重新打包即可支持App.vue的写法

另外，我们也可以编写其他的.vue文件来编写自己的组件；

四、resolve模块解析

1.resolve模块解析

resolve用于设置模块如何被解析：

webpack能解析三种文件路径：

绝对路径

相对路径

模块路径

2.文件还是文件夹

如果是一个文件：

如果是一个文件夹：

3.extensions和alias配置

extensions是解析到文件时自动添加扩展名：

默认值是 [‘.wasm’, ‘.mjs’, ‘.js’, ‘.json’]；所以如果我们代码中想要添加加载 .vue 或者 jsx 或者 ts 等文件时，我们必须自己写上扩展名；

另一个非常好用的功能是配置别名alias：

module.exports = {
  resolve: {
    extensions: [".js", ".json", ".vue", ".jsx", ".ts", ".tsx"],
    alias: {
      utils: path.resolve(__dirname, "./src/utils")
    }
  },
}

到此这篇关于Webpack打包图片-js-vue的文章就介绍到这了,更多相关Webpack打包图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文