首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

vue2.0+webpack环境的构造过程

Posted in Javascript onNovember 08, 2016

本文给大家介绍vue2.0+webpack环境构造过程。

1.首先新建一个目录vue-wkdemo，这是我们的项目目录。执行 npm init 命令生成package.json文件。执行npm init之后，会提示你填写一些项目的信息，一直回车默认就好了，或者直接执行 npm init -y 直接跳过询问步骤。

2.安装项目依赖项

npm install webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader
vue-hot-reload-api babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime@5 --save-dev
npm install html-webpack-plugin --save-dev
npm install vue --save

3.新建入口文件index.js，文件位置放置为：vue-wkdemo->app->index->index.js

import Vue from 'Vue'
import Favlist from './components/Favlist.vue'
Vue.config.debug = true;//开启错误提示
window.onload = function () {
new Vue({
el: '#app',
components: {
'my-component': Favlist
}
});
}

4.构建index.html模版，文件位置放置为：vue-wkdemo->app->index->index.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>首页</title>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
</body>
</html>

5.构建vue组件Favlist.vue ，文件放置为：vue-wkdemo->app->components->Favlist.vue

<template id="template-home">
<div>
<div v-for="n in 10">div</div>
</div>
</template>
<style>
body {
color: red;
}
</style>

6.构建 webpack.config.js ，文件放置为：vue-wkdemo->build->webpack.config.js

// nodejs 中的path模块
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口文件，path.resolve()方法，可以结合我们给定的两个参数最后生成绝对路径，最终指向的就是我们的index.js文件
entry: path.resolve(__dirname, '../app/index/index.js'),
// 输出配置
output: {
// 输出路径是 myProject/output/static
path: path.resolve(__dirname, '../output/static'),
publicPath: 'static/',
filename: '[name].[hash].js',
chunkFilename: '[id].[chunkhash].js'
},
resolve: {
extensions: ['', '.js', '.vue'],
alias: {
'Vue': 'vue/dist/vue.js'
}
},
module: {
loaders: [
// 使用vue-loader 加载 .vue 结尾的文件
{
test: /\.vue$/,
loader: 'vue'
},
{
test: /\.js$/,
loader: 'babel?presets=es2015',
exclude: /node_modules/
}
]
},
Favlist: {
loaders: {
js: 'babel'
}
},
plugins: [
new HtmlWebpackPlugin({
filename: '../index.html',
template: path.resolve(__dirname, '../app/index/index.html'),
inject: true
})
]
}

7.运行构建命令 ：

'webpack ?display-modules ?display-chunks ?config build/webpack.config.js'

可以看到输出文件：

vue2.0+webpack环境的构造过程

vue2.0+webpack环境的构造过程

8.到这里，我们的目录结构为：

vue2.0+webpack环境的构造过程

运行output->static->index.html这个文件，过程中遇到各种各样的坑（省略几百字。。。）

最后终于看到结果了！！！

vue2.0+webpack环境的构造过程

9.问题来了，每次都需要运行构建命令才能查看改变后的代码效果，这是很没有效率，于是还需要安装 webpack-dev-middleware中间件和webpack-hot-middleware 中间件

npm install webpack-dev-middleware webpack-hot-middleware --save-dev

另外还需要安装express

npm install express --save-dev

介绍下webpack-dev-middleware中间件，它是对webpack一个简单的包装，它可以通过连接服务器服务那些从webpack发射出来的文件，它有一下几点好处：

1、不会向硬盘写文件，而是在内存中，注意我们构建项目实际就是向硬盘写文件。

2、当文件改变的时候，这个中间件不会再服务旧的包，你可以直接刷新浏览器就能看到最新的效果，这样你就不必等待构建的时间，所见即所得。

在build目录中创建一个dev-server.js文件，并写入内容：

// 引入必要的模块
var express = require('express')
var webpack = require('webpack')
var config = require('./webpack.config')
// 创建一个express实例
var app = express()
// 调用webpack并把配置传递过去
var compiler = webpack(config)
// 使用 webpack-dev-middleware 中间件
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: config.output.publicPath,
stats: {
colors: true,
chunks: false
}
})
// 注册中间件
app.use(devMiddleware)
// 监听 8888端口，开启服务器
app.listen(8888, function (err) {
if (err) {
console.log(err)
return
}
console.log('Listening at http://localhost:8888')
})

然后我们修改 webpack.config.js 配置文件

① 将 config.output.publicPath 修改为 ‘/‘：

// 输出配置
output: {
// 输出路径是 myProject/output/static
path: path.resolve(__dirname, '../output/static'),
publicPath: '/',
filename: '[name].[hash].js',
chunkFilename: '[id].[chunkhash].js'
},

② 将 plugins 中 HtmlWebpackPlugin 中的 filename 修改为 ‘app/index/index.html'

plugins: [
new HtmlWebpackPlugin({
filename: 'app/index/index.html',
template: path.resolve(__dirname, '../app/index/index.html'),
inject: true
})
]

此时，我们在项目根目录运行下面的命令，开启服务：

node build/dev-server.js

在浏览器中输入 http://localhost:8888/app/index/index.html，如果成功了将和前面本地运行output->static->index.html这个文件的结果是一样一样的

vue2.0+webpack环境的构造过程

不信？

为了不去修改webpack.config.js，在build目录下新建一个webpack.dev.conf.js文件，意思是开发模式下要读取的配置文件，并写入一下内容：

var HtmlWebpackPlugin = require('html-webpack-plugin')
var path = require('path');
// 引入基本配置
var config = require('./webpack.config');
config.output.publicPath = '/';
config.plugins = [
new HtmlWebpackPlugin({
filename: 'app/index/index.html',
template: path.resolve(__dirname, '../app/index/index.html'),
inject: true
})
];
module.exports = config;

这样在dev环境下的配置文件覆盖了基本配置文件，只需要在dev-server.js中将

var config = require('./webpack.config')

改为：

var config = require('./webpack.dev.conf')

到这里，我们已经使用webpack-dev-middleware 搭建基本的开发环境了，但是每次修改代码后，还是需要我们手动刷新浏览器，接下来介绍热加载（所谓的热加载，意思就是说能够追踪我们代码的变化，并自动更新界面，甚至还能保留程序状态。），我们需要 webpack-hot-middleware 中间件来完成热加载。

配合 webpack-dev-middleware 使用，我们还需要做的是：

第一步：安装（上面我们已经安装过）

npm install webpack-dev-middleware --save-dev

第二步：在 webpack.dev.conf.js 配置文件中添加三个插件，如下：

var HtmlWebpackPlugin = require('html-webpack-plugin')
var path = require('path');
var webpack = require('webpack');
// 引入基本配置
var config = require('./webpack.config');
config.output.publicPath = '/';
config.plugins = [
// 添加三个插件
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new HtmlWebpackPlugin({
filename: 'app/index/index.html',
template: path.resolve(__dirname, '../app/index/index.html'),
inject: true
})
];
module.exports = config;

第三步：在 webpack.config.js 文件中入口配置中添加 ‘webpack-hot-middleware/client'，如下：

entry: ['webpack-hot-middleware/client', path.resolve(__dirname, '../app/index/index.js')],

第四步：在 dev-server.js 文件中使用插件

// 引入必要的模块
var express = require('express')
var webpack = require('webpack')
var config = require('./webpack.dev.conf')
// 创建一个express实例
var app = express()
// 调用webpack并把配置传递过去
var compiler = webpack(config)
// 使用 webpack-dev-middleware 中间件
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: config.output.publicPath,
stats: {
colors: true,
chunks: false
}
})
// 使用 webpack-hot-middleware 中间件
var hotMiddleware = require('webpack-hot-middleware')(compiler)
// 注册中间件
app.use(devMiddleware)
// 注册中间件
app.use(hotMiddleware)
// 监听 8888端口，开启服务器
app.listen(8888, function (err) {
if (err) {
console.log(err)
return
}
console.log('Listening at http://localhost:8888')
})

现在重启的服务，然后修改 Favlist.vue 中的页面颜色为 ‘black'：

<style>
body {
color: black;
}
</style>

一保存就可以看到修改后的效果，不需要手动刷新浏览器啦啦啦~\(???)/~啦啦啦。

刚刚修改了webpack.config.js这个基本配置文件中的入口配置，为了不修改这个基本配置文件，我们在webpack.dev.conf.js文件中需要改下配置：

var HtmlWebpackPlugin = require('html-webpack-plugin')
var path = require('path');
var webpack = require('webpack');
// 引入基本配置
var config = require('./webpack.config');
config.output.publicPath = '/';
config.plugins = [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new HtmlWebpackPlugin({
filename: 'app/index/index.html',
template: path.resolve(__dirname, '../app/index/index.html'),
inject: true
})
];
// 动态向入口配置中注入 webpack-hot-middleware/client
var devClient = 'webpack-hot-middleware/client';
Object.keys(config.entry).forEach(function (name, i) {
var extras = [devClient]
config.entry[name] = extras.concat(config.entry[name])
})
module.exports = config;

然后将 webpack.config.js 文件中的入口配置修改为以下配置方式：

entry: {
index: [
path.resolve(__dirname, '../app/index/index.js')
]
},

重启服务，修改 Favlist.vue 中的背景色，再次查看浏览器，发现可以热加载。到这里还没结束，这里只是监听到Favlist.vue文件的改动，为了能监听到index.html文件的改动，我们还需要做一些工作。

第一步：在dev-server.js文件中监听html文件改变事件，修改后的dev-server.js文件如下：

// 引入必要的模块
var express = require('express')
var webpack = require('webpack')
var config = require('./webpack.dev.conf')
// 创建一个express实例
var app = express()
// 调用webpack并把配置传递过去
var compiler = webpack(config)
// 使用 webpack-dev-middleware 中间件
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: config.output.publicPath,
stats: {
colors: true,
chunks: false
}
})
var hotMiddleware = require('webpack-hot-middleware')(compiler)
// webpack插件，监听html文件改变事件
compiler.plugin('compilation', function (compilation) {
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
// 发布事件
hotMiddleware.publish({ action: 'reload' })
cb()
})
})
// 注册中间件
app.use(devMiddleware)
// 注册中间件
app.use(hotMiddleware)
// 监听 8888端口，开启服务器
app.listen(8888, function (err) {
if (err) {
console.log(err)
return
}
console.log('Listening at http://localhost:8888')
})

第二步：修改webpack.dev.conf.js文件

var HtmlWebpackPlugin = require('html-webpack-plugin')
var path = require('path');
var webpack = require('webpack');
// 引入基本配置
var config = require('./webpack.config');
config.output.publicPath = '/';
config.plugins = [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new HtmlWebpackPlugin({
filename: 'app/index/index.html',
template: path.resolve(__dirname, '../app/index/index.html'),
inject: true
})
];
// 动态向入口配置中注入 webpack-hot-middleware/client
// var devClient = 'webpack-hot-middleware/client';
var devClient = './build/dev-client';
Object.keys(config.entry).forEach(function (name, i) {
var extras = [devClient]
config.entry[name] = extras.concat(config.entry[name])
})
module.exports = config;

文件中修改了devClient变量，将 ‘webpack-hot-middleware/client' 替换成 ‘./build/dev-client'，最终会导致，我们入口配置会变成下面这样：

entry: {
index: [
'./build/dev-client',
path.resolve(__dirname, '../app/index/index.js')
]
},

第三步：新建build/dev-client.js文件，并编辑如下内容：

var hotClient = require('webpack-hot-middleware/client')
// 订阅事件，当 event.action === 'reload' 时执行页面刷新
hotClient.subscribe(function (event) {
if (event.action === 'reload') {
window.location.reload()
}
})

这里我们除了引入 ‘webpack-hot-middleware/client' 之外订阅了一个事件，当 event.action === ‘reload' 时触发，而在 dev-server.js 中有发布的事件：

// webpack插件，监听html文件改变事件
compiler.plugin('compilation', function (compilation) {
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
// 发布事件
hotMiddleware.publish({ action: 'reload' })
cb()
})
})

这样，当我们的html文件改变后，就可以监听的到，最终会执行页面刷新，而不需要我们手动刷新。看下效果：

vue2.0+webpack环境的构造过程

至此，开发环境终于搞定了。

以上所述是小编给大家介绍的vue2.0+webpack环境的构造过程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

vue2.0+webpack环境的构造过程

- Author -

wj704

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
ImageZoom 图片放大镜效果（多功能扩展篇）
Apr 14 Javascript
JS 自定义带默认值的函数
Jul 21 Javascript
关于JS字符串函数String.replace()
Apr 07 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 Javascript
解决微信二次分享不显示摘要和图片的问题
Aug 18 Javascript
简单的网页广告特效实例
Aug 19 Javascript
详解Vue微信公众号开发踩坑全记录
Aug 21 Javascript
Vue项目中最新用到的一些实用小技巧
Nov 06 Javascript
JavaScript中this用法学习笔记
Mar 17 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
Apr 17 Javascript
vue视图不更新情况详解
May 16 Javascript
vue实现条件叠加搜索的解决方法
May 28 Javascript
详解React-Todos入门例子
Nov 08 #Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 #Javascript
值得学习的bootstrap fileinput文件上传工具
Nov 08 #Javascript
BootStrap table使用方法分析
Nov 08 #Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 #Javascript
AngularJS学习笔记（三）数据双向绑定的简单实例
Nov 08 #Javascript
bootstrapfileinput实现文件自动上传
Nov 08 #Javascript
iPhone(1) 大脑(1) iOS16(1) iOS15(1) RNA(2) 数据(1) 陨石(1) DNA(2) 富碳陨石(1) 嘧啶碱基(2)
You might like
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
ThinkPHP中order()使用方法详解
2016/04/19 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
不错的asp中显示新闻的功能
2006/10/13 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
json格式数据的添加，删除及排序方法
2016/01/21 Javascript
JS作为值的函数用法示例
2016/06/20 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
js校验开始时间和结束时间
2020/05/26 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
kNN算法python实现和简单数字识别的方法
2014/11/18 Python
python利用OpenCV2实现人脸检测
2020/04/16 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
tensorflow 实现自定义梯度反向传播代码
2020/02/10 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
python线程优先级队列知识点总结
2021/02/28 Python
Booking.com英国官网：全球酒店在线预订网站
2018/04/21 全球购物
小学生家长评语集锦
2014/01/30 职场文书
小学教师节活动方案
2014/01/31 职场文书
党员个人整改措施
2014/10/24 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
英语投诉信范文
2015/07/03 职场文书
springboot中的pom文件 project报错问题
2022/01/18 Java/Android
Javascript webpack动态import
2022/04/19 Javascript