K
K
KnightForce2017-05-09 12:56:47
Web development
KnightForce, 2017-05-09 12:56:47

Webpack 2. How to minify React build?

How to reduce build weight in Webpack 2. Now 1 mb +/- 200 kb.
I am using CommonsChunkPlugin.
Config:

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");


const extractSass = new ExtractTextPlugin({
    filename: "../stylesheets/[name].css",
});

module.exports = {
  devtool: 'source-map',
  context: path.join(__dirname, 'frontend'),
  entry: {
    bundle: "./bundle",
    babelPolyfill: 'babel-polyfill',
    commons: "./commons",
    style: './stylesheets/style.scss'
  },
  output: {
    path: path.join(__dirname, 'public/javascripts'),
    filename: '[name].js',
    publicPath: '/public/',
  },
  
  resolve: {
    modules: [path.resolve(__dirname, "node_modules"), ],
  },
  
  resolveLoader: {
         modules: ["web_loaders", "web_modules", "node_loaders", "node_modules"],
    },

  module: {
    rules: [
      {
      	test: /\.jsx?$/,
      	exclude: [path.resolve(__dirname, "node_modules")],

      	include: [path.resolve(__dirname, "./frontend")],
      	loader: "babel-loader",
            options: {
                presets: [['es2015', {modules: false}], "es2016", "es2017", "react"],

                plugins: ['transform-runtime'], 
            }
      },
      {

            test: /\.scss$/,
            use: extractSass.extract({
                use: [
                {
                    loader: "css-loader"
                },

                {
                    loader: "sass-loader",


                    options: {
            			includePaths: [path.resolve(__dirname, "./")],
            		},
                }],

                fallback: "style-loader"
            }),
      },
      {
      	test: /\.(png|jpg|svg|ttf|eot|woff|woff2)$/,
      use: "file-loader?name=../[path][name].[ext]",
      }
    ]
  },
  plugins: [
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
      name: "commons",
      filename: "commons.js",
      minChunks: 2,
    }),
    new webpack.LoaderOptionsPlugin({
        minimize: true,
   		}),
    extractSass,
  ],
  watch: true,
}

Answer the question

In order to leave comments, you need to log in

[[+comments_count]] answer(s)
M
Maxim, 2017-05-09
@KnightForce

You can also use code splitting ( https://toster.ru/answer?answer_id=1010668)

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question