4

Как собрать разрозненные в проекте стили/скрипты в один файл (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 ответ 1

4

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

Для этого я использовал функцию 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"
        ]),

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

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

9
  • 1
    @while1pass да, может. Про "точку входа которая импортирует все остальное" - в нормальном случае я так бы и сделал (в моем конкретном так было нельзя =)) 20 дек 2016 в 14:29
  • 1
    Пакеты из node_modules лучше подключать по-человечески через импорты в файле где они нужны. 20 дек 2016 в 14:30
  • 1
    В моем случае это было обусловлено тем, что точка входа была весьма стремная и не на jsе, штука была на продакшне, то есть ломать было сильно нельзя, собиралась тупо минификация + конкатенация, зависимости были неявные: тупо все писалось в глобальную область. То есть было оч важно сохранить тот же порядок и тот набор бандлов что был когда-то и не трогать точку входа. То есть это был маленький шаг большого рефакторинга. 20 дек 2016 в 14:32
  • 1
    @while1pass импортировать принято модуль в том месте где он нужен. По-хорошему ваше приложение должно представлять собой одно-несколько деревьев, где ваш модуль - это узел дерева, а подключение модуля - связь между узлами. Вебпак может пробежаться по дереву и собрать его в один сучок. Из нескольких деревьев можно искуственно сделать одно - добавив вершину - файл с импортами. 20 дек 2016 в 14:42
  • 1
    Вот файл с импортами - это когда вам надо абсолютно несвязанные части приложения собрать в один бандл, то можно сделать такой файл. Но это может быть и логическая точка входа с роутером требующим более мелкие кусочки скажем. 20 дек 2016 в 14:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.