测试引入图片，新建asset文件夹放一张图片并在在main.js中引入
import img from'./assets/a.png'在html中显示
<img :src="img" alt="">
12.引入html-webpack-plugin
输入命令下载html-webpack-plugin
npm i html-webpack-plugin -D设置plugins
var HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
chunks: ['main'] })
]13.vue开发需要.vue文件只要引入vue-laoader和vue-template-compiler就行了
输入命令下载vue-loader vue-style-loader vue-template-compiler
npm i vue-loader vue-style-loader vue-template-compiler -D配置vue-loader
{
test: '/.vue$/',
loader: 'vue-loader'
}还需要引入vue-loader/lib/plugin
var VueLoaderPlugin = require('vue-loader/lib/plugin');并在plugin实例化
new VueLoaderPlugin()新建App.vue
<template> <h1>Hello World!</h1></template>
<script> export default { name: 'App' }</script>
<style></style>更改main.js
import Vue from 'vue';import App from './App.vue';
new Vue({ el: '#app', render: h => h(App)});运行项目
14.开启js热更新
因为 vue-style-loader 封装了 style-loader，热更新开箱即用,但是 js 热更新还不能用，每次修改代码我们都会刷新浏览器，所以我们需要继续配置。
const webpack = require('webpack');并在plugin中配置
new webpack.HotModuleReplacementPlugin()热更新已静开启
到现在为止webpack构建的vue项目已经跑起来了。
接下来就是一些优化，
15.在resolve配置别名
resolve: {
extensions: ['.js', '.jsx','.ts','.tsx', '.scss','.json','.css'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
"@": path.resolve(__dirname, 'src'),
"components": path.resolve(__dirname, '/src/components'),
"utils": path.resolve(__dirname + '/src/utils'),
},
modules: ['node_modules']}16.支持sass
输入命令下载sass-loader node-sass
