react-webpack-flux-babel-natliu/webpack.config.js

react 全栈

var path = require('path');
var webpack = require("webpack");
var miniExtractPlugin = require("mini-css-extract-plugin");
var OptimizeCSS = require("optimize-css-assets-webpack-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    mode: 'development',
    entry: './src/index.jsx',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'index.bundle.js'
    },
    devtool:"eval-source-map",
    devServer:{
        open: true,
        hot: true
    },
    module:{

        rules:[
            {
                test: /\.jsx?$/,
                enforce:"pre",
                exclude: /node_modules/,
                use: {
                    loader: 'eslint-loader'
                }
            },
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test:/\.css$/,
                use: [
                    {
                        loader:miniExtractPlugin.loader,
                        options:{
                            minimize: true
                        }
                    },
                    "css-loader"
                ]
            }
        ]
    },
    plugins:[
        new miniExtractPlugin({
            filename: "index.bundle.css"
        }),
        new OptimizeCSS({
            cssProcessor: require('cssnano'),
            cssProcessorOptions: { safe: true, discardComments: { removeAll: true } },
            canPrint: true
        }),
        new HtmlWebpackPlugin({
            title: "App",
            template:"index.html"
        }),
        new webpack.HotModuleReplacementPlugin()
    ],
    resolve:{
        extensions: ['.js', '.jsx']
    }
};