webpack使用

    var glob = require("glob");
    // ...
    entry: glob.sync("./src/scripts/*.js")

const webpack = require(‘webpack‘);       //访问内置插件
const path = require(‘path‘);
var htmlWebpackPlugin = require(‘html-webpack-plugin‘);//installed via npm

const config = {
        devtool: "cheap-eval-source-map",    //生成何种类型的源代码映射文件，方便调试打包后的代码
        entry: {                //webpack打包的切入点，一般一个页面的业务代码定义一个entry point
            home: ["./footer.js", "./home.js"],    //若为[string]，则将多个相互独立的文件及其依赖打包成一个chunk，key为输出name
            about: "./about.js",
            contact: "./contact.js"
        },
        output: {                   //输出配置
            path: path.resolve(__dirname, ‘dist‘),       //打包后输出的路径
            filename: ‘[name].[chunkhash:8].js‘,      //打包后输出的文件名,多个entry需要替换
            publicPath: ‘/assets/‘    //供插件在生产模式下更新内嵌到css、html文件里的相对路径url值
        },
        module: {       //    webpack2.0的字段名做了些修改
            rules: [        //每条rule定义对应的module如何生成，是loaders的alias
                {
                    test: /\.(js|jsx)$/,//一个匹配loaders所处理的文件的拓展名的正则表达式
                    exclude: /(node_modules|bower_components)/,
                    use: [　　//使用到的loader及其配置
                        {
                            loader: ‘babel-loader‘,//使用的加载器名称，-loader后缀不能省略；也可通过?query设置参数
                            options: {      //为当前loader设置的参数,对于babel可以提取出单独放在.babelrc文件中;
                                presets: [‘react‘, ‘es2015‘],
                                plugins: [require(‘react-html-attrs‘)]
                            }
                        }
                    ]
                },
                {
                    test: /\.css$/,
                    exclude: /(node_modules)/,    //手动添加必须处理(include)或屏蔽不需要处理的文件（文件夹）
                    use: [//使用多个loader处理同一源文件，从右往左顺序处理
                        //css-loader将css文件当作一个模块引入当前模块中，类名相同样式也不会冲突；style-loader将当前模块中的样式引入页面的style元素中
                        {
                            loader: ‘style-loader‘
                        },
                        {
                            loader: ‘css-loader‘,
                            options: {
                                importLoaders: 1
                            }
                        },
                        {
                            loader: ‘less-loader‘,
                            options: {
                                noIeCompat: true
                            }
                        }
                    ]
                },
                {
                    test: /\.(png|jpg)$/,      //使用 url-loader引入图片，小于8kb的直接转为base64
                    loader: ‘url-loader?limit=8192‘
                }
            ]
        },
        plugins: [                        //添加插件实例
            new htmlWebpackPlugin({     //依据模板，生成最终的Html文件，该文件自动引用了打包后的JS文件，不用手动一个一个修改src
                filename: ‘home.index‘,         //输出文件的名字
                template: ‘./src/index.html‘,//使用的模版
                title: ‘this is home page‘,//传入模版的参数，在模版中可以通过<%=htmlWebpackPlugin.options.title%>获取该值
                inject: ‘body‘,             //插入script的位置
                chunks: [‘common‘],         //模版页面会包含的模块
                excludeChunks: [‘a‘, ‘b‘]   //排除引入的模块
            }),
            new webpack.optimize.CommonsChunkPlugin(‘common.js‘), //把所有入口节点的公共代码提取出来,生成一个common.js进行复用
        ],
        watch: true,//监听源文件的修改，之后recompile，但不刷新页面。为了提高性能，需要将safe write关闭，用save file触发。
        watchOptions: {
            aggregateTimeout: 300,//从修改文件开始到rebuilding的延迟时间，将多个改变积累到一起
            poll: 1000,        //Check for changes every second
            ignored: /node_modules/    //排除监听的目录
        }
        devServer: {    //构建本地服务器实时提供服务并刷新，编译后的文件保存在内存中，所以比较快。
            contentBase: "./",//本地服务器所提供服务的内容来源
            port: 8080,    //监听端口，和编辑器的端口不一样
            colors: true,//终端中输出结果为彩色
            historyApiFallback: true,//所有的跳转将指向index.html
            inline: true    //会输出错误
        }
    }
;
module.exports = config;