共计 3156 个字符,预计需要花费 8 分钟才能阅读完成。
前言
我们有时候因为一些特殊需求,可能需要将 js/css/img 等资源文件都打包到根路径下,但 vue-cli3.0 的路径配置中仅有 assetsDir 配置项能够配置所有的静态文件所在的文件夹,并不能针对 css/js/img 等资源文件分别来做设置,那么请看我如何尝试的吧!
分析
众所周知,vue-cli3.0 使用了 webpack 进行打包处理,那么我们是否可以拿到目前打包默认的一些 webpack 配置,并在这些配置中找到一些蛛丝马迹,从而更改配置来实现对打包路径的更改呢?
好在 vue-cli3.0 提供了这样的功能!
我假设您已经安装了 vue-cli3.0,那么打开命令行,运行一下命令:
vue ui
这个命令将会启动一个页面,用来简化开发过程中的一系列操作。
我们先导入当前项目(自己摸索下,此处不展开详说)。
我们进入 < 任务 > 页面,点击 inspect 选项卡,并点击运行按钮,将会得到该项目下所有的 webpack 配置项。
将这个配置复制到我们的编辑器中,然后我们查找路径 ’js/’, ‘css/’, ‘img/’,将会看到这些路径所配置的一些地方,我的项目中这些配置在以下部分:
output 配置为:
output: {
path: 'xxx',
filename: 'js/[name].[contenthash:8].js',
publicPath: '',
chunkFilename: 'js/[name].[contenthash:8].js'
}
plugin 配置为:
/* config.plugin('extract-css') */
new MiniCssExtractPlugin(
{filename: 'css/[name].[contenthash:8].css',
chunkFilename: 'css/[name].[contenthash:8].css'
}
),
loader 配置为:
/* config.module.rule('images') */
{test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
use: [/* config.module.rule('images').use('url-loader') */
{
loader: 'url-loader',
options: {
limit: 4096,
fallback: {
loader: 'file-loader',
options: {name: 'img/[name].[hash:8].[ext]'
}
}
}
}
]
},
/* config.module.rule('svg') */
{test: /\.(svg)(\?.*)?$/,
use: [/* config.module.rule('svg').use('file-loader') */
{
loader: 'file-loader',
options: {name: 'img/[name].[hash:8].[ext]'
}
}
]
},
// 其他类型资源的 loader 等等
那么问题就简单了,我们更改掉这些 webpack 配置就可以了。
更改 webpack 配置
需要更改的 webpack 相关配置如下:
js 路径配置更改
js 路径更改 output 配置即可,output 配置在 configureWebpack 配置项中进行更改,因为 vue.config.js 中对于 configureWebpack 选项的配置将会被 merge 到 webpack 配置中,所以更改该项配置即可,如下:
module.exports = {
configureWebpack: config => {
// js output config
config.output.filename = '[name].[contenthash:8].js'
config.output.chunkFilename = '[name].[contenthash:8].js'
},
}
更改 MiniCssExtractPlugin 插件配置
更改该配置需要先安装 MiniCssExtractPlugin 插件到开发依赖中,如下:
npm install --save-dev mini-css-extract-plugin
# 或者
yarn add mini-css-extract-plugin --dev
然后在 vue.config.js 文件中添加相关配置到 chainWebpack 即可,如下所示:
module.exports = {
chainWebpack: config => {
// css output config
let miniCssExtractPlugin = new MiniCssExtractPlugin(
{filename: '[name].[contenthash:8].css',
chunkFilename: '[name].[contenthash:8].css'
}
)
config.plugin('extract-css').use(miniCssExtractPlugin)
},
}
更改各种资源 loader 配置
更改该配置仍然需要将相关配置添加到 chainWepack 配置项中,如下:
module.exports = {
chainWebpack: config => {
// image output config
config.module.rule('images')
.test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
.use('url-loader')
.loader('file-loader')
.options({name: '[name].[hash:8].[ext]'
})
config.module.rule('svg')
.test(/\.(svg)(\?.*)?$/)
.use('file-loader')
.loader('file-loader')
.options({name: '[name].[hash:8].[ext]'
})
},
}
结语
总的配置项如下所示:
module.exports = {
configureWebpack: config => {
// js output config
config.output.filename = '[name].[contenthash:8].js'
config.output.chunkFilename = '[name].[contenthash:8].js'
},
chainWebpack: config => {
// css output config
let miniCssExtractPlugin = new MiniCssExtractPlugin(
{filename: '[name].[contenthash:8].css',
chunkFilename: '[name].[contenthash:8].css'
}
)
config.plugin('extract-css').use(miniCssExtractPlugin)
// image output config
config.module.rule('images')
.test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
.use('url-loader')
.loader('file-loader')
.options({name: '[name].[hash:8].[ext]'
})
config.module.rule('svg')
.test(/\.(svg)(\?.*)?$/)
.use('file-loader')
.loader('file-loader')
.options({name: '[name].[hash:8].[ext]'
})
},
}
这时,在运行 inspect 检查 webpack 配置,即可看到相关路径前的 css/,js/,img/ 等前缀已经消失,快快打包尝试吧!