Настройка webpack проекта?

Question

[Vasily Guzov]

Приветствую всех! Требуется настроить webpack следующим образом.

/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

в папке “app” вся разработка проекта. Папка “dist” генерируется в продакшн режиме, минифицирую и оптимизируя файлы. На корневом уровне лежат (bower, npm) и настройки.

Хочется повторить функциональность yeoman generatora webapp, но не хватает знаний webpack, что бы это сделать. Спасибо!

Answer 1

[Vasily Guzov]

Cобрал конфиг, самостоятельно. Oн довольно сырой, может кто поможет его почистить. репозиторий на 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
      }
    })
  );
}