                        課程
                    
                        /前端開發(fā)
                        
                            /前端工具
                        
                        /Vue+Webpack打造todo應(yīng)用

啟動(dòng)報(bào)錯(cuò)You may need an appropriate loader to handle this file type. 都已經(jīng)加載了

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

孟婆來碗湯別放香菜

2018-05-24

源自：Vue+Webpack打造todo應(yīng)用 2-3

關(guān)注問題我要回答

35360

操作

收起

3 回答

kuleyu
2018-06-20

你的報(bào)錯(cuò)應(yīng)該是css內(nèi)容無法解析吧，15版的?vue-loader?會(huì)出現(xiàn)這種情況，你還需要把
{
????test;?/\.css$/,
????loader:?'css-loader'
}
也加入到?rules?數(shù)組里面。

1 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

kiky_zhang
2018-05-26

方法一：把vue-loader版本替換為14

方法二：根據(jù)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
??]}