引言: 自vue2初期版本习惯使用了vue-cli,就再也没手动配置过vue的开发环境,趁今天闲着无聊自己又摸索了一遍Vue的webpack开发环境配置
版本工具 Vue3 + webpack5
- webpack安装
npm i webpack webpack-cli webpack-dev-server
webpack配置-css
入口文件配置:
- 思考为什么在webpack配置中
entry:'./src/index.js'
入口文件为什么一直是./src/index.js, 不能是别的路径?
- css配置
-
插件安装
npm i style-loader css-loader
-
style-loader 用于打包之后的css, 通过style标签插入到页面中
-
css-loader 主要处理url @import引入的路径处理
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
- less配置:
npm i postcss-loader postcss-preset-env less less-loader
- less-loader 用于处理webpack通过这个loader处理文件,具体交给less进行less文件 - postcss-loader 配置不同浏览器高级css特性配置前缀
module: {
rules: [
{
test: /\.less$/,
use: ['style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2, // 用于配置@import导入的less文件再次进行recursive处理
}
}
'postcss-loader',
'less-loader'
]
}
]
}
// postcss.config.js
module.exports = {
plugins: [
'postcss-preset-env'
]
}
webpack配置-image
- image文件处理:
npm i file-loader url-loader
- file-loader 主要是处理图片的路径,从一个文件到文件的路径拷贝
- url-loader 默认会按照bese64图片处理 不会生成image图片文件,配置options.limited会根据值来区分是转换为base64还是生成图片
module: {
rules: [
{
test: /\.(png|jpe?g|svg|gif|webp)$/,
use: [
loader: 'file-loader', 只是对路径的复制
options: {
outputPath: 'images',
filename: '[name].[hash:8].[ext]'
// 或者
name: 'images/[name].[hash:8].[ext]'
}
]
},
// url-loader配置
{
test: /\.(png|jpe?g|svg|gif|webp)$/,
use: [
loader: 'url-loader', 默认都会生成base64
options: {
limit: 10 * 1024, // 10k
outputPath: 'images',
filename: '[name].[hash:8].[ext]'
// 或者
name: 'images/[name].[hash:8].[ext]',
}
]
},
// webpack5 内置asset资源配置
{
test: /\.(png|jpe?g|svg|gif|webp)$/,
type: 'asset/resource', // === file-loader
generator: {
filename: 'images/[name].[hash:8][ext]' // 后缀名中ext包含了.
}
},
{
test: /\.(png|jpe?g|svg|gif|webp)$/,
type: 'asset', // === url-loader
generator: {
filename: 'images/[name].[hash:8][ext]' // 后缀名中ext包含了.
},
parser: {
dataUrlCondition: { // 限制条件设置
maxSize: 10 * 1024
}
}
}
]
}
webpack配置-字体图标
- 字体图标的设置主要是做字体文件路径的移动处理- file-loader
{
test: /\.(ttf|woff2?|eot)$/,
use: {
loader:'file-loader',
options: {
name: 'fonts/[name].[hash:8].[ext]'
}
}
},
webpack配置-JavaScript
- js高级语法的转换
npm i babel-loader @babel/core @babel/preset-env
- babel-loader
- @babel/core 包含了babel转换的核心包
- @babel/preset-env 预设(插件的集合),包含了像
@babel/plugin-transform-arrow-functions,@babel/plugin-block-scoping
等多个插件的集合
{ test: /\.js$/, use: 'babel-loader' }, // babel.config.js配置 module.exports = { presets: [ '@babel/preset-env' ] }
webpack配置-vue
- vue模板文件配置:
npm i vue-loader vue@next @vue/compiler-sfc vueLoaderPlugin
- vue-loader 用于webpack处理.vue结尾的文件
- vue@next 默认安装的是runtime版本的vue3.js
- @vue/compiler-sfc用于处理单文件组件的vue文件编译 相当于vue2版本的vue-template-compiler插件
- vueLoaderPlugin
{
test: /\.vue/,
use: 'vue-loader'
},
plugins: [
new VueLoaderPlugin()
]
- 对于vue的runtime+compiler和runtime-only
- runtime+compiler 包含了对templete的处理,从template转换为render函数处理的过程是通过compiler完成的,包含了 runtime和compiler两个核心文件, 需要使用@vue/compiler-sfc进行模板处理
- runtime-only:不包含对template的转义,对render函数处理直接生成虚拟DOM节点
- vue-loader编译单文件 vue-loader内置了对.vue文件的转义和热更新的功能。