Как изменить содержимое Extract Text Plugin после сборки с помощью Copy Webpack Plugin?

Я делаю кое-что из Shopify. А именно у меня есть src/ каталог с кучей .scss а также .js файлы в нем. Я использую веб-пакет, очевидно, чтобы упаковать все это и отправить его на мой assets/ каталог (потому что Shopify). Я использую extract-text-webpack-plugin вырвать все SCSS и построить его src/dist/style.scss.liquid, Все счастливы, и файл JS также создается там. Полное раскрытие: я работал с веб-пакетом достаточно долго, чтобы все работало в основном большую часть времени, но я совсем не разбираюсь в этом.

Я мог бы построить оба файла прямо на мой assets/ каталог (и был до недавнего времени)... но самое интересное, что я хочу сделать некоторые дополнительные манипуляции на src/dist/style.scss.liquid файл, прежде чем отправить его в каталог сборки (assets/). Так что я делаю? Я использую copy-webpack-plugin а) преобразовать бит, который мне нужно преобразовать, и б) затем скопировать его в asset/ каталог раз все играет красиво.

Наконец, проблема: все это работает, если я бегу webpack дважды. Первый раз создает (или обновляет) мои файлы в src/dist/ каталог. Второй раз запускает функцию преобразования и копирует предыдущую сборку в assets/ каталог. Это означает, что мой assets/ файлы всегда на одну итерацию позади src/dist/... если я ничего не меняю и просто дважды запускаю webpack.

Вопрос: есть ли способ, по сути, сказать плагину работать только после того, как другой закончен? Другими словами, есть ли способ изменить содержимое моего текстового плагина с помощью плагина Copy Webpack только после того, как первый плагин будет готов. В этом конкретном случае я хочу подождать, пока src/dist/ Сборка завершена, а затем выполните copy-webpack-plugin немного.

Вот мой ток webpack.config.js для дополнительной ясности:


webpack.config.js

const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
let scssFile = new ExtractTextPlugin('style.build');


module.exports = {
  entry: {
    app: "./src/js/app.js"
  },
  plugins: [
    scssFile,
    new CopyWebpackPlugin([
      {
        from: __dirname + '/src/dist/' + scssFile.filename,
        to: __dirname + '/assets/style.scss.liquid',
        transform: function(content, path) {
          var data = content.toString();
          returnContent = data.replace(/'{{/g, "{{");
          returnContent = returnContent.replace(/}}'/g, "}}");
          return returnContent;
        }
      },
      {
        from: __dirname + '/src/dist/app.js.liquid',
        to: __dirname + '/assets/app.js.liquid'
      }
    ])
  ],
  module: {
    rules: [
      {
        test: /app\.scss$/,
        use: scssFile.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      },
      {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
      }
    ]
  },
  output: {
      path: __dirname + '/src/dist',
      filename: "[name].js.liquid"
  }
};

0 ответов

Другие вопросы по тегам