Как изменить содержимое 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"
}
};