webpack.config.js配置详解

var path = require('path') //引用内部文件
var webpack = require('webpack') //引用内部文件
var HtmlWebpackPlugin = require('html-webpack-plugin'); //引用外部文件
var OpenBrowserPlugin = require('open-browser-webpack-plugin'); //引用外部文件


module.exports = {
    entry: path.resolve(__dirname, 'app/index.jsx'),//输入文件
    output: {
        filename: "bundle.js" //输出文件
    },


    resolve:{
        extensions:['', '.js','.jsx']
    },


    module: {

        loaders: [

//loader：加载器，和spring里面的加载限制很像 ，其中test表示检测，后面的表示执行情况

            { test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel' },
            { test: /\.less$/, exclude: /node_modules/, loader: 'style!css!postcss!less' },
            { test: /\.css$/, exclude: /node_modules/, loader: 'style!css!postcss' },//这里配置了，出现这种情况时候，走下面红色的配置
            { test:/\.(png|gif|jpg|jpeg|bmp)$/i, loader:'url-loader?limit=5000' },  // 限制大小5kb
            { test:/\.(png|woff|woff2|svg|ttf|eot)($|\?)/i, loader:'url-loader?limit=5000'} // 限制大小小于5k
        ]
    },


    postcss: [
        require('autoprefixer') //调用autoprefixer插件，例如 display: flex
    ],


    plugins: [
        // html 模板插件
        new HtmlWebpackPlugin({
            template: __dirname + '/app/index.tmpl.html'
        }),


        // 热加载插件
        new webpack.HotModuleReplacementPlugin(),


        // 打开浏览器
        new OpenBrowserPlugin({
          url: 'http://localhost:8080'
        }),


        // 可在业务 js 代码中使用 __DEV__ 判断是否是dev模式（dev模式下可以提示错误、测试报告等, production模式不提示）
        new webpack.DefinePlugin({
          __DEV__: JSON.stringify(JSON.parse((process.env.NODE_ENV == 'dev') || 'false'))
        })
    ],

    //常用配置
    devServer: {
        colors: true, //终端中输出结果为彩色
        historyApiFallback: true, //不跳转，在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
        inline: true, //实时刷新
        hot: true  // 使用热加载插件 HotModuleReplacementPlugin
    }
}