using webpack to create a new Vue project, Vue was introduced normally and worked, but when I introduced iview and tried to package it, I reported a lot of errors.
looked at it and found that css made a mistake:
webpack is configured as follows:
/*
*/
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: "-sharpapp",
template: "<App/>",
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"
}
}