|
@@ -4,7 +4,7 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
|
|
|
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
|
|
//const { VueLoaderPlugin } = require('vue-loader/dist/index');
|
|
|
const { VueLoaderPlugin } = require('vue-loader');
|
|
|
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
|
|
+
|
|
|
|
|
|
module.exports={
|
|
|
entry:{
|
|
@@ -12,8 +12,7 @@ module.exports={
|
|
|
},
|
|
|
output:{
|
|
|
filename:"[name].js",
|
|
|
- path:path.resolve(__dirname,"./dist"),
|
|
|
- publicPath: '/', // 默认路径(根据部署环境调整)
|
|
|
+ path:path.resolve(__dirname,"./dist")
|
|
|
},
|
|
|
resolve: {
|
|
|
alias: {
|
|
@@ -24,21 +23,24 @@ module.exports={
|
|
|
rules:[
|
|
|
{
|
|
|
test: /\.html \)/,
|
|
|
- use: [{
|
|
|
- loader:'html-loader',
|
|
|
- options: {
|
|
|
- sources: {
|
|
|
- list: [
|
|
|
- { tag: 'img', attribute: 'src', type: 'src' }
|
|
|
- ]
|
|
|
- }
|
|
|
+ use: [
|
|
|
+ {
|
|
|
+ loader: 'html-loader',
|
|
|
+ options: { // [!code focus]
|
|
|
+ // 配置 HTML 中资源引用的处理规则
|
|
|
+ sources: { // [!code focus]
|
|
|
+ list: [ // [!code focus]
|
|
|
+ { tag: 'img', attribute: 'src', type: 'src' }, // 处理 <img src>
|
|
|
+ { tag: 'a', attribute: 'href', type: 'src' } // 处理 <a href> // [!code focus]
|
|
|
+ ] // [!code focus]
|
|
|
+ } // [!code focus]
|
|
|
+ } // [!code focus]
|
|
|
}
|
|
|
- }]
|
|
|
+ ]
|
|
|
},
|
|
|
{
|
|
|
test:/\.css$/i,
|
|
|
- // use:["style-loader","css-loader"],
|
|
|
- use:[MiniCssExtractPlugin.loader, ,"css-loader"],
|
|
|
+ use:["style-loader","css-loader"],
|
|
|
},
|
|
|
{
|
|
|
test:/\.vue$/,
|
|
@@ -58,7 +60,7 @@ module.exports={
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
- test:/\.(png|jpe?g|gif|svg|webp)$/i,
|
|
|
+ test:/\.(png|jpe?g|gif|svg)$/i,
|
|
|
// use:[{
|
|
|
// loader:"file-loader",
|
|
|
// options:{
|
|
@@ -69,12 +71,11 @@ module.exports={
|
|
|
// }]
|
|
|
type: 'asset/resource',
|
|
|
generator:{
|
|
|
- // filename: "[name].[ext]",
|
|
|
- filename: 'assets/[hash][ext][query]' // 指定输出路径
|
|
|
+ filename: "[name].[ext]",
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
- test:/\.(woff2?|eof|ttf|otf)$/i,
|
|
|
+ test:/\.(woff2?|eof|ttf)$/i,
|
|
|
// use:[{
|
|
|
// loader:"file-loader",
|
|
|
// options:{
|
|
@@ -85,8 +86,7 @@ module.exports={
|
|
|
// }]
|
|
|
type: 'asset/resource',
|
|
|
generator:{
|
|
|
- // filename: "./font/[name].[ext]",
|
|
|
- filename: 'font/[hash][ext][query]'
|
|
|
+ filename: "./font/[name].[ext]",
|
|
|
}
|
|
|
},]
|
|
|
},
|
|
@@ -100,9 +100,6 @@ module.exports={
|
|
|
filename:"index.html",
|
|
|
chunks:['index'],
|
|
|
}),
|
|
|
- new MiniCssExtractPlugin({
|
|
|
- filename: 'css/[name].[contenthash:8].css' // 指定 CSS 输出路径
|
|
|
- })
|
|
|
],
|
|
|
// 优化配置(如代码拆分)
|
|
|
optimization: {
|