const path = require('path') const { VueLoaderPlugin } = require('vue-loader') const HTMLPlugin = require('html-webpack-plugin') const webpack = require('webpack') const isDev = process.env.NODE_ENV === 'development' const config = { target: 'web', entry: path.join(__dirname, 'src/index.js'), output: { filename: 'bundle.js', path: path.join(__dirname, 'dist') }, module:{ rules: [ { test: /\.vue$/, use: [ {loader: 'vue-loader'} ] }, ] }, plugins: [ new VueLoaderPlugin(), new webpack.DefinePlugin({ 'process.env': { NODE_ENV: isDev ? '"development"' : '"production"' } }), new HTMLPlugin() ] } if(isDev){ config.devServer = { port: 8000, host: '0.0.0.0', overlay: { errors: true }, open: true } } module.export = config
你的报错应该是css内容无法解析吧,15版的 vue-loader 会出现这种情况,你还需要把 { test; /\.css$/, loader: 'css-loader' } 也加入到 rules 数组里面。
方法一: 把vue-loader版本替换为14
方法二: 根据vue-loader官方提供的15版本的声明方法,定义plugin。
const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { module: { rules: [ // ... other rules { test: /\.vue$/, loader: 'vue-loader' } ] }, plugins: [ new VueLoaderPlugin() //15版本需指定plugin ]}
把vue-loader的版本替换成^14.2.0试一下