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