全局安装命令
$ npm install -g webpack
全局安装的路径C:\Users\Web前端\AppData\Roaming\npm
本地安装命令
$ npm install webpack
在项目新建webpack配置文件webpack.config.js
module.exports = {
devtool:"source-map", //调试
// 入口文件
entry : __dirname + "/src/main.js",
//导出文件
output : {
//导出文件的名字
filename : "bundle.js",
//导出文件的路径
path ：__dirname + "/public"
},
//加载器
module : {
//loader 用来转换文件的格式
loaders : [{
test : /\.js$/,
//$ npm install babel-loader
//$ npm install babel-core babel-preset-es2015 //安装babel 实现ES6 转 ES5
loader : "babel-loader"
},{
test : /\.css$/,
//$ npm install css-loader
loader : "css-loader"
}]
},
//Vue2.0需加上下面这份个
resolve: {
alias: {
'vue': 'vue/dist/vue.js'
}
},
//配置服务器,实现热更新
//$ npm install -g webpack-dev-server
devServer : {
//服务器要加载页面的路径
contentBase : "./public",
//true 热更新
inline : true,
//端口号
//port : 8080
}
}
新建一个新的文件,名字叫.babelrc在.babelrc文件里面写上
{
"presets":
[ "es2015" ]
}
