记录用webpage搭建vue开发环境：
1、首先安装node和npm。
2、终端进入项目所在目录，执行npm init，一路回车，可以看到目录下多了一个package.json文件。
3、安装webpack、vue、vue-loader和一些依赖模块：
终端执行命令 npm i [email protected] vue vue-loader css-loader vue-template-compiler
（webpack自身只理解javaScript，loader能让webpack去处理那些非javaScript文件。vue-loader就是将vue文件转换为js模块的加载器，css-loader和vue-template-compiler是它需要的依赖。）
4、创建src源码目录
在src目录下新建一个app.vue文件，文件内容：
5、在src目录下新建一个index.js，这将作为我们webpack的入口文件。文件内容：
6、在根目录创建webpack.config.js文件，这是我们webpack的配置文件。在此文件中声明webpack的入口和出口，并添加需要用到的loader和一些插件，首先我们写入：
（entry：入口；output：出口；__dirname意为当前目录，path.join()连接连个字符串成为绝对路径；rules中指定哪些文件用哪些loader处理，如以.vue结尾的文件要用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中limit:1024是指如果图片大小小于1024个字节，则以编码串输出）
10、webpack-dev-server的安装与使用：
命令行执行：npm i [email protected] 安装webpack-dev-server
package.js 中写入："dev":"webpack-dev-server --config webpack.config.js"
我们需要标识是生产环境还是正式环境，先安装一个名叫corss-env的插件：
npm i cross-env
package.js中改为：
在webpack.config.js中判断是生产环境还是正式环境，如果是正式环境，则启用devServer：
const isDev = (process.env.NODE_ENV === 'development')
.......
if(isDev){
config.devServer = {
port:8000,
host:'0.0.0.0',
overlay:{
errors:true,//把错误显示到网页上
}
hot:true,//使更新组建时只刷新那个组件
open:true//启动devServer时打开网页
}
}
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//把错误显示到网页上
},
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//把错误显示到网页上
},
hot:true
}
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
)
}
module.exports = config
安装的所有loader、插件：
"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"