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" ] 
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 最近在学习 Webpack,网上大多数入门教程都是基于 Webpack 1.x 版本的,我学习 Webpack 的...
    My_Oh_My阅读 8,216评论 40 247
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,246评论 7 35
  • 前言 众所周知目前比较火的工具就是gulp和webpack,但webpack和gulp却有所不同,本人两者的底层研...
    cduyzh阅读 1,392评论 0 13
  • 魏同学事件的发生,可以说是必然也可以说是偶然。个人觉得与其把所有希望寄托在一些在现有状态下难以迅速完善的措施政策制...
    彼堓荼蘼想旅行阅读 133评论 0 0
  • 只聊感悟,不送鸡汤,是我对你最真挚的倾吐。 大多数人眼中的人生轨迹是: 上学——毕业——找一份养得活自己的工作——...
    可乐开盖儿阅读 378评论 3 1