webpack如何配置到vue项目
㈠ 如何在WebStorm 2017下调试Vue.js + webpack
有人觉得vue项目难调试，是因为用了webpack。所有代码揉在了一起，还加了很多框架代码，根本不知道怎么下手。所以vue+webpack调试要从webpack入手。
1.我们先从一般情况开始说。
-sourcemap
webpack配置提供了devtool这个选项，如果设置为 ‘#source-map’，则可以生成.map文件，在chrome浏览器中调试的时候可以显示源代码。
devtool: '#source-map'
2.然而这个设置实际上没这么简单。webpack官方给出了7个配置项供选择:
01.devtool介绍
这里不同的配置有些不同的效果，比如是否保留注释、保留行信息等，具体每一条什么意思这里不详解释，有兴趣的童鞋可以参考这篇文章
官方默认的是用 ‘#cheap-mole-eval-source-map’
devtool: '#cheap-mole-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-mole-eval-source-map’，生产模式根据config文件夹下的proctionSourceMap变量控制是否使用。
若为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
㈡ vue2.0用脚手架搭建的官方例子怎么用webpack打包 如何配置
前言 vue2 然后通过以下命令安装 webpack cnpm install webpack -g 注：下面 orange 默认给出 npm 的安装方案，安装失败请自行转为 cnpm 安装 在需要创建工程的位置运行 vue init webpack-simple 工程名字 或者创建 vue1.0 的项目
㈢ 现在想让Vue在调试时候,对Vue环境配置应该如何设置。如何改变Vue环境的端口
方法一 .在启动script里面添加--port空格端口号例:
㈣ 怎么 基于webpack开发vue
其实webpack很简单，但是对于刚开始的新手，从gethub上下一个项目，一大堆的配置，着实有些头大。我也是从一个坑一个坑被坑着走过来的，差点被sass坑个半死，到现在我都没有解析成功，只做到了解析less。
㈤ iviewui怎么引入vue-cli里面
使用vue-cli构建的vue项目，webpack的配置文件是分散在很多地方的，而我们需要修改的是build/webpack.base.conf.js，修改两处的代码
// 在开头引入webpack，后面的plugins那里需要
var webpack = require('webpack')
// resolve
mole.exports = {
// 其他代码...
resolve: {
extensions: ['', '.js', '.vue'],
fallback: [path.join(__dirname, '../node_moles')],
alias: {
'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components'),
// webpack 使用 jQuery，如果是自行下载的
// 'jquery': path.resolve(__dirname, '../src/assets/libs/jquery/jquery.min'),
// 如果使用NPM安装的jQuery
'jquery': 'jquery'
}
},
// 增加一个plugins
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
// 其他代码...
}
这样就可以正确的使用jQuery了，比如我要引入Bootstrap，我们在vue的入口js文件src/main.js开头加入
// 使用Bootstrap
import './assets/libs/bootstrap/css/bootstrap.min.css'
import './assets/libs/bootstrap/js/bootstrap.min'
这样Bootstrap就正确的被引用并构建。
在比如使用toastr组件，只需要在需要的地方import进来，或者全局引入css在需要的地方引用js，然后直接使用
// 使用toastr
import 'assets/libs/toastr/toastr.min.css'
import toastr from 'assets/libs/toastr/toastr.min'
toastr.success('Hello')
㈥ 如何用webpack打包vue
用webpack打包vue
根据需要设置项目的信息， 也可以一路回车，使用默认信息，默认项目名称为文件夹名（项目名称不要设置成某个模块名，否则将来你引用摸个模块的时候会报错）
name: (new)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords: new
author: fz
license: (ISC)
{
"name": "gt",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"new"
],
"author": "fz",
"license": "ISC"
}
Is this ok? (yes)
之后文件夹下会生成一个package.json,记录了项目的详细信息，包括了各种依赖和插件。
㈦ vue项目环境变量配置的实现方法
问题
实际开发中，开发环境和生产环境中一些变量是不同的，比如接口地址等等，打包之前需要手动切换。
编译时
新建env.js
let
baseUrl
=
'';
if(process.env.NODE_ENV
==
'proction'){
baseUrl
=
'https://xxxxxxxxx';
}
else
if
(process.env.NODE_ENV
==
'development')
{
baseUrl
=
'/api'
}
export
{
baseUrl
}
process.env.NODE_ENV
是通过webpack
内置的
DefinePlugin
为所有的依赖定义的变量
webpack.dev.conf.js
new
webpack.DefinePlugin({
'process.env.NODE_ENV':
'development'
}),
webpack.prod.conf.js
new
webpack.DefinePlugin({
'process.env.NODE_ENV':
'proction'
}),
这样在项目任意文件中都能调用process.env.NODE_ENV变量，本人测试过，process并不是挂载在window变量上，猜测可能是挂载到了node的process变量。
在运行脚本编译项目的时候，会根据变量值的不同，设置不同的baseUrl。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:vue-cli配置环境变量的方法
㈧ webpack怎么引入vue模块
但这个做法的问题是，这个第三方js文件并不是模块的写法，被webpack打包后成了下面这样，文件里alert()可以弹出，但是里面的方法和对象就用不了。
㈨ webpack打包后的代码，如何部署到服务器上
本文章前端代码是基于vue+webpack开发的
Nginx是一款轻量级的Web 服务器/反向代理服务器
首先，webpack配置如下
在开发过程中，我们是通过npm run dev在开发环境中运行代码
如果要部署到生产环境中，可以运行npm run build进行上线打包
打包完成后，会发现项目中多了dist这个文件夹
执行结果和webpack的配置文件一致。
代码被webpack打包完成后下一步就是部署到服务器上，此文仅适合于前端代码是部署在windows操作系统的nginx服务中。
这里假设：
Windows操作系统：windows server 2008 64位
Nginx服务：nginx-1.12.2 64位
1.下载nginx-1.12.2 64位解压，假设nginx-1.12.2放在D:nginx-1.12.2目录中，nginx目录结构。如图下
2、前端代码放在D:nginx-1.12.2html目录中，dist目录就是刚刚前端打包完的代码。如图下
3、在D:nginx-1.12.2conf目录中，有个nginx.conf配置文件，进行编辑这个文件
4、假设前端的端口号为8082，如果端口号被占用，请修改为其它端口号。后台服务访问地址http://192.168.121.**:8080,
5、打开cmd控制台，进入目录D:nginx-1.12.2中，用start nginx命令启动服务，然后用tasklist /fi "imagename eq nginx.exe"，查看nginx服务是否启动。
4、如果改变配置文件时，需要用nginx -s reload 命令重启nginx工作进程。
5、关闭服务
nginx -s stop
nginx -s quit 安全关闭
taskkill /F /IM nginx.exe > nul 关闭所有nginx服务