vue require 图片动态地址_初学探索：webpack + Vue开发

上一篇文章我已经了解了如何使用webpack打包项目，这一篇文章，我们再把Vue加进来。

前面的配置过程大体一致，只不过我们需要添加对Vue的支持。

执行命令：cnpm i vue -S && cnpm i vue-loader vue-template-compiler -D，执行成功之后，我们的package.json文件就增加了一些新的内容：

请点击输入图片描述

然后再来配置我们的webpack.config.js，实际上就是将已经装载的Vue引进来。

const htmlWebpackPlugin = require('html-webpack-plugin')const path = require('path')const VueLoaderPlugin = require('vue-loader/lib/plugin')module.exports = { mode:'production', entry:{ main: './src/main.js'//main是默认入口, 也可以是多入口 }, //出口 output:{ filename: './build.js',//指定js文件 path: path.join(__dirname, 'dist')// 最好是绝对路径 }, module:{ //与rules一样的功能 ruleswebpack2.x之后新加的 rules:[ { test://css$/, use:'style-loader!css-loader'//顺序从后往前加载 }, { test:/.(jpg|svg|png|gif)$/, use:'url-loader?limit=4096&name=[name].[ext]', }, { test:/.vue$/, use:'vue-loader' } ] }, plugins:[ //插件 依次执行 new htmlWebpackPlugin({ template:'./src/index.html' //将src下的template属性描述的文件根据当前配置的output.path移动至该目录 }), new VueLoaderPlugin() ]}

添加完成之后，就可以开始编写代码了。

首先我们需要在index.html里创建一个div，并且给这个div一个id，我这里给的id是coder。

请点击输入图片描述

然后创建index.vue文件，这个文件含有三部分内容，、