vue 打包html到模版中,vue-cli webpack-simple 是如何做到将vue中的html img标签打包出来？...

最近自己用 webpack4 配 Vue 开发环境的时候发现，Vue 组件模板中直接使用 无法打包出来，同时 dev 的时候也无法查看，都是请求失败。

去看了一下 vue-cli 的 webpack-simple 的配置，发现，它也没什么特别的东西，为什么它 App.vue 中html 的 能够正确识别并且打包出来，关键点是那些？

App.vue 文件：

当我运行 yarn build 的时候，在 dist 文件夹中的确出现了 logo.png ：

而当我 dev 的时候，实际上，图片的路径并不是 App.vue 中的路径，而是使用了 publicPath 的路径：

其中直接使用了 /dist/logo.png&hash 一方面是配置了 publicPath,另一方面，它配置了 file-loader。

但是仅仅这两点，是如何做到将 logo 打包出来的？

注意：我使用的是 webpack-simple 模板，他只有一个 webpack.config.js

var path = require('path')

var webpack = require('webpack')

module.exports = {

entry: './src/main.js',

output: {

path: path.resolve(__dirname, 'dist'),

publicPath: '/dist/',

filename: 'build.js'

},

module: {

rules: [

{

test: /\.css$/,

use: [

'vue-style-loader',

'css-loader'

],

}, {

test: /\.vue$/,

loader: 'vue-loader',

options: {

loaders: {

}

// other vue-loader options go here

}

},

{

test: /\.js$/,

loader: 'babel-loader',

exclude: /node_modules/

},

{

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

loader: 'file-loader',

options: {

name: '[name].[ext]?[hash]'

}

}

]

},

resolve: {

alias: {

'vue$': 'vue/dist/vue.esm.js'

},

extensions: ['*', '.js', '.vue', '.json']

},

devServer: {

historyApiFallback: true,

noInfo: true,

overlay: true

},

performance: {

hints: false

},

devtool: '#eval-source-map'

}

if (process.env.NODE_ENV === 'production') {

module.exports.devtool = '#source-map'

// http://vue-loader.vuejs.org/en/workflow/production.html

module.exports.plugins = (module.exports.plugins || []).concat([

new webpack.DefinePlugin({

'process.env': {

NODE_ENV: '"production"'

}

}),

new webpack.optimize.UglifyJsPlugin({

sourceMap: true,

compress: {

warnings: false

}

}),

new webpack.LoaderOptionsPlugin({

minimize: true

})

])

}