在webpack.config.js中进行配置 

const path = require('path')
module.exports = {// 入口entry: './src/main.js',// 输出output: {// 文件的输出路径path: path.resolve(__dirname, 'dist'),// 入口文件打包输出的文件名filename: 'js/main.js',// 自动清空上次打包结果 原理：在打包前，将path整个目录内容清空 再进行打包clean: true,},// 加载器module: {rules: [// loader的配置// css-loader 处理css文件{test: /\.css$/, // 只检测xxx文件use: [// 执行顺序从右到左（从下到上）'style-loader', // 将js中css通过创建style标签的样式添加到html中生效'css-loader', // 将css资源编译成common.js的模块到js中],},// less-loader 处理less文件{test: /\.less$/, // 只检测less文件use: ['style-loader', 'css-loader', 'less-loader'],},// sass-loader 处理scss文件{test: /\.s[ac]ss$/,use: [// 将 JS 字符串生成为 style 节点'style-loader',// 将 CSS 转化成 CommonJS 模块'css-loader',// 将 Sass 编译成 CSS'sass-loader',],},// stylus-loader 处理styl文件{test: /\.styl$/,use: ['style-loader', 'css-loader', 'stylus-loader'], // 将styl文件编译为 CSS},// 处理图片{test: /\.(png|jpe?g|gif|webp|svg)$/,// 会转base64type: 'asset',parser: {dataUrlCondition: {// 小于10kb的图片转base64// 优点：减少请求数量 缺点：体积会更大maxSize: 10 * 1024, // 10kb,},},generator: {// hash:5 hash值取前5位数(打包后的图片名称)filename: 'images/[hash:5][ext][query]',},},// 处理字体文件{test: /\.(ttf|woff2?)$/,// 不会转base64type: 'asset/resource',generator: {filename: 'font/[hash:5][ext][query]',},},// 处理其他资源{test: /\.(mp3|mp4|avi)$/,// 不会转base64type: 'asset/resource',generator: {filename: 'media/[hash:5][ext][query]',},},],},// 插件plugins: [// plugin的配置],// 模式mode: 'development',
}