本章节代码在码云以压缩包形式上传：
https://gitee.com/cxy-xupeng/vue-webpack.git
目录
一、模块化
1、为什么需要模块化
以前的前端代码有两个问题：
（1）.全局变量会被不同的地方赋值。比如我创建一个全局flag，值为true，我要用的时候发现为false，原来公司同事把我这个在他那边变了false，就很困扰。针对全局变量被不同赋值，我们通过匿名内部类
（2）虽然上面问题解决了，又有新问题：我匿名内部类的代码我想复用又不行了。解决方案：运用面向对象思想进行模块化开发
2、常见的模块化规范*
既然要用模块化了，肯定要遵循规范，常见规范：
- CommonJS
- AMD
- CMD
- ES6的Modules
3、ES的导入导出
1.type="module"
2.export：导出
var name = '徐鹏'
var age = 18
var flag = true
function sum(a,b){
return a+b;
}
if(flag){
console.log(sum(100,200))
}
/* 1.导出方式一 */
export {
flag,sum
}
/* 2.导出方式二 */
export var num1 = 1000
export var num2 = 1.88
/* 3.导出函数/类 */
export function mul(num1,num2){
return num1 * num2
}
export class Person{
run(){
console.log('跑路')
}
}
/* 4.导出default，每个js只能有一个default，引用的时候，可以随便命名 */
const address = '上海'
export default address
/* 5.统一全部导出 */
3.import：导入
import {flag,sum} from './aa.js'
import {num1,num2} from './aa.js'
import {mul,Person} from './aa.js'
import xupeng from './aa.js'
import * as aa from './aa.js'
if(flag){
console.log('徐鹏哈哈')
console.log(sum(20,20))
}
console.log(num1,num2)
console.log(mul(20,30))
const p = new Person()
p.run()
console.log(xupeng)
console.log(aa.flag)4.commonJS导入导出
function add(num1,num2){
return num1+num2
}
function mul(num1,num2){
return num1*num2
}
module.exports = {
add,
mul
}const {add,mul} = require('./mathUtil.js')
console.log(add(20,30))
console.log(mul(20,30))二、什么是Webpack
Webpack：现代的js应用的静态模块打包工具。（还是不懂，记得重点：模块+打包）
我们之所以上面模块化用es是因为其他的浏览器不支持，需要解析。而Webpack就可以帮我们解析那些模块化的东西，并且能处理依赖关系。并且，我们除了js，CSS、图片等都可以当成模块。
我们的代码想要让客户用，需要通过Webpack将我们的代码模块化成浏览器支持的格式。
Webpack想要正常工作，需要依赖于node环境。
而node环境肯定是需要依赖很多的包的。手动管理很多包很麻烦，我们需要一个npm工具，所以简单说，npm其实就是一个包管理工具。
三、Webpack安装
1.我们先装node，这个自己去下载，安装完后查看一下版本：
2.安装npm（包管理工具），这里我们指定版本3.6.0
（如果下面代码有问题，你可以下一个5.9.0）
npm config set registry https://registry.npm.taobao.org npm install [email protected] -g
查看版本：
webpack -v
四、Webpack初体验
先来看下目录：（dist下面的不要手动创建）
info.js
export const name = '徐鹏'
export const age = 18mathUtil.js
function add(num1,num2){
return num1+num2
}
function mul(num1,num2){
return num1*num2
}
module.exports = {
add,
mul
}main.js
/* 1.使用commonJS规范导入导出 */
const {add,mul} = require('./mathUtil.js')
console.log(add(20,30))
console.log(mul(20,30))
/* 2.使用ES6的规范导入导出 */
import {name,age} from './info.js'
console.log(name)
console.log(age)
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="dist/bundle.js/main.js"></script>
</body>
</html>
进入cmd：（如果下面不行，就把-o去掉）
webpack ./src/main.js -o ./dist/bundle.js
五、Webpack配置
你如果上面的搞好了，会有一个发现，每次打包的时候需要自己制定js，还需要制定打包的js，感觉就很麻烦，咱可不可以省点事，简化发布呢？
1.首先新建一个项目
webpack.config.js:其余几个js的代码同上
const path = require('path')
module.exports = {
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist/bundle.js'),
filename:'main.js'
}
}
2.npm install
先进入你的文件夹，然后输入：
npm install
输入完之后，它会让你写一些信息，不用管，一路回车 。回车结束后，你会多一个package.json
3.npm install
npm install如果你的项目有依赖的话，它会自动安装依赖。当然我们项目目前没有，所以显示这个样子
4.webpack
webpack
5.结果
6.再做一层映射
打开package.json，输入如下：
"xupeng":"webpack"（记得前面加个逗号）
7.运行
我们不用运行webpack也可以打包了，也是能运行的
8.设置本地webpack
npm install [email protected] --save-dev我们在终端里所有的webpack都是全局的。但是如果我们通过第六步映射后，就可以先调用本地的打包。
安装完本地webpack后，这两个地方会发生变化
六、css模块化配置
我们先把上述代码复制一下，其中做了一些小变动：
- 吧两个js放到js文件夹下，main.js不变。
- 我们之前是在cmd下面输入命令，现在变成在终端下面。HBuild终端，点击左下角那个图标
1.先新建css文件
normal.css
body{
background-color: red;
}2.在main.js里面引入css文件
/* 1.使用commonJS规范导入导出 */
const {add,mul} = require('./js/mathUtil.js')
console.log(add(20,30))
console.log(mul(20,30))
/* 2.使用ES6的规范导入导出 */
import {name,age} from './js/info.js'
console.log(name)
console.log(age)
/* 3.依赖css文件 */
require('./css/normal.css')
3.webpack.config.js中做配置
const path = require('path')
module.exports = {
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist/bundle.js'),
filename:'main.js'
},
module: {
rules: [
{
test: /\.css$/,
/* css-loader:只负责文件加载
style-loader：负责将样式添加到DOM
使用多个loader，从右向左读*/
use: [ 'style-loader','css-loader' ]
}
]
}
}4.引入loader
看一下css-loader和style-loader的版本。大家可以自己设定
css-loader版本：
npm install --save-dev [email protected]我最开始调用的是5.0.1版本的css-loader，后来因为版本不对运行不起来，后面改成了2.0.2（当然大家自己的版本可以自己定义，我推荐是这两个版本）
style-loader版本：
npm install style-loader --save-dev我这边 style-loader没有自定义版本号，用的默认的2.0.0
5.运行
运行每个人都不一样，取决于你package.json里面的设定。我这边给大家看一下我的设定：（其实我的命令就相当于运行了webpack）
七、less文件的处理
说实话，作为java程序员，我也是第一次知道less文件。咱来看看特殊的css文件怎么处理
文档：https://www.webpackjs.com/concepts/
1.先看目录
2.special.less
@fontSize:50px;
@fontColor:orange;
body{
font-size:@fontSize ;
color:@fontColor ;
}3.main.js引入依赖
/* 1.使用commonJS规范导入导出 */
const {add,mul} = require('./js/mathUtil.js')
console.log(add(20,30))
console.log(mul(20,30))
/* 2.使用ES6的规范导入导出 */
import {name,age} from './js/info.js'
console.log(name)
console.log(age)
/* 3.依赖css文件 */
require('./css/normal.css')
/* 4.依赖less文件 */
require('./css/special.less')
document.writeln('徐鹏less')
4.webpack.config.js加载器
const path = require('path')
module.exports = {
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist/bundle.js'),
filename:'main.js'
},
module: {
rules: [
{
test: /\.css$/,
/* css-loader:只负责文件加载
style-loader：负责将样式添加到DOM
使用多个loader，从右向左读*/
use: [ 'style-loader','css-loader' ]
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
}
]
}
}5.终端引入loader（注意版本号）
npm install --save-dev [email protected] [email protected]6.结果
八、引入图片
1.先看目录，添加两张图片到img文件夹下
2.normal.css
body{
/* background-color: red; */
background: url(../img/1.jpg);
}3.webpack.config.js新增file-loader
url-loader会和file-loader发生冲突，所以我们这边注释掉url-loader
const path = require('path')
module.exports = {
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist/bundle.js'),
filename:'main.js',
publicPath:'dist/bundle.js/'
},
module: {
rules: [
{
test: /\.css$/,
/* css-loader:只负责文件加载
style-loader：负责将样式添加到DOM
使用多个loader，从右向左读*/
use: [ 'style-loader','css-loader' ]
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
},
/* {
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
//当加载的图片，小于limit时，会将图片编译成base64字符串形式
//当加载的图片，大于limit时，需要使用file-loader模块进行加载
limit: 40000000
}
}
]
}, */
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
}
]
}
}4.引入依赖file-loader（注意版本）
file-loader：
npm install --save-dev [email protected]5.查看结果
九、ES6转ES5的babel
为了向下兼容，我们需要吧ES6转成ES5
npm install --save -dev babel-loader@7 babel-core babel-preset-es2015webpack.config.js
const path = require('path')
module.exports = {
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist/bundle.js'),
filename:'main.js',
publicPath:'dist/bundle.js/'
},
module: {
rules: [
{
test: /\.css$/,
/* css-loader:只负责文件加载
style-loader：负责将样式添加到DOM
使用多个loader，从右向左读*/
use: [ 'style-loader','css-loader' ]
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
},
/* {
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
//当加载的图片，小于limit时，会将图片编译成base64字符串形式
//当加载的图片，大于limit时，需要使用file-loader模块进行加载
limit: 400,
name:'img/[name].[hash8].[ext]'
},
}
]
}, */
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}
]
}
}运行结果：
const都变成var了
十、在webpack中整合Vue
1.整合vue
（1）我们先把上面项目复制一份：
（2）安装vue
npm install vue --save
（3）main.js
/* 1.使用commonJS规范导入导出 */
const {add,mul} = require('./js/mathUtil.js')
console.log(add(20,30))
console.log(mul(20,30))
/* 2.使用ES6的规范导入导出 */
import {name,age} from './js/info.js'
console.log(name)
console.log(age)
/* 3.依赖css文件 */
require('./css/normal.css')
/* 4.依赖less文件 */
require('./css/special.less')
document.writeln('徐鹏less')
/* 5.使用VUE进行开发 */
import Vue from 'vue'
const app = new Vue({
el:'#app',
data:{
message:'你好，徐鹏'
}
})
（4）index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h2>{
{message}}</h2>
</div>
<script src="dist/bundle.js/main.js"></script>
</body>
</html>
（5）运行
这个时候会报错，如下：
runtime-only：代码中不可以有任何的template
runtime-compiler：代码中可以有template，因为有compiler可以用于编译template
（6）加resolve
在webpack.config.js中加resolve：
const path = require('path')
module.exports = {
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist/bundle.js'),
filename:'main.js',
publicPath:'dist/bundle.js/'
},
module: {
rules: [
{
test: /\.css$/,
/* css-loader:只负责文件加载
style-loader：负责将样式添加到DOM
使用多个loader，从右向左读*/
use: [ 'style-loader','css-loader' ]
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
},
/* {
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
//当加载的图片，小于limit时，会将图片编译成base64字符串形式
//当加载的图片，大于limit时，需要使用file-loader模块进行加载
limit: 400,
name:'img/[name].[hash8].[ext]'
},
}
]
}, */
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}
]
},
resolve:{
alias:{
'vue$':'vue/dist/vue.esm.js'
}
}
}（7）重新发布
成功
2.webpack创建vue时template和el关系
我们webpack合并了vue之后，肯定要改index.html，但是我不想在这里改，怎么办？
我们template里的东西会自动放到index.html里的<div id="app">里面：
十一、vue的终极解决方案（重要）
目录：
1.下载vue（注意版本号）
npm install [email protected]2.index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
</div>
<script src="dist/bundle.js/main.js"></script>
</body>
</html>
3.App.vue
<template>
<div>
<h2 class="title">{
{message}}</h2>
<Xupeng></Xupeng>
</div>
</template>
<script>
import Xupeng from './Xupeng.vue'
export default {
name:'App',
data(){
return{
message:'你好，徐鹏'
}
},
methods:{
btnClick(){
}
},
components:{
Xupeng
}
}
</script>
<style>
.title{
color: #0000ED;
}
</style>
4.Xupeng.vue
<template>
<div>
<h2>徐鹏组件标题</h2>
{
{name}}
</div>
</template>
<script>
export default{
name:'Xupeng',
data(){
return{
name:'徐鹏组件的name'
}
}
}
</script>
<style>
</style>
5.webpack.config.js
const path = require('path')
module.exports = {
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist/bundle.js'),
filename:'main.js',
publicPath:'dist/bundle.js/'
},
module: {
rules: [
{
test: /\.css$/,
/* css-loader:只负责文件加载
style-loader：负责将样式添加到DOM
使用多个loader，从右向左读*/
use: [ 'style-loader','css-loader' ]
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
},
/* {
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
//当加载的图片，小于limit时，会将图片编译成base64字符串形式
//当加载的图片，大于limit时，需要使用file-loader模块进行加载
limit: 400,
name:'img/[name].[hash8].[ext]'
},
}
]
}, */
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
{
test:/\.vue$/,
use:['vue-loader']
}
]
},
resolve:{
/* extensions:['.js','.css','.vue'], */
alias:{
'vue$':'vue/dist/vue.esm.js'
}
}
}6.结果
十二、plugin
vue里还有很多插件，我们了解一下：（我们先复制一下上面的项目，复制成05）
1.添加版权的plugin
在webpack.config.js中添加plugins：
const path = require('path')
const webpack = require('webpack')
module.exports = {
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist/bundle.js'),
filename:'main.js',
publicPath:'dist/bundle.js/'
},
module: {
rules: [
{
test: /\.css$/,
/* css-loader:只负责文件加载
style-loader：负责将样式添加到DOM
使用多个loader，从右向左读*/
use: [ 'style-loader','css-loader' ]
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
},
/* {
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
//当加载的图片，小于limit时，会将图片编译成base64字符串形式
//当加载的图片，大于limit时，需要使用file-loader模块进行加载
limit: 400,
name:'img/[name].[hash8].[ext]'
},
}
]
}, */
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
{
test:/\.vue$/,
use:['vue-loader']
}
]
},
resolve:{
extensions:['.js','.css','.vue'],
alias:{
'vue$':'vue/dist/vue.esm.js'
}
},
plugins:[
new webpack.BannerPlugin('最终版权归徐鹏所有')
]
}重新运行一下，发现版权声明有了：
2.打包html的plugin
我们index.html打包后应该在dist里面，而不是在根目录下面，所以我们要做打包：
（1）安装插件
版本！版本！版本！！！重要的事情说三次。vue的版本太恶心了
npm install [email protected] --save-dev（2）修改webpack.config.js
记得加逗号啊，铁汁们
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'dist/bundle.js'),
filename:'main.js',
publicPath:'dist/bundle.js/'
},
module: {
rules: [
{
test: /\.css$/,
/* css-loader:只负责文件加载
style-loader：负责将样式添加到DOM
使用多个loader，从右向左读*/
use: [ 'style-loader','css-loader' ]
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
},
/* {
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
//当加载的图片，小于limit时，会将图片编译成base64字符串形式
//当加载的图片，大于limit时，需要使用file-loader模块进行加载
limit: 400,
name:'img/[name].[hash8].[ext]'
},
}
]
}, */
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
{
test:/\.vue$/,
use:['vue-loader']
}
]
},
resolve:{
extensions:['.js','.css','.vue'],
alias:{
'vue$':'vue/dist/vue.esm.js'
}
},
plugins:[
new webpack.BannerPlugin('最终版权归徐鹏所有'),
new HtmlWebpackPlugin()
]
}（3）结果
自动生成了index.html。但是有问题：
*1）首先src目录不对，不需要dist/bundle.js
*2）<div id = 'app'>没了，需要一个模板
（4）完善
针对目录的问题：webpack.config.js注释掉publicPath
针对模板的问题：原来的index.html注释掉<script>，然后在webpack.config.js里面加上template属性
.
（5）修改后的结果
3.压缩js的plugin
（1）导入插件
npm install [email protected] --save-dev（2）webpack.config.js做配置
（3）结果
重启后，打开我们的main.js,就被压缩了（刚刚版权啥的注释也没了。。。）
4.热部署
每次修改都是重新启动一次很麻烦吧？试试热部署：
（1）导入插件
npm install [email protected] --save-dev（2）webpack.config.js做配置
（3）修改package.json
（4）启动项目
因为我们上一步设置的dev，所以是npm run dev
打开浏览器查看结果：每次修改，浏览器都会实时改变，不需要重新发布
（5）细节
第三步我们可以加一个--open，启动好后自动打开
"dev":"webpack-dev-server --open"5.配置文件的分离
有的配置文件是在打包用，有的是在测试用，有的发布后要用，这很乱，不好，我们需要分离（先复制一个06项目）：
先看看目录结构：（删除webpack.config.js文件，新增build文件夹）
（1）导入插件
npm install [email protected] --save-dev（2）将开发目录和发布目录分离
base.config.js：（基本同webpack.config.js，但是注释了精简js的插件和热部署）
此处路径有所改变，重新制定了打包路径：
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
entry:'./src/main.js',
output:{
path:path.resolve(__dirname,'../dist/bundle.js'),
filename:'main.js',
/* publicPath:'dist/bundle.js/' */
},
module: {
rules: [
{
test: /\.css$/,
/* css-loader:只负责文件加载
style-loader：负责将样式添加到DOM
使用多个loader，从右向左读*/
use: [ 'style-loader','css-loader' ]
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
},
/* {
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
//当加载的图片，小于limit时，会将图片编译成base64字符串形式
//当加载的图片，大于limit时，需要使用file-loader模块进行加载
limit: 400,
name:'img/[name].[hash8].[ext]'
},
}
]
}, */
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
{
test:/\.vue$/,
use:['vue-loader']
}
]
},
resolve:{
extensions:['.js','.css','.vue'],
alias:{
'vue$':'vue/dist/vue.esm.js'
}
},
plugins:[
new webpack.BannerPlugin('最终版权归徐鹏所有'),
new HtmlWebpackPlugin({
template:'index.html'
}),
// new UglifyjsWebpackPlugin()
],
/* devServer:{
contentBase:'./dist/bundle.js',
inline:true//实时页面刷新
} */
}dev.config.js:
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')
module.exports = webpackMerge(baseConfig,{
devServer:{
contentBase:'./dist/bundle.js',
inline:true//实时页面刷新
}
})prod.config.js:
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')
module.exports = webpackMerge(baseConfig,{
plugins:[
new UglifyjsWebpackPlugin()
]
})（3）配置package.json，告诉他你修改后的js文件入口在哪里
{
"name": "webpackconfig",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"xupeng": "webpack --config ./build/prod.config.js",
"dev": "webpack-dev-server --open --config ./build/dev.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^2.0.2",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"style-loader": "^2.0.0",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^1.1.2",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.3",
"webpack-merge": "^4.1.5"
},
"dependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"vue": "^2.6.12",
"vue-loader": "^12.2.2",
"vue-template-compiler": "^2.6.12"
}
}
（4）结果
