2024年前端最全Vue进阶（五十一）： vue-cli 脚手架 webpack，程序员如何应对中年危机

2401_84411522

于 2024-05-06 17:47:49 发布

阅读量829

点赞数 11

分类专栏：程序员文章标签：前端 vue.js webpack

本文链接：https://blog.csdn.net/2401_84411522/article/details/138502774

版权

程序员专栏收录该内容

213 篇文章 0 订阅

订阅专栏

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

var vueLoaderConfig = require(‘./vue-loader.conf’)
// 此函数是用来返回当前目录的平行目录的路径，因为有个’…’
function resolve (dir) {
return path.join(__dirname, ‘…’, dir)
}

module.exports = {
entry: {
// 入口文件是src目录下的main.js
app: ‘./src/main.js’
},
output: {
// 路径是config目录下的index.js中的build配置中的assetsRoot，也就是dist目录
path: config.build.assetsRoot,
// 文件名称这里使用默认的name也就是main
filename: ‘[name].js’,
// 上线地址，也就是真正的文件引用路径，如果是production生产环境，其实这里都是 ‘/’
publicPath: process.env.NODE_ENV === ‘production’
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
// resolve是webpack的内置选项，顾名思义，决定要做的事情，也就是说当使用 import “jquery”，该如何去执行这件事
// 情就是resolve配置项要做的，import jQuery from “./additional/dist/js/jquery” 这样会很麻烦，可以起个别名简化操作
extensions: [‘.js’, ‘.vue’, ‘.json’], // 省略扩展名，也就是说.js,.vue,.json文件导入可以省略后缀名，这会覆盖默认的配置，所以要省略扩展名在这里一定要写上
alias: {
//后面的 $符号指精确匹配，也就是说只能使用 im p or t vu e j s f ro m " vu e " 这样的方式导入 vu e . es m . j s 文件，不能在后面跟上 vu e / vu e . j s^{'} vu e$ ’: ‘vue/dist/vue.esm.js’,
// resolve(‘src’) 其实在这里就是项目根目录中的src目录，使用 import somejs from “@/some.js” 就可以导入指定文件，是不是很高大上
‘@’: resolve(‘src’)
}
},
// module用来解析不同的模块
module: {
rules: [
{
test: /.(js|vue) $KaTeX parse error: Expected 'EOF', got '}' at position 556: \dots } }̲, { \dots$ /,
// 对vue文件使用vue-loader，该loader是vue单文件组件的实现核心，专门用来解析.vue文件的
loader: ‘vue-loader’,
// 将vueLoaderConfig当做参数传递给vue-loader,就可以解析文件中的css相关文件
options: vueLoaderConfig
},
{
test: /.js $KaTeX parse error: Expected 'EOF', got '}' at position 181: \dots'test')] }̲, { \dots$ /,
// 对图片相关的文件使用 url-loader 插件，这个插件的作用是将一个足够小的文件生成一个64位的DataURL
// 可能有些老铁还不知道 DataURL 是啥，当一个图片足够小，为了避免单独请求可以把图片的二进制代码变成64位的
// DataURL，使用src加载，也就是把图片当成一串代码，避免请求，神不神奇？？
loader: ‘url-loader’,
options: {
// 限制 10000 个字节一下的图片才使用DataURL
limit: 10000,
name: utils.assetsPath(‘img/[name].[hash:7].[ext]’) // 这个函数执行结果是 /img/[name].[hash:7].[ext]
// 不知道吧 name 设置成 /img/[name].[hash:7].[ext] 意欲何为，猜测应该是输出图片的路径或者是解析图片的路径
}
},
{
test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
// 字体文件处理，和上面一样
loader: ‘url-loader’,
options: {
limit: 10000,
name: utils.assetsPath(‘fonts/[name].[hash:7].[ext]’)
}
}
]
}
}


(1)下面是`vue-loader.conf.js`配置文件的解释，如果你看过我关于`utils`的解释，下面很好懂

// utils配置文件用来解决css相关文件loader
var utils = require(‘./utils’)
// 生产和开发环境的相关属性
var config = require(‘…/config’)
// 判断当前是否生产环境
var isProduction = process.env.NODE_ENV === ‘production’

module.exports = {
// 调用utils配置文件中的cssLoaders方法，用来返回配置好的css-loader和vue-style-loader
loaders: utils.cssLoaders({