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
