Webpack. Сборка отдельных css и скриптов в общие файлы

#javascript #css #webpack #сборка

Как собрать разрозненные в проекте стили/скрипты в один файл (bundle.js/bundle.css)с
помощью webpack?

Проект содержит стили и скрипты для каждого приложения, которые лежат в отдельном
каталоге. Папка фронтенда:

├── frontend
│   ├── common
│   ├── node_modules
│   ├── app1
│   ├── app2
│   ├── app3
│   ├── ...
│   └── webpack.config.js


Папка каждого приложения имеет одинаковую структуру, но содержит разное количество
скриптов, стилей, шаблонов, который располагаются на одном уровне:

├── app
│   ├── static
│   │   └── app
│   │       ├── css
│   │       │   └── app.css
│   │       └── js
│   │           ├── app-detail.js
│   │           └── settings.js
│   └── templates
│       └── app
│           ├── app__element-detail.html
│           ├── app.html
│           ├── app__periodic-table.html
│           └── app__settings.html


Как собирать все эти файлы в один? 

Применительно к стилям - видел способ с extract-text-webpack-plugin, но во всех примерах
показыват один и тот же сценарий - одна точка входа, стили импортированы в скрипт и
из них уже собирается. 

Мне же нужно просто сделать бандл, его подключу в базовом шаблоне. 

Аналогичный вопрос можно задать и по сборке всех скриптов, только кроме своих скриптов
в сборку нужно включить скрипты нпм. 

Дайте, пожалуйста, советы

Мой конфиг вебпака https://jsfiddle.net/9qkwuru1/.

'use strict';

const NODE_ENV = process.env.NODE_ENV || 'development';
const webpack = require('webpack');

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

module.exports = {
    context: __dirname,
    entry: "./table/static/table/js/settings.js",
    output: {
        path: __dirname + "/common",
        filename: "bundle.js"
    },

    watch: NODE_ENV == 'development',
    watchOptions: {
        aggregateTimeout: 100
    },

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

    resolve: {
        moduleDirectories: ['node_modules'],
        extension: ['', '.js', '.styl']
    },

    resolveLoader: {
        moduleDirectories: ['node_modules'],
        moduleTemplates: ['*-loader'],
        extension: ['', '.js'   ]
    },

    module: {
      loaders: [{
          test: /\.js$/,
          loader: 'babel',
          exclude: [
            /(node_modules|bower_components)/
          ],
          query: {
            presets: ['es2015']
          }
        }, {
          test: /\.jade$/,
          loader: 'jade'
      }, {
          test: /\.css$/,
          loader: ExtractTextPlugin.extract({
              fallbackLoader: "style-loader",
              loader: "css-loader"
          })
      }, {
          test: /\.styl$/,
          loader: 'style!css!autoprefixer?browsers=last 2 version!stylus?resolve url'
      }, {
          test: /\.(png|jpg|svg)/,
          loader: 'file?name=[path][name].[ext]'
      }]
    },

    plugins: [
        new webpack.NoErrorsPlugin(),
        new webpack.DefinePlugin({
            NODE_ENV: JSON.stringify(NODE_ENV)
        }),
        new webpack.ProvidePlugin({}),
        new ExtractTextPlugin({
            filename: "bundle.css"
        })
    ]
};

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

    

Ответы

Ответ 1

Мне приходилось решать такую задачу в одном из боевых проектов.

Для этого я использовал функцию glob, которая собирает все файлы по маске.
https://www.npmjs.com/package/glob
И обертку для нее, которая позволяет задавать несколько таких масок массивом:  https://www.npmjs.com/package/glob-all
Она довольно простая, не смотрите что звезд не очень много.

Ставим этот пакет (сам glob он вытянет зависимостью):

npm install glob-all --save-dev   


В вебпак конфиге:

var glob = require("glob-all"); 


После этого выдаем точкам входа результат, например так:

 entry: {
        yourAwesomeEntryPoint: glob.sync([
            "./someFolder/*.js",
            "./anotherFolder/*.js"
        ]),


Соответственно маски могут задаваться довольно хитро, в том числе регуляркой, подробнее
в документации к пакетам.  

В моем случае этого хватило.