webpack的基本应用

全局安装命令

$ 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" ] 
}