babel,webpack-dev-server配置

 github仓库：https://github.com/llcMite/webpack.git

1、什么是webpack？

webpack可以看做是模块打包机：它做的事情是，将静态资源当成模块打包成一个或者多个文件。并且可以将javascript模块及其它一些浏览器不能直接运行的扩展语言（less，sass，es6，TypeScript）打包成合适的格式以供浏览器使用。

2、webpack和grunt以及gulp相比有什么特性？

webpack与另外两个是没有什么可比性的，gulp/grunt是一种能够优化前端的开发流程，而webpack是一种模块化的解决方案，webpack的优点使得他可以替代gulp和grunt类工具。

 

注意：现在版本更新的都很快，如果你不是很熟悉最新的版本，最好先使用旧的版本会更好。

这里只记录常用的几个模块配置：

   1）babel

首先安装需要的模块babel-preset-react是我配置react的jsx语法用的，不用的可以不需要安装

cnpm install babel-core babel-loader babel-preset-env babel-preset-react --save-dev

 然后在webpack.config.js里配置

var path=require('path');

module.exports={
       //入口
    entry:{
        index:'./index.js',
    },
    //输出
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    module:{
        //babel配置
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['react', 'env']
                }
            }
        ]
    },
}

 

  2）webpack-dev-server(用于自动刷新和热模块替换(只替换更新的部分而不是页面重载))

cnpm install webpack-dev-server --save-dev

 配置webpack.config.js

var path=require('path');
var webpack=require('webpack');

module.exports={
        //入口
    entry:{
        index:'./index.js',
    },
    //输出
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    //webpack-dev-server配置
    devServer:{
        contentBase: path.join(__dirname, "dist"),   //指定服务器资源的配置属性
        port:7000,      
        //host:'0,0,0,0'
        overlay: true,  //当编译出错时在浏览器上显示错误
        stats:'errors-only', //打印想要打印的信息minimal"，"normal"，"verbose
        compress:true, //当它被设置为true的时候对所有的服务器资源采用gzip压缩
        hot:true,      //自动刷新
        inline:true,   //模块热替换
        // 是否需要跨域去请求接口本地测试
        // proxy: {
        //     "/api":{
        //         target:"xxx.xx.com",
        //         changeOrigin:true,
        //         pathRewrite:{
        //             "^/api":""
        //         }
        //     }
        // }

    },
    module:{
        //babel配置
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['react', 'env']
                }
            },
          
        ]
    },
    plugins:[
       new webpack.HotModuleReplacementPlugin()
    ]
}