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 配置
