1、運(yùn)行npm run dev 命令在cmd上面也不算報(bào)錯(cuò)輸出一些東西看不懂什么意思。
報(bào)錯(cuò)頁(yè)：

2、目錄結(jié)構(gòu)

3、webpack.config.js中代碼

let path = require('path');
let webpack = require ("webpack");
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
    entry:"./src/main.js",
    output:{
        filename:'bundle.js',
        path:path.resolve('./dist')
    },
    module:{
        rules:[
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
            {test:/\.css$/,use:['style-loader','css-loader']},//這個(gè)需要倆個(gè)是因?yàn)閏ss-loader解析完還要以style形式插入
            // 轉(zhuǎn)化base64只在8192字節(jié)以下轉(zhuǎn)化，其它情況輸出原圖片
            {test:/\.(jpg|png|gif)$/,use:'url-loader?limit=8192'},
            {test:/\.vue$/,use:'vue-loader'}
        ]
    },
    plugins:[
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            title: 'Hello World app',
            template:'./src/index.html',
        })
    ],
    devServer:{
        historyApiFallback:true,
        inline:true,
    }
}

4、package.json

{
  "name": "day7",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --inline"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^0.28.8",
    "file-loader": "^1.1.6",
    "html-webpack-plugin": "^2.30.1",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "style-loader": "^0.19.1",
    "url-loader": "^0.6.2",
    "vue": "^2.5.13",
    "vue-loader": "^13.7.0",
    "vue-template-compiler": "^2.5.13",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.10.0"
  },
  "devDependencies": {
    "vue-router": "^3.0.1"
  }
}