webpack详细配置讲解

//常见的Webpack配置文件
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
    /**
     * entry可以是字符串、数组、对象
     *  string 用来定义入口文件
     *  array  
     *  object 将不同的文件构建成不同的文件，按需使用
     */
    entry:'./js/main.js',

    /**
     * output参数是对象
     */
    output:{
        path:'', //打包后文件存放的路径
        publicPath: "/static/build/",  //webpack-dev-server访问的路径
        filename:'', // 打包后的文件名
        chunkFilename: "bundle-[id].js"   //输出chunk文件名
    },

    //模块加载器
    module:{
        noParse: [],            // 忽略解析的文件
        preLoaders: [{          // 预加载的模块
            test: /\.jsx$/,
            exclude: /node_modules/,
            loader: 'jsxhint-loader'
        }],
        loaders:[
            {
                test:/.js$/, // 正则表达式
                  loader:'babel',  // babel加载器
                  include:_dirname+'/src', //包含什么文件
                  exclude:'/node_modules/' //什么文件夹除外
            },
            {
                //匹配正则表达式
                test: /\.(png|jpg|jpeg)$/,
                //限制在8K范围内用url-loader
                  loader: 'url-loader?limit=8192'
            },
             //.css 文件使用 style-loader 和 css-loader 来处理
            {
                test: /\.css$/,
                //-loader其实是可以省略不写的,多个loader之间用'!'连接起来
                loader: 'style-loader!css-loader'
            },
        ],
    },

    //显示指出依赖查找路径
    resolve:{
        //查找module的话从这里开始查找
        root: 'E:/github/flux-example/src', //绝对路径
        //自动补全请求文件模块后缀 require('common')==require('common.js')
        extensions:['','.js','.json','.css'],
        //模块别名定义，方便后续直接引用别名，无须多写长长的地址
        alias: {
            //后续直接 require('AppStore') 即可
            AppStore : 'js/stores/AppStores.js',
            ActionType : 'js/actions/ActionType.js',
            AppAction : 'js/actions/AppAction.js'
        }
    },

    //请求第三方库或API时，不被构建到运行时文件中 申明为外部依赖并指定别名
    externals:{
        "jquery":"jQuery"
    },

    //配置引入到项目当中的webpack插件
    plugins:[
        //给输出的文件头部添加注释信息
        new webpack.BannerPlugin('This file is created by zhaoda'),
        //提取公用代码块
        new CommonsChunkPlugin("admin-commons.js", ["ap1", "ap2"]),
        commonsPlugin,
        //
        new HtmlWebpackPlugin({
          template: __dirname + "/app/index.tmpl.html"
        }),
        //热加载插件
          new webpack.HotModuleReplacementPlugin(),
          //为组件分配ID
          new webpack.optimize.OccurenceOrderPlugin(),
        // 压缩js插件
        new webpack.optimize.UglifyJsPlugin(),
        //生成单独的css文件
        new ExtractTextPlugin("[name]-[hash].css")
    ],

     //使用webpack-dev-server，提高开发效率
    devServer: {
        contentBase: './',
        host: 'localhost',
        port: 3200, //比如我是监听3200端口
        inline: true, //可以监控js变化
        hot: true, //热启动
    }
}