最好基于nodeJS@5.x以上版本安装:
使用webpack的优点:
webpack使用commonJS标准编写的模块可以直接打包运行在浏览器上browerwebpack安装:
window+r --> cmd
npm install webpack-cli -g
npm install webpack -g
cd到项目目录:
npm install webpack -D
或者
npm install --save-dev webpack
自行创建webpack.config.js文件
要实现ES6和commonJS的混搭使用,需安装转换器(loader):
babel-core
babel-loader
babel-preset-env
babel-preset-stage-0
即:
npm install babel-core babel-loader babel-preset-env babel-preset-stage-0 -D
并在webpack.config.js文件的module:{}中进行配置:
module:{
rules:[
{test:/\.js$/,loader:"babel-loader",query:{presets:["env","stage-0"]}}
]
}
为减少http请求,需用webpack合并css和js文件:
css -> stylesheet
js -> application/js
要实现css和js的混搭使用(css+js -> main.js),需安装转换器(loader):
style-loader css-loader
即:
npm install style-loader css-loader -D
并在webpack.config.js文件的module:{}中进行配置:module:{
rules:[
{test:/\.css$/,loader:"style-loader!css-loader"},
{test:/\.js$/,loader:"babel-loader",query:{presets:["env","stage-0"]}}
]
}
如果要使用webpack+babel-core编译vue单页面组件 (xx.vue singlepage componet)
即工程化,操作如下:
注意:在安装vue-loader之前,一定要确定css-loader和style-loader已经安装上了
(npm install style-loader css-loader -D 反复多装几次)
然后安装vue-loader:npm install vue-loader -D
如果无法运行或报错:
npm install vue-template-compiler -D
并在webpack.config.js文件的module:{}中进行配置:
module:{
rules:[
{test:/\.vue$/,loader:"vue-loader"},
{test:/\.css$/,loader:"style-loader!css-loader"},
{test:/\.js$/,loader:"babel-loader",query:{presets:["env","stage-0"]}}
]
}
如果运行报错:按如下修改:
在webpack.config.js文件的module:{}中修改:
module:{
rules:[
{test:/\.vue$/,loader:"vue-loader"},
{test:/\.css$/,loader:"style-loader!css-loader"},
{test:/\.js$/,loader:"babel-loader"}
]
}
这是因为:
vue-loader已经集成env和stage-0,因此在安装vue-loader后需把
",query:{presets:["env","stage-0"]}"
删除掉
webpack.config.js文件配置如下:
const path=require("path");
//webpack.config.js文件的实质是commonJS的一个标准化模块
module.exports={
//mode指定是在开发环境(development)下使用webpack
//还是在生产环境(production)下使用的,可以忽略
mode:"development",
//entry指定webpack打包的文件入口
entry:{
//入口名称:main.js
// app:path.resolve(__dirname,"common/main.js")
// app:path.resolve(__dirname,"es6/ES6main.js")
// app:path.resolve(__dirname,"mixin/js/main.js")
app:path.resolve(__dirname,"vue/main.js")
},
//output设置webpack打包后输入的文件路径及文件名称
output:{
path:path.resolve(__dirname,"./vue"),
filename:"[name].bundle.js"
},
resolve:{
//extensions用来配置项目中使用的扩展名
extensions:[".vue"]
},
module:{
rules:[
{test:/\.vue$/,loader:"vue-loader"},
{test:/\.css$/,loader:"style-loader!css-loader"},
//vue-loader已经集成env和stage-0,因此在安装vue-loader后需把
//,query:{presets:["env","stage-0"]}删除掉
// {test:/\.js$/,loader:"babel-loader",query:{presets:["env","stage-0"]}}
{test:/\.js$/,loader:"babel-loader"}
]
}
}