代码：
/**
* @author: lap
* @date: 2021-05-08 14:27
*/
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
// const a = require('uglifyjs-webpack-plugin');
module.exports = {
entry:'./src/main.js',//入口
output:{
path:path.resolve(__dirname,'dist'),//动态获取路径 __dirname:获取当前文件所在路径
filename:'bundle.js',
publicPath:'dist/',//打包后涉及URL问题会自动到dist文件夹去找
},//出口
module:{//模块
rules: [
{
test: /\.css$/,
//css-loader只负责加载css文件
//style-loader负责将css样式添加到DOM中
//使用多个loader时，从右向左
use: ['style-loader','css-loader']
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
//当加载的图片小于limit时，会将图片编译成base64字符串形式
//当加载的图片，大于limit时，需要使用file-loader模块进行加载
limit: 13000,
//打包完后放到指定文件夹下；文件名[name] 这样name就是变量了,[]中的内容就是变量了，8位的hash值
name:'img/[name].[hash:8].[ext]'
},
}
]
},
{
test: /\.js$/,
//exclude排除 include加入
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']//presets预设
}
}
},
{
test: /\.vue$/,
use:['vue-loader']
}
]
},
resolve:{
//alias别名
alias:{
//当进行import Vue操作时，先判断有没有这个，有的话走这个版本
'vue$':'vue/dist/vue.esm.js'
},
//extensions（扩展名）；后缀省略，不配置的话，在引入文件时必须带后缀，不然打包报错
extensions:['.js','.css','.vue']
},
//插件
plugins:[
new webpack.BannerPlugin('最终版权归AAA所有'),
new HtmlWebpackPlugin({
template:'index.html'
}),
new HtmlWebpackPlugin(),
new UglifyjsWebpackPlugin(),
],
devServer:{
contentBase:'./dist',//路径
inline:true,//是否实时监听
port:83,//默认为8080端口
},
}
控制台截图
