vue开发
现在项目里安装vue：
npm install vuevue的文件后缀是.vue
webpack不认识vue的话就接着安插件
npm install vue-loader -D这是.vue文件：
<template>
<div>
<h2 class="title">{{title}}</h2>
<p class="content">
我是内容
</p>
</div>
</template>
<script>
export default {
data(){
return{
title:"我是vue的标题"
}
}
}
</script>
<style>
.title_vue{
color:red;
font-size: 100px;
}
.content{
color:yellow;
font-size: 30px;
}
</style>也要在配置文件里添加插件帮助我们做额外的事情
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader/dist/index');
module.exports = {
// 设置打包的模式
mode: 'development',
// 设置入口文件
entry: './src/component/cpns.js',
// 设置输出
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
// assetModuleFilename: 'abc.png'
},
// 配置模块规则
module: {
rules: [
{
test: /\.css$/,
use: [
"style-loader",
"css-loader",
"postcss-loader"
]
},{
test: /\.less$/,
use:[ "style-loader","css-loader","less-loader"]
},
{
test:/\.(png|jpe?g|svg|gif)$/,
type: 'asset/resource',
//打包两张图片，并且这两张图,
//将图片进行base64的编码，并且直接编码后的源码放到打包的js文件中
//type:"asset/inline"
parser:{
dataUrlCondition:{
maxSize: 60 * 1024
}
},
generator:{
//不写死，使用占位符
//name:指向原来的图片名称
//ext：扩展名
//hash:webpack生成的hash值
filename:"img/[name]_[hash:8][ext]"
}
}
,{
test:/\.js$/,
use:[
{
loader:"babel-loader",
options:{
plugins:[
"@babel/plugin-transform-arrow-functions",
]
}
}
]
},
{
test:/\.vue$/,
loader:"vue-loader"
}
]
},
plugins:[
new VueLoaderPlugin()
]
};使用是这样：
import { createApp } from 'vue'
import Hello from './vue_demo/Hello.vue'
createApp(Hello).mount('#app')打包完运行到浏览器就是这样：
@vue/compiler-sfc
有的插件需要手动安装,安装这个插件以对template进行解析
npm install @vue/compiler-sfc -D配置完对应的vue插件后就可以支持App.vue的写法了
我们也可以编写其他的.vue文件来编写自己的组件
resolve模块解析
resolve用于设置模块如何被解析：
在开发中我们会有各种各样的模块依赖，这些模块可能来自于自己编写的代码，也可能来自第三方库
resolve可以帮助webpack从每个require/import语句中，找到需要引入到合适的模块代码
webpack使用enhanced-resolve来解析文件路径
webpack能解析三种文件路径
绝对路径
由于已经获得文件的绝对路径，因此不需要再做进一步的解析
相对路径
在这种情况下，使用import或者require的资源文件所处的目录被认为是上下文目录
在import/require中给定的相对路径会拼接此上下文路径来生成模块的绝对路径
模块路径
在resolve.module中指定的所有目录检索模块
默认值是[‘node_modules’]，所以默认会从node_modules中查找文件
我们可以通过设置别名的方式来替换初识模块路径，具体后面讲解alias的配置
extensions和alias配置
extensions是解析到文件时自动添加扩展名
默认值是[ '.wasm','.mjs','.js','.json' ];
如果代码中想要添加加载.vue或者jsx或者ts等文件时，我们必须要自己写上扩展名
我们还可以给它配置别名，给常见的路径起一个别名
resolve:{
extensions:[".js",".json",".vue",".jsx",".tsx"],
alias:{
utils:path.resolve(__dirname,"./src/utils")
}
},配置：
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader/dist/index');
module.exports = {
// 设置打包的模式
mode: 'development',
// 设置入口文件
entry: './src/main.js',
// 设置输出
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
// assetModuleFilename: 'abc.png'
},
resolve:{
extensions:[".js",".json",".vue",".jsx",".tsx"]
},
// 配置模块规则
module: {
rules: [
{
test: /\.css$/,
use: [
"style-loader",
"css-loader",
"postcss-loader"
]
},{
test: /\.less$/,
use:[ "style-loader","css-loader","less-loader"]
},
{
test:/\.(png|jpe?g|svg|gif)$/,
type: 'asset/resource',
//打包两张图片，并且这两张图,
//将图片进行base64的编码，并且直接编码后的源码放到打包的js文件中
//type:"asset/inline"
parser:{
dataUrlCondition:{
maxSize: 60 * 1024
}
},
generator:{
//不写死，使用占位符
//name:指向原来的图片名称
//ext：扩展名
//hash:webpack生成的hash值
filename:"img/[name]_[hash:8][ext]"
}
}
,{
test:/\.js$/,
use:[
{
loader:"babel-loader",
options:{
plugins:[
"@babel/plugin-transform-arrow-functions",
]
}
}
]
},
{
test:/\.vue$/,
loader:"vue-loader"
}
]
},
plugins:[
new VueLoaderPlugin()
]
};如果是一个文件的话：
文件具有扩展名则直接打包文件
否则使用resolve.extensions选项作为文件扩展名解析
如果是一个文件夹的话：
会在文件夹中根据resolve.mainFiles配置选项中指定的文件顺序查找
resolve.mainFiles的默认值是['index']
再根据resolve.extensions来解析扩展名
