1.使用webstrom创建一个空的项目
2.在项目下创建文件夹和文件
a.创建css文件夹存放index.css文件，文件内容如下：
[css] view plain copy
p{
font-size: 24px
padding:0 100px
color:blue
}
p:nth-of-type(2) {
font-size: 30px
text-align: center
color:black
font-family:"幼圆"
}
p:nth-of-type(3) {
color: red
font-weight:bold
text-align: right
}
b.创建index文件夹，存放index.html文件，文件内容如下： [javascript] view plain copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>myFirstDemo</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
c.创建data文件夹存放index.json文件，文件内容如下： [javascript] view plain copy
{
"name":"hello webpack",
"content":"this is my first demo",
"start":"Ready Go!"
}
d.创建jsproject文件夹存放createdom.js和entry.js文件。
entry.js
[javascript] view plain copyrequire('./../css/index.css')
var createdom = require('./createdom.js')
document.getElementById('app').appendChild(createdom())
createdom.js [javascript] view plain copyvar message=require('./../data/index.json')
module.exports = function() {
var greet=document.createElement('div')
greet.innerHTML="<p>"+message.name+"</p>"+"<p>"+message.content+"</p>"+"<p>"+message.start+"</p>"
return greet
}
3.命令 *** 作
在webstorm的Terminal窗口执行如下命令：
a.生成依赖文件package.json(默认会在根目录下生成)
cnpm init
b.依次安装相关依赖（安装后项目根目录下会出现node_modules文件夹，下面包含下载的依赖）
(1)cnpm intsall webpack -g
(2)cnpm install --save-dev webpack
(3)cnpm install --save-dev css-loader
(4)cnpm install --save-dev style-loader
(5)cnpm install --save-dev json-loader
(6)cnpm install --save-dev webpack-dev-server
4.配置webpack.config.js文件
在项目根路径下创建webpack.config.js文件，文件内容为：
[javascript] view plain copyvar webpack = require('webpack')
module.exports = {
//2、进出口文件配置
entry:__dirname+'/jsproject/entry.js',//指定的入口文件,“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录
output: {//输出
path: __dirname+'/index',//输出路径
filename: 'bundle.js'//输出文件名
},
module: {//在配置文件里添加加载器说明，指明每种文件需要什么加载器处理
loaders: [
{//json加载器
test: /\.json$/,
loader: "json-loader"//注意-loader不能省略，网上说能省略，经测试编译会报错
},
{//5、编译es6配置
test:/\.js$/,
exclude:/node_modules/,
loader:'babel-loader',//在webpack的module部分的loaders里进行配置即可
query:{
presets:['es2015','react']
}
},
{//3、CSS-loader
test:/\.css$/,
loader:'style-loader!css-loader'//添加对样式表的处理
}
]
},
//4、服务器依赖包配置
devServer: {//注意：网上很多都有colors属性，但是实际上的webpack2.x已经不支持该属性了
contentBase: "./index",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
//hot：true,//不要书写该属性，否则浏览器无法自动更新
//publicPath："/asses/",//设置该属性后，webpack-dev-server会相对于该路径
},
plugins:[]//插件
}
此时的文件目录为：
5.启动服务
在Terminal中输入：
webpack
执行完成后，输入：
webpack-dev-server
然后在浏览器中输入：http://localhost:8080/
此时可以看到效果了，而且更新代码。浏览器也会实时刷新。
有人觉得vue项目难调试，是因为用了webpack。所有代码揉在了一起，还加了很多框架代码，根本不知道怎么下手。所以vue+webpack调试要从webpack入手。1.我们先从一般情况开始说。
-sourcemap
webpack配置提供了devtool这个选项，如果设置为 ‘#source-map’，则可以生成.map文件，在chrome浏览器中调试的时候可以显示源代码。
devtool: '#source-map'
2.然而这个设置实际上没这么简单。webpack官方给出了7个配置项供选择:
01.devtool介绍
这里不同的配置有些不同的效果，比如是否保留注释、保留行信息等，具体每一条什么意思这里不详解释，有兴趣的童鞋可以参考这篇文章
官方默认的是用 ‘#cheap-module-eval-source-map’
devtool: '#cheap-module-eval-source-map'
设置好之后，在vue项目调试的时候，代码里面标注debugger的时候就能看到对应的代码了，非常方便。
02.debugger
或者，直接找到对应的文件。在chrome用 ’ctrl(command) + p‘，输入文件名，可以找到对应的源代码。
command+p
打断点：
断点
需要注意的是，这里断点会打在下一行。同时一行代码运行在它的下一行才算执行。
03.-vue-cli
vue家的项目脚手架，推荐使用。vue-cli老家在这里
vue-cli可以帮我们自动搭建项目，首先npm全局安装
npm install -g vue-cli
然后创建一个新的项目
vue init webpack my-project
一路回车，搞定。(更多配置项请参考上面给出的vue-cli链接)
这里从网上下载了一个带webpack的vue项目(跑之前记得npm install一下)
04.vue-cli webpack
从bulid文件夹里面就大概能看出：
•webpack.dev.conf: 开发模式用
•webpack.prod.conf: 生产模式用
其中，开发模式提供了devtool为’#cheap-module-eval-source-map’，生产模式根据config文件夹下的productionSourceMap变量控制是否使用。
若为true，则devtool为’#source-map’
其他使用方法一致。非常方便。
3.线上调试
平时开发的时候，我们用webpack的热加载，可以省去挂载调试的步骤，非常方便。但是发布后部署到服务器上，就失去了这个本地优势。
如果使用挂载文件方式会比较麻烦。由于webpack打出来的文件有版本号这些信息，而且发布一个包看代码量可能需要等待不等，这个方案不实际。但是如果挂载的是热加载到端口下的文件的话，这个问题就很好办了。
-热加载
在此之前，先来分析一下webpack的热加载原理。
对项目抓包可以发现这么一个文件：__webpack_hmr
__webpack_hmr
这是webpack热加载的服务器推送事件，eventsource类型，功能和websocket有点类似。大致作用是建立一个不会停止的stream流链接，服务器发送更新数据回来append到流的末端，前端读取最新append的数据，然后动态的更新页面上的东西。
接下来我们观察下上文提到的更新数据有哪些。随便更新一个文件，触发热加载，再抓个包，发现有两个.hot-update.json和一个.hot-update.js文件
热加载更新文件
这些具体做了些啥我不知道，这里就不深究了。应该是根据json里面的数据，达到一个准确更新的效果。
所以热更新其实就是监听服务器上的数据，有修改的话服务器发送数据过来，前端把数据拿来后替换到页面上这么一个过程。
-AutoResponder
接下来谈谈线上挂载测试，这里推荐一款软件：fiddler
fiddler有一个功能叫做AutoResponder，它可以将一个地址指向另一个地址。之所以用这个软件，是因为它能匹配正则，非常方便。
AutoResponder
上一节说到，webpack热加载用到了这几类文件
•__webpack_hmr
•xxxxxxxxxxx.hot-update.json
•xxxxxxxxxxx.hot-update.js
作为小白啥都不懂，弄了半天没懂怎么打包，最后在webstorm的上运行npm run build
运行完后会出现一个dist文件夹如下：
但是生成后本地是打不开的，需要执行以下命令使得本地可以查看
然而，，，，点击dist的index.html文件打开，你会发现他是空白的，，，，emmm继续百度后，解决如下：
解决了这个问题后，本地终于可以打开页面了，但是跳转不了啊，最后，发给后端后，嗯，他那边可以正常运行，emmm可能本来就跳转不了。。。那就可以了。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）