T
T
tsukasa_mixer2016-11-23 21:18:26
JavaScript
tsukasa_mixer, 2016-11-23 21:18:26

Building statics in WEBPACK. Correct config?

Question.
It is required to collect Statics JS\SCSS\CSS to minimize clean and fold into a folder in JS, it looks like ES6 i.e. Babel
Can't set up WEBPACK correctly.
In addition to the specified module, for some reason it additionally collects a 2mb file with, in my opinion, the entire node_modules folder (it is logical that it was added to the exceptions)
+ it is not clear how to organize the SCSS assembly so that it would be easy to convert it to CSS and put it where it should be.

{
    context: __dirname + '/src',
    node: {
      fs: "empty"
    },
    entry: {
      app: './jsx/app.jsx'
    },
    output: {
      filename: '/js/[name].js',
      path: './dist'
    },
    modulesDirectories: ['node_modules'],
    resolve: {
      extensions: ['', '.js', '.jsx']
    },
    module: {
      loaders: [
        {
          test: /\.(js|jsx)?$/,
          exclude: ['node_modules'],
          loader: "babel-loader",
          query: {
            presets: ['es2015']
          }
        },
        {
          test: /\.json?$/,
          exclude: ['node_modules'],
          loader: "json-loader"
        }
      ]
    },
    plugins: [
      new CleanWebpackPlugin([ 'dist/js' ], {
        root: __dirname,
        verbose: true,
        dry: false
      })
    ]
  }

Asset     Size  Chunks             Chunk Names
     /js/app.js   226 kB       0  [emitted]  app
    /js/main.js  1.65 MB       1  [emitted]  main

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
akzhan, 2016-11-24
@akzhan

A piece of the working config

{
  resolve: {
    modulesDirectories: [
      'node_modules',
      'src'
    ],
    root: [],
    extensions: ['', '.js', '.pug'],
    alias: {
      underscore: path.join(__dirname, 'node_modules/lodash/index')
    }
  },

  module: {

    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'stage-0']
        }
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint'
      },
      {
        test: /\.json$/,
        exclude: /node_modules/,
        loader: 'json'
      },
      {
        test: /\.pug$/,
        loader: 'pug?root=templates'
      },
      {
        test: /\.html$/,
        loader: 'underscore-template-loader',
        query: {
          engine: 'lodash'
        }
      },
      {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract(cssConfig())
      },
      {
        test: /\.(svg|png|jpg)$/,
        exclude: /fonts/,
        loader: `file?name=${config.get('pattern.file')}`
      },
      {
        test: /fonts/,
        exclude: /node_modules/,
        loader: `file?name=${config.get('pattern.font')}`
      }
    ]
  },
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question