記錄用webpage搭建vue開發(fā)環(huán)境：
1、首先安裝node和npm。
2、終端進入項目所在目錄，執(zhí)行npm init，一路回車，可以看到目錄下多了一個package.json文件。
3、安裝webpack、vue、vue-loader和一些依賴模塊：
終端執(zhí)行命令 npm i webpack@3.10.0 vue vue-loader css-loader vue-template-compiler
（webpack自身只理解javaScript，loader能讓webpack去處理那些非javaScript文件。vue-loader就是將vue文件轉(zhuǎn)換為js模塊的加載器，css-loader和vue-template-compiler是它需要的依賴。）
4、創(chuàng)建src源碼目錄
在src目錄下新建一個app.vue文件，文件內(nèi)容：
5、在src目錄下新建一個index.js，這將作為我們webpack的入口文件。文件內(nèi)容：
6、在根目錄創(chuàng)建webpack.config.js文件，這是我們webpack的配置文件。在此文件中聲明webpack的入口和出口，并添加需要用到的loader和一些插件，首先我們寫入：
（entry：入口；output：出口；__dirname意為當前目錄，path.join()連接連個字符串成為絕對路徑；rules中指定哪些文件用哪些loader處理，如以.vue結(jié)尾的文件要用vue-loader來處理）
7、在package.json的"scripts"屬性中添加：
"build":"webpack --config webpack.config.js"
8、終端運行指令npm run build，可以看到根目錄下多了個dist文件，里面有一個bundle.js的文件。
9、安裝解析css、style、less、圖片的loader
安裝loader：
npm i less less-loader style-loader url-loader file-loader
webpack.config.js中寫入：
（options中l(wèi)imit:1024是指如果圖片大小小于1024個字節(jié)，則以編碼串輸出）
10、webpack-dev-server的安裝與使用：
命令行執(zhí)行：npm i webpack-dev-server@2.11.2 安裝webpack-dev-server
package.js 中寫入："dev":"webpack-dev-server --config webpack.config.js"
我們需要標識是生產(chǎn)環(huán)境還是正式環(huán)境，先安裝一個名叫corss-env的插件：
npm i cross-env
package.js中改為：
在webpack.config.js中判斷是生產(chǎn)環(huán)境還是正式環(huán)境，如果是正式環(huán)境，則啟用devServer：
const isDev = (process.env.NODE_ENV === 'development')
.......
if(isDev){
config.devServer = {
port:8000,
host:'0.0.0.0',
overlay:{
errors:true,//把錯誤顯示到網(wǎng)頁上
}
hot:true,//使更新組建時只刷新那個組件
open:true//啟動devServer時打開網(wǎng)頁
}
}
module.exports = config
11、安裝處理html的插件：
npm i html-webpack-plugin
在webpack配置文件中引入：
const isDev = process.env.NODE_ENV === 'development'
config中加入：
plugins:[
new webpack.DefinePlugin({
'process.env':{
NODE_ENV:isDev?'"development"':'"production"'
}
})
new HTMLPlugin()
]
12、啟用熱加載插件、使用source-map進行代碼映射：
if(isDev){
config.devtool = '#cheap-module-eval-source-map'
config.devServer = {
port:8000,
host:'0.0.0.0',
overlay:{
errors:true//把錯誤顯示到網(wǎng)頁上
},
hot:true
}
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
)
}
配置文件所有代碼：
webpack.config.js:
const path = require('path')
const webpack = require('webpack')
const isDev = (process.env.NODE_ENV === 'development')
const HTMLPlugin = require('html-webpack-plugin')
const config = {
target:'web',
entry:path.join(__dirname,'/src/index.js'),
output:{
filename:'bundle.js',
path:path.join(__dirname,'/dist')
},
module:{
rules:[
{
test:/\.vue$/,
loader:'vue-loader'
},
{
test:/\.css$/,
use:[
'style-loader',
'css-loader'
]
},
{
test:/\.less/,
use:[
'style-loader',
'css-loader',
'less-loader'
]
},
{
test:/\.(gif|jpg|jpeg|png|svg)$/,
use:[
{
loader:'url-loader',
options:{
limit:1024,
name:'[name].[ext]'
}
}
]
}
]
},
plugins:[
new webpack.DefinePlugin({
'process.env':{
NODE_ENV:isDev?'"development"':'"production"'
}
}),
new HTMLPlugin()
]
}
if(isDev){
config.devtool = '#cheap-module-eval-source-map'
config.devServer = {
port:8000,
host:'0.0.0.0',
overlay:{
errors:true//把錯誤顯示到網(wǎng)頁上
},
hot:true
}
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
)
}
module.exports = config
安裝的所有l(wèi)oader、插件：
"cross-env": "^5.1.4",
"css-loader": "^0.28.11",
"file-loader": "^1.1.11",
"html-webpack-plugin": "^3.2.0",
"less": "^3.0.1",
"less-loader": "^4.1.0",
"style-loader": "^0.20.3",
"url-loader": "^1.0.1",
"vue": "^2.5.16",
"vue-loader": "^14.2.2",
"vue-template-compiler": "^2.5.16",
"webpack": "^3.10.0",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^2.11.2"
