babel,webpack-dev-server配置

 github倉庫：https://github.com/llcMite/webpack.git

一、什麼是webpack？

webpack能夠看作是模塊打包機：它作的事情是，將靜態資源當成模塊打包成一個或者多個文件。而且能夠將javascript模塊及其它一些瀏覽器不能直接運行的擴展語言（less，sass，es6，TypeScript）打包成合適的格式以供瀏覽器使用。

二、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()
    ]
}