我们使用webpack 构建的项目，会遇到在 HTML 使用图片，但图片无法正常显示的现象。这是因为 webpack 或者 rollup 构建的项目都是一切皆对象，不管是 css 或者 图片在 js 中都会被看做是模块，故需要进行引入才能使用。
webpack 在webpack.config.js 添加对相关文件格式的处理插件（vue-cli / create-react-app 会在默认完成以下设置）
// webpack.config.js
module.exports = {
module:{
rules: [
{
test: /\.(jpg|png|gif)$/,
use: {
loader: "url-loader",
options: {
name: "[name]_[hash].[ext]",
optputPath: "imges/",
limit: 2080 // 小于该值的 图片进行 base64编码
}
}
}
]
}
}
commonjs 方式引入 模块
let srcImg = require("./imges/xxx.png"); // 引入后，只需使用 srcImg
//比如：
<img :src = srcImg />
es6 模块引入 模块
import srcImg from "./imges/xxx.png"
<img :src = srcImg>
commonjs 和 es6 模块的区别
commonjs （let xxx = require("xxx")）
-
commonjs 是运行时进行对模块的加载，故无法对实现tree-shaking。
-
commonjs 是一种值的拷贝（虽为浅拷贝，但也是一种拷贝，而不是指针地址的赋值指向，这一点就和 es6 有直接的区别，这一点也是运行时加载的原因）。
-
commonjs 因为是值的拷贝，故被赋值后的变量是可以重新被赋值的（可以接受新的值），因为值拷贝的原因，也导致一经赋值后，原来的赋值对象的值发生改变了，也不会影响到 被赋值的变量的现有值（排除浅拷贝的原因引起同步改变）。
es6模块 ( import xxx from "xxx" )
-
es6 模块是 编译时加载，之所以能实现编译时就进行加载，主要是 es6 模块是 地址引用指向，在编译是就已经固定好地址的指针，可以理解为 在编译时 该模块就知道了 模块将要指向的目标地址了。
-
es6 模块因为是 地址引用，故规定 es6 模块的值是 read-only ，只可读，不可重新赋值，导致指针地址的改变（排除对象引起的地址引用从而导致对象内部值可重新赋值的现象）。
-
es6 模块每一个文件中 import("xxx") 都是指向 同一个地址的，只需要原文件发生改变，那么所有的文件引用了这个 import("xxx") 都会发生改变。
-
在编程上 es6 模块 只需在 文件的开头 import 一遍就行了，后继的重复 import 是无效的。 而 commonjs 是不一样的，每一个require("xxx") 都是独立的，不会产生联系的，移除的 require("xxx") 不会印象到其他的地方的 require("xxx")。
网友评论