vue2 webpack4 配置

let path = require('path');
let htmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require("vue-loader/lib/plugin");
module.exports={
entry:{
'index':__dirname+'/src/js/index.js'
},
output:{
path:__dirname+'/src/build',
publicPath: '/',
filename:["name"].js
},
devServer: {
contentBase: path.join(__dirname, "src"),
publicPath: '/',
compress: true,
port: 9000
},
externals:{

},
resolve: {
    alias: {
        'vue$': 'vue/dist/vue.common.js',
    }
},
module:{
    rules: [
        { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
        {
            test: /\.vue$/,
            loader: 'vue-loader',
        },
        {
            test: /\.scss$/,
            use: [
                "style-loader", // creates style nodes from JS strings
                "css-loader", // translates CSS into CommonJS
                "sass-loader" // compiles Sass to CSS
            ]
        },
        {
            test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
            loader: 'file-loader'
        },
        {
            test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
            loader: 'url-loader',
            query: {
                name: '[name].[ext]?[hash]'
            }
        }
    ]
},
plugins:[
    new htmlWebpackPlugin({
        filename: 'index.html',
        template: './src/html/index.html',
        chunks:["index"],
        inject:"body"
    }),
    new VueLoaderPlugin()
]

}
derServer 处的 contentBase定位到项目的源码src目录 否则引用图片路径找不到
项目结构如图

image.png