const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');

module.exports={
    entry: './src/app.jsx',
    output:{
        path: path.join(__dirname,'dist'),
       // publicPath: '/dist/',
        filename: 'app.js'
    },
    module:{
        rules:[
            {
                test: /\.jsx$/,
                exclude: /(node_modules)/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['env','react']
                  }
                }
            },
            {
                test: /\.css$/,
                use:[{
                    loader: MiniCssExtractPlugin.loader,
                    options:{
                        publicPath: 'dist/css'
                    }
                },
                "css-loader"
                ]
            },
            {
                test: /\.less$/,
                use: [ 'style-loader', 'less-loader' ] // creates style nodes from JS strings    
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            name:'resource/[name].js'
                        }
                    }
                ]
            },
            // sass文件
            {
                test: /\.scss$/,
                use: [{
                    loader: "style-loader" // 将 JS 字符串生成为 style 节点
                }, {
                    loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
                }, {
                    loader: "sass-loader" // 将 Sass 编译成 CSS
                }]
              }
        ]
    },
    devServer: {
        contentBase: './dist'
    },
    plugins:[
        // 处理HTML文件
        new HtmlWebpackPlugin({
            title: 'admin-react',
            template: './index.tpl.html',
            filename: 'index.html'
        }),
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css'
        })
    ],

}