const path = require('path');
const webpack = require('webpack')
const HtmlwebpackPlugin = require('html-webpack-plugin');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: {
        "formDesign": './src/index.js',
    },
    devtool: 'inline-source-map',
    devServer:{
        contentBase:'./dist',
        compress:true,
        hot:true,
        open: 'Google Chrome',
        port:9000,
    },
    
    plugins: [
        //new CleanWebpackPlugin(),
    //     new MiniCssExtractPlugin({
    //     　　filename: "./css/[name].css"
    // 　　 }),
        new HtmlwebpackPlugin({
          title: 'Webpack-demos',
          filename: 'index.html',
          template: 'index.html'
        }),
        new CopyWebpackPlugin(
            [{ from: './json/config.json', to: './json/config.json' }], 
            { ignore: [], copyUnmodified: true }
        ),
        new CopyWebpackPlugin(
            [{ from: './tpl/*.html', to: './tpl/[name].html' }], 
            { ignore: [], copyUnmodified: true }
        ),
        new CopyWebpackPlugin(
            [{ from: './css/*.css', to: './css/[name].css' }], 
            { ignore: [], copyUnmodified: true }
        ),
        new CopyWebpackPlugin(
            [{ from: './script/*.js', to: './script/[name].js' }], 
            { ignore: [], copyUnmodified: true }
        ),
        new CopyWebpackPlugin(
            [{ from: './fonts/*.*', to: './fonts/[name].[ext]' }], 
            { ignore: [], copyUnmodified: true }
        ),
        // new CopyWebpackPlugin(
        //     [{ from: './images/*.*', to: './images/[name].[ext]' }], 
        //     { ignore: [], copyUnmodified: true }
        // ),
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                   
                    'css-loader',
                ],
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
	            test: require.resolve('./script/jquery-3.3.1.min.js'), //require.resolve 用来获取模块的绝对路径
	            use: [{
	                loader: 'expose-loader',
	                options: 'jQuery'
	            }, {
	                loader: 'expose-loader',
	                options: '$'
	            }]
	        },
            {
                test: /\.woff2?/,
                loader: 'url-loader',
                options: {
                  name: '[path][name].[ext]?[hash]',
                  mimetype: 'application/font-woff',
                },
            },
            {
                test: /\.(jpe?g|gif|svg|ico|ttf|otf|eot|woff|woff2)(\?[a-z0-9=&.]+)?$/i,
                loader: 'file-loader',
                options: {
                    name: '[path][name].[ext]?[hash]',
                },
            },
        
            {
                test: /\.png$/,
                loader: 'file-loader',
                options: {
                  name: '[path]/[name].[ext]?[hash]',
                },
            },
            {
                test: /\.(js?|jsx?|es6)$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['env', 'es2015', 'stage-3']
                }
            }, 
        ],
        
    },
    output:  {
        publicPath: '',
        filename: './[name].js',
        path: path.resolve(__dirname, './dist'),
    },
  };