vue的环境初始化
下载nodejs
https://nodejs.org/en/download/
安装
node -v
#查看版本
npm -v在所在的目录下执行$ npm init --yes
安装webpack
npm i webpack@3.12.0 -g
查看版本webpack -V
执行
$ webpack ./main.js ./bundle.js
使用npm执行
在main.js,修改"dev":"webpack"
{
"name": "01",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"dev":"webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.12.0"
}
}
新建文件
module.exports={
//entry入口
//output出口
entry:{
main:'./main.js'
},
output:{
filename:'./bundle.js'
}
}
执行命令
$ webpack
更改package.json
{
"name": "01",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"dev": "webpack --config ./webpack.dev.config.js",
"build": "webpack --config ./webpack.prod.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^3.5.3",
"style-loader": "^1.2.1",
"webpack": "^3.12.0"
}
}
执行的命令
$ npm run dev
#########################
引进css的文件
$ npm install css-loader -D;npm install style-loader -D
在packgae.json中有
{
"name": "01",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"dev":"webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.12.0"
}
}
新建文件
module.exports={
//entry入口
//output出口
entry:{
main:'./main.js'
},
output:{
filename:'./bundle.js'
}
}
执行命令
$ webpack
更改package.json
{
"name": "01",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"dev": "webpack --config ./webpack.dev.config.js",
"build": "webpack --config ./webpack.prod.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^3.5.3",
"style-loader": "^1.2.1",
"webpack": "^3.12.0"
}
}

浙公网安备 33010602011771号