Setting up a webpack project?

Question

webpack

Welcome all! You need to configure webpack as follows.

/root
  app
    data/data.json ( контент, и различные настройки используемые jade и js)
    fonts/
    img/
    js/
    style/main.styl
    views/layoute.jade
    index.jade
  dist	
    fonts/
    img/
    js/
    style/
    index.html

in the “app” folder all the development of the project. The "dist" folder is generated in production mode, minifying and optimizing the files. At the root level are (bower, npm) and settings.
I want to repeat the functionality of yeoman generatora webapp , but I don't have enough webpack knowledge to do it. Thank you!

Answer 1

Collected a config, independently. It is quite damp, maybe someone can help clean it. repository on github

'use strict';

const NODE_ENV = process.env.NODE_ENV || 'development';
const webpack = require('webpack');
const rimraf = require('rimraf');
const BowerWebpackPlugin = require('bower-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');

const autoprefixerOptions = {
    browsers: [
      'last 2 versions',
      'iOS >= 7',
      'Android >= 4',
      'Explorer >= 10',
      'ExplorerMobile >= 11'
    ],
    cascade: false
  };

module.exports = {
  context: __dirname + '/app',

  entry: './main.js',

  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'js/[name].js',
    library: '[name]'
  },

  watch: NODE_ENV == 'development',

  devtool: NODE_ENV == 'development' ? 'source-map' : null,

  plugins: [
    {
      apply: (compiler) => {
        rimraf.sync( compiler.options.output.path );
      }
    },
    new BowerWebpackPlugin({
      modulesDirectories: ['bower_components'],
      manifestFiles: ['bower.json', '.bower.json'],
      includes: /.*/,
      excludes: /.*\.less$/
    }),
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({
      NODE_ENV: JSON.stringify( NODE_ENV )
    }),
    new ExtractTextPlugin('css/[name].css?[hash]', {allChunks: true}),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common',
      minChunks: 2
    }),
    new CopyWebpackPlugin([
      { from: 'static' }
    ])
  ],

  resolve: {
    modulesDirectories: ['node_modules'],
    extensions: ['', '.js']
  },

  resolveLoader: {
    modulesDirectories: ['node_modules'],
    moduleTemplates: ['*-loader', '*'],
    extensions: ['', '.js']
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel',
        query: {
          presets: ['es2015'],
          plugins: ['transform-runtime']
        }
      },
      { test: /\.json$/, loader: 'json' },
      { test:   /\.jade$/, loader: "jade" },
      // { test: /\.styl$/, loader: 'style!css!autoprefixer?'+ JSON.stringify(autoprefixerOptions) },
      {
        test: /\.styl$/,
        loader: ExtractTextPlugin.extract('style', 'css!autoprefixer?'+ JSON.stringify(autoprefixerOptions) +'!stylus?resolve url')
      },
      {
        test: /\.(eot|woff|ttf|svg|png|jpg)$/,
        loader: 'url-loader?limit=30000&name=[path][name]-[hash].[ext]'
      }
    ]
  }
};

if(NODE_ENV == 'production') {
  module.exports.plugins.push(
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        drop_console: true,
        unsafe: true
      }
    })
  );
}