常用的webpack 配置-CSDN博客

本文详细介绍使用Webpack进行Vue项目的配置过程，包括入口文件、输出路径、加载器、插件等核心配置，以及如何处理CSS样式和ES6语法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

const path = require('path');

let HtmlWebpackPlugin = require('html-webpack-plugin');

let VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {

entry: './src/main.js',

output: {

path: path.resolve(__dirname),

filename:'bundle.js',

resolve: {

// 设置别名

alias: {

'@': resolve('src'),// 这样配置后 @ 可以指向 src 目录

'@components': path.resolve(__dirname, 'src/components')

}

module:{

rules:[

{test:/\.css/,use:['vue-style-loader','css-loader']},

{

test:/\.js/,

use:{

loader:'babel-loader',

options:{

presets:['@babel/preset-env']

exclude:/node_modules/,

{test:/\.vue/,use:'vue-loader'}

]

plugins:[

new VueLoaderPlugin(),

new HtmlWebpackPlugin({

template:'./src/index.html'

})

]

};

 webpack webpack-cli webpack-dev-server  webpack 需要的 
 vue-style-loader css-loader  处理css样式
 html-webpack-plugin 处理html
 @babel/core @babel/preset-env babel-loader   处理es6 语法
 vue-template-compiler  vue-loader 处理vue  编译的
 webpack-merge  合并webpack  配置