webpack学习

var path = require("path");
var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require(‘ ‘);


module.exports = {
      // @ ../不行
      entry: {cou:‘./js/cou.js‘},
      //entry:[‘./js/cou.js‘],
      output: {
        path: path.join(__dirname, ‘./build‘), 
        filename: ‘js/[name].js‘
    },

 module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: ‘babel-loader‘
            }, 
            {
                test: /\.css$/,
                //loader:‘style!css‘,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader")
            },
            {
               test: /\.less$/,
                //配置less的抽取器、加载器。中间!有必要解释一下，
                //根据从右到左的顺序依次调用less、css加载器，前一个的输出是后一个的输入
                //你也可以开发自己的loader哟。有关loader的写法可自行谷歌之。
                //loader: ExtractTextPlugin.extract("css-loader","less-loader")出错
                 loader: ExtractTextPlugin.extract(‘css!less‘)
            },

            {
                test: /\.(png|jpg|gif)$/,
                loader: ‘url?limit=40000&name=images/[name].[ext]‘
            },
            //对应HtmlWebpackPlugintemplate
            //html模板加载器，可以处理引用的静态资源，默认配置参数attrs=img:src，处理图片的src引用的资源
            //比如你配置，attrs=img:src img:data-src就可以一并处理data-src引用的资源了，就像下面这样
            {test: /\.html$/,
            loader: ‘html?minimize=true‘}
        ]
    },
    resolve: {
       root: ‘E:/github/flux-example/src‘, //绝对路径
       extensions: [‘‘, ‘.webpack.js‘, ‘.coffee‘, ‘.json‘, ‘.js‘, ‘.jsx‘],
       alias: { 
          //设置别名
            "coupon":"./../css/cou.css",
            "bless":"./../less/b.less"
        }
    },

  plugins: [
        new ExtractTextPlugin("css/[name].css"),
        //每次都会覆盖
        new HtmlWebpackPlugin( {
          //html输出的文件名
          filename: ‘index.html‘,
          //压缩的html
          template: ‘./index.html‘,
           minify:{    //压缩HTML文件
                 removeComments:true,    //移除HTML中的注释
                 collapseWhitespace:false    //删除空白符与换行符
             }
          //new webpack.HotModuleReplacementPlugin() //热加载
        })
    ],


};

require("coupon");

alias: {
//设置别名
"coupon":"./../css/cou.css",
"bless":"./../less/b.less"
}