webpack.conf.js

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = function(env) {
  const production = process.env.NODE_ENV === 'production';
  return {
    devtool: production ? 'source-maps' : 'eval',
    entry: [
      './js/app.js', 
      './css/app.css',
      './css/phoenix.css',
    ],
    optimization: {
      splitChunks: {
        cacheGroups: {
          styles: {
            name: 'styles',
            test: /\.css$/,
            chunks: 'all',
            enforce: true
          }
        }
      }
    },
    output: production
  ? {
    path: path.resolve(__dirname, '../priv/static/js'),
    filename: 'app.js',
    publicPath: '/',
  }
  : {
    path: path.resolve(__dirname, 'public'),
    filename: 'app.js',
    publicPath: 'http://php-sandbox.ru:8080/',
  },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
          },
        },
        {
          test: /\.s?[ac]ss$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            'sass-loader',
          ],
        },
        {
          test: /\.(ttf|eot|woff|woff2|svg)$/,
          use: {
            loader: "file-loader",
            options: {
              name: "fonts/[name].[ext]",
            },
          },
        },
      ],
    },
    devServer: {
      headers: {
        'Access-Control-Allow-Origin': '*',
      },
      host: "10.0.0.6",
      disableHostCheck: true,
      port: 8080,
      hot: true
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css'
    })
  ]
};
};