常用的webpack 配置

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 目录

‘c‘: resolve(‘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  配置

原文地址：https://www.cnblogs.com/guangzhou11/p/11597011.html