webpack配置

var webpack = require("webpack");

// 若是要單獨寫一個css文件的話 安裝這個插件，而且引進
var ExtractTextPlugins = require('extract-text-webpack-plugin');
// 根據上面的
var extractCSS = new ExtractTextPlugins('css/index.css');


var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {    
    // 單入口
    // entry:__dirname + '/src/js/index.js',
    // 增長入口
    entry:{
        // 輸出 app.js __dirname 表示完整路徑
        app:__dirname + '/src/js/index.js',
        // 其餘入口
        more:[__dirname+ '/src/js/a.js',__dirname + '/src/js/b.js'],
        // 引入包  若是加入其它的就在數組中寫出來好比['jquery','react']
        // 輸出v.js
        v:['jquery']
    },
    // 輸出
    output:{
        path:__dirname + '/assets/',
        // 一個出口
        // filename:"js/index.js",
        // 多個出口  [name]
        filename:"js/[name].js",
        // 配置的時候，這個能夠省略
        // publicPath:"/assets/"
    },
    // 配置本地服務
    devServer:{
        contentBase:"./",
        host:'192.168.0.100',
        port:'8080',
        color:true
    },
    module:{
        // 能夠在npmjs中搜索本身所要的包
        // 好比我如今須要編譯sass 那我就能夠輸入sass-loader  右側提示如何安裝包npm install sass-loader
        // 複製loaders
        //  {
          //   test: /\.scss$/,
         //   loaders: ["style", "css", "sass"]
          // }

        loaders:[
        // 引進了ExtractTextPlugins換一種寫法
            // {
            //     test:/\.css$/,
            //     loader:'style-loader!css-loader'
            // },
            {
                test:/\.css$/,
                loader:extractCSS.extract('style-loader',"css-loader")
            },
            // less自動轉移
            {
                test: /\.less$/,
                loader: "style!css!less"
            },
            // {
            //     test:/\./,
            //     loader:
            //     include/exclude
            //     query爲loader提供額外的配置
            // }
            {
                test:/\.json$/,
                loader:"json"
            },
            {
                test:/\.js$/,
                // 表示不包括這個文件夾
                exclude:/node_modules/,
                loader:'babel',
                // 
                query:{
                    // 
                    presets:['es2015','react']
                }
            },
            /*  {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel?presets[]=es2015'
              }*/
            // 圖片配置
            {
                test:/\.png$/,
                // ？後面配置的是屬性  小於1(1024)KB轉爲base64 [exports]後綴 [name]源文件名  url-loader改爲file-loader就能夠  最好用絕對路徑
                loader:"url-loader?limit=1024&name=/img/[hash:8].[name].[exports]"
            }
        ]
    },
    // 插件選項
    plugins:[
    // 熱加載模塊
        new webpack.HotModuleReplacementPlugin(),
    // css模塊提取
        extractCSS,
    // html模塊
        new HtmlWebpackPlugin({
            // title:'wos',
            filename:'../index.html',
            // 模板位置。建議寫絕對路徑
            template:__dirname+'/src/tpl/index.html',
            // 更新到哪裏，在body
            inject:'body',
            // 儘可能減小這些模板的使用
            info:'Hello' 
        }),
    // js壓縮
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        // 一個引進jq的插件
        new webpack.ProvidePlugin({
            $:'jquery'
        }),
        // 共享插件塊 每個頁面都有這個  這個方法只能用一次
        // new webpack.optimize.CommonsChunkPlugin('v','lib/jquery.min.js') 提取公共代碼
        new webpack.optimize.CommonsChunkPlugin({
            // 只能寫a 和 b 不能寫a.js和b.js
            // name 是配置文件裏面入口文件的鍵名，filename 是輸出的文件名。
            names:['a','b']
            // filename: [c,d],
        })
        // 提供公共代碼
        // 默認會把全部入口節點的公共代碼提取出來,生成一個common.js
        // 只提取main節點和index節點
        // new webpack.optimize.CommonsChunkPlugin('common.js',['main','index']),
        // 推薦
        // new webpack.optimize.CommonsChunkPlugin({
          //           name:'common', // 注意不要.js後綴
          //           chunks:['main','user','index']
          //       }),

    ],
    // 擴展  cdn的方式  好比項目很大，就用本身的cdn
    // externals:{
    //     jquery:"http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"
    // }
    // watch:true
}