webpack引入iview.css,【Vue】webpack引入iview运行出错

使用webpack新建Vue项目,Vue正常引入可以运行,但是当我引入iview并试图打包的时候,报了一大堆错误。。

看了一下,都是css出错了:

4fbd019dc4f8e5fc0f776288de130bf4.png

4d56349f4f981a2bc651bd48783e3e74.png

webpack配置如下:

/*

公共配置文件

*/

const path = require('path')

const webpack = require('webpack')

const HtmlWebpackPlugin = require('html-webpack-plugin')

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {

entry: path.join(__dirname, '/src/main.js'),

output: {

path: path.join(__dirname, '/dist'),

filename: 'bundle.js'

},

module: {

rules: [

{

test: /\.css$/,

// use: ['style-loader', 'css-loader']

// 这里采用的是对象配置loader的写法

use: [

{loader: 'style-loader'},

{loader: 'css-loader'}

],

exclude: /node_modules/

},

{

test: /\.js$/,

exclude: /node_modules/,

loader: 'babel-loader'

},

{

test: /\.(png|jpg|svg|gif)$/,

use: [

{

loader: 'url-loader'

}

]

},

{

test: /\.vue$/,

use: [

{

loader: 'vue-loader'

}

]

}

]

},

plugins: [

new webpack.HotModuleReplacementPlugin(),

new HtmlWebpackPlugin({

template: path.join(__dirname, 'index.html')

}),

new VueLoaderPlugin()

],

resolve: {

alias: {

'vue': 'vue/dist/vue.js'

}

}

}

main.js

import Vue from 'vue'

import iView from 'iview'

import 'iview/dist/styles/iview.css'

import App from './App.vue'

Vue.use(iView)

new Vue({

el: '#app',

template: '',

components: {App}

})

package.json:

{

"name": "upload-manager",

"version": "1.0.0",

"description": "multi-media upload manager",

"main": "main.js",

"scripts": {

"build": "webpack --config webpack.prod.js --progress --colors --mode production",

"dev": "webpack-dev-server --open --config webpack.dev.js --progress --colors --mode development"

},

"author": "Yeoman_Li",

"license": "ISC",

"devDependencies": {

"@babel/core": "^7.1.6",

"@babel/preset-env": "^7.1.6",

"autoprefix": "^1.0.1",

"babel-core": "^6.26.3",

"babel-loader": "^8.0.4",

"babel-preset-env": "^1.7.0",

"clean-webpack-plugin": "^1.0.0",

"css-loader": "^1.0.1",

"file-loader": "^2.0.0",

"html-webpack-plugin": "^3.2.0",

"iview": "^3.1.5",

"style-loader": "^0.23.1",

"url-loader": "^1.1.2",

"vue": "^2.5.17",

"vue-loader": "^15.4.2",

"vue-template-compiler": "^2.5.17",

"webpack": "^4.26.1",

"webpack-cli": "^3.1.2",

"webpack-dev-server": "^3.1.10",

"webpack-merge": "^4.1.4"

}

}

回答

重装htmlwebpackplugin插件,3.0.7版本,解决entryPoint = undefined的报错

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值