123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102 |
- const path=require('path');
- const { CleanWebpackPlugin } = require('clean-webpack-plugin');
- //const { HtmlWebpackPlugin } = require("html-webpack-plugin");
- const HtmlWebpackPlugin = require('html-webpack-plugin');
- //const { VueLoaderPlugin } = require('vue-loader/dist/index');
- const { VueLoaderPlugin } = require('vue-loader');
- module.exports={
- entry:{
- index:"./index.js",
- },
- output:{
- filename:"[name].js",
- path:path.resolve(__dirname,"./dist")
- },
- resolve: {
- alias: {
- vue: 'vue/dist/vue.esm-bundler.js' // 关键配置
- }
- },
- module:{
- rules:[
- {
- test:/\.css$/i,
- use:["style-loader","css-loader"],
- },
- {
- test:/\.vue$/,
- use:[
- { loader:"vue-loader" }
- ]
- },
- // 处理 .js 文件
- {
- test: /\.js$/,
- exclude: /node_modules/,
- use: {
- loader: 'babel-loader',
- options: {
- presets: ['@babel/preset-env']
- }
- }
- },
- {
- test:/\.(png|jpe?g|gif|svg)$/i,
- // use:[{
- // loader:"file-loader",
- // options:{
- // limit: 512 * 1024,
- // name: "[name].[ext]",
- // outputPath:"media",
- // },
- // }]
- type: 'asset/resource',
- generator:{
- filename: "[name].[ext]",
- }
- },
- {
- test:/\.(woff2?|eof|ttf)$/i,
- // use:[{
- // loader:"file-loader",
- // options:{
- // limit: 512 * 1024,
- // name: "[name].[ext]",
- // outputPath:"media",
- // },
- // }]
- type: 'asset/resource',
- generator:{
- filename: "./font/[name].[ext]",
- }
- },]
- },
- plugins:[
- new VueLoaderPlugin(),
- new CleanWebpackPlugin(),
- new HtmlWebpackPlugin({
- inject:'head',
- title:"index page ",
- template:"./index.html",
- filename:"index.html",
- chunks:['index'],
- }),
- ],
- // 优化配置(如代码拆分)
- optimization: {
- splitChunks: {
- chunks: 'all',
- minSize: 20000,
- cacheGroups: {
- vendors: {
- test: /[\\/]node_modules[\\/]/,
- priority: -10,
- reuseExistingChunk: true,
- name: 'vendors'
- }
- }
- }
- }
- }
|