//處理html文件
const HtmlWebpackPlugin = require("html-webpack-plugin")
//抽離css和sass代碼的
const ExtractTextWebpackPlugin = require(‘extract-text-webpack-plugin‘)
const webpack = require(‘webpack‘)
//處理路徑
const path = require(‘path‘)

//開發配置
const developmentConfig = {
    entry:{//入口
        main:‘./src/main.js‘,
        // vendor:‘./src/vendor.js‘
    },
    // entry:‘./src/app.js‘,
    // entry:[‘./src/app.js‘,‘./src/vendor.js‘],
    output:{//輸出
        path:path.join(__dirname,‘build‘),
        filename:‘[name].js‘
    },
    devServer:{//開發服務器
        port:9000,
        contentBase:‘./build‘,
        historyApiFallback: true,
        open: true,
        proxy:{

        }
    },
    module:{
        rules:[
            {//編譯jade
                test:/\.jade$/,
                use:[‘jade-loader‘,‘html-withimg-loader‘]
            },
            {//處理css、js中引入的圖片
                test:/\.(png|jpe?g|svg|gif)$/,
                // use:‘url-loader?limit=1000&name=images/[hash:8].[name].[ext]‘
                use:[
                    {
                        loader:‘url-loader‘,
                        options:{
                            limit:1000,
                            name:‘/static/images/assets/[hash:8].[name].[ext]‘
                        }
                    }
                ]
            },
            {//處理html引入的圖片，在react中沒啥用
                test:/\.html$/,
                use:‘html-withimg-loader‘
            },
//          {//將css代碼放入header的style標簽中
//              test:/\.css$/,
//              use:[‘style-loader‘,‘css-loader‘]
//          },
//          {//將scss代碼編譯成css，再將css代碼放入header的style標簽中
//              test:/\.scss$/,
//              use:[‘style-loader‘,‘css-loader‘,‘sass-loader‘]
//          },
			{//抽離引入css代碼放入到一個css文件中
				test:/\.css$/,
				use:ExtractTextWebpackPlugin.extract({
		          fallback: "style-loader",
		          use: "css-loader"
		        })
			},
			{//抽離引入scss代碼編譯後放入到一個css文件中
				test:/\.scss/,
				use:ExtractTextWebpackPlugin.extract({
		          fallback: "style-loader",
		          use: ["css-loader","sass-loader"]
		        })
			},
//			{//只編譯jsx
//				test:/\.(js|jsx)$/,
//				exclude:/node_modules/,
//				use:‘jsx-loader‘
//			},
			{//處理js代碼，編譯es6、jsx
			    test:/\.(js|jsx)$/,
			    exclude: /node_modules/,//除了哪個目錄下的代碼
			    loader:‘babel-loader‘,
			    query: {
			        presets: [‘es2015‘,‘react‘]
			    }
			}
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            // title:‘webpack-config-demo‘,
            template:‘./src/index.html‘,
            filename:‘index.html‘
        }),
//      new webpack.optimize.UglifyJsPlugin({
//          compress: {
//              warnings: false,
//              drop_console: false
//          } 
//      }),
        new ExtractTextWebpackPlugin({
        	filename:‘app.css‘,
        	allChunks:true
        })
    ]

}
//生成配置
const productionConfig = {
    entry:{
        app:‘./src/app.js‘,
        vendor:‘./src/vendor.js‘
    },
    output:{
        path:path.join(__dirname,‘build‘),
        filename:‘[name]_[hash].js‘
    },
    plugins:[
        new HtmlWebpackPlugin()
    ]
}
module.exports = (env)=>{
    if(env==‘production‘){
        return productionConfig
    }
    return developmentConfig
}
 

webpack的配置