Пример webpack-конфига с react

Обновлено 19.04.2018

Настроены css-модули. Это позволит решить проблему уникальности имен классов в css.
Никакие дополнительные зависимости не требуются =)

Ранее делал пример простого webpack-конфига, который сильно помог людям быстрее стартовать разработку с webpack’ом. По просьбам трудящихся, решил улучшить этот конфиг, и добавить в него react.

Также, добавил HtmlWebpackPlugin, который добавляет скрипты и стили в index.html при сборке на прод.

Скачать файлы обновленного конфига можно с github.com

Текст файла webpack.config.js

const path = require('path');
const fs = require('fs');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const isDevelopment = !process.env.production;
const isProduction = process.env.production;
const distPath = path.join(__dirname, '/public');

const extractSass = new ExtractTextPlugin({
  filename: 'main.css',
  disable: isDevelopment
});

const config = {
  entry: {
    app: './src/js/app.js'
  },
  output: {
    filename: 'bundle.js',
    path: distPath
  },
  module: {
    rules: [{
      test: /\.js$/,
      exclude: [/node_modules/],
      use: [{
        loader: 'babel-loader',
        options: {
          presets: ['env', 'react']
        }
      }]
    }, {
      test: /\.scss$/,
      exclude: [/node_modules/],
      use: extractSass.extract({
        fallback: 'style-loader',
        use: [{
          loader: 'css-loader',
          options: {
            modules: true,
            sourceMap: true,
            importLoaders: 2,
            localIdentName: '[name]__[local]__[hash:base64:5]', // className template
            minimize: isProduction
          }
        },
          'sass-loader',
          'resolve-url-loader'
        ]
      })
    }, {
      test: /\.(gif|png|jpe?g|svg)$/i,
      use: [{
        loader: 'file-loader',
        options: {
          name: 'images/[name][hash].[ext]'
        }
      }, {
        loader: 'image-webpack-loader',
        options: {
          mozjpeg: {
            progressive: true,
            quality: 70
          }
        }
      },
      ],
    }, {
      test: /\.(eot|svg|ttf|woff|woff2)$/,
      use: {
        loader: 'file-loader',
        options: {
          name: 'fonts/[name][hash].[ext]'
        }
      },
    }]
  },
  plugins: [
    extractSass,
    new HtmlWebpackPlugin({
      template: './src/index.html',
    })
  ],
  devServer: {
    contentBase: distPath,
    compress: true,
    open: true,
    port: 9000
  }
};

if (isDevelopment) {
  fs.readdirSync(distPath)
    .map((fileName) => {
      if (['.css', '.js'].includes(path.extname(fileName))) {
        return fs.unlinkSync(`${distPath}/${fileName}`);
      }

      return '';
    });
}

if (isProduction) {
  config.plugins.push(
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        drop_console: true,
        unsafe: true
      }
    })
  );
}

module.exports = config;

Кое-какую инфу взял из этой статьи

5 комментариев:

    1. Вы можете попробовать скачать zip-архив с файлами для реакта. Сделал это только что, и у меня в архиве активная ветка сразу с реактом.

      Clone or download > Download ZIP

  1. Хотелось узнать как было бы передано mode через process.env.NODE_ENV без использования пакета cross-env. Какой скрипт надо было бы запустить в package.json

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.