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
}