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服務