Comment puis-je exécuter des scripts bash arbitraires sur des fichiers via Webpack sans maintenir de chargeurs pour chaque type de fichier?

Question

Il semble que Webpack exécute des outils qui transforment le code via des "chargeurs", plutôt que d'utiliser directement les API de ces outils. Cela ajoute une couche d'abstraction sur ces outils, ce qui signifie parfois que les API des outils ne sont pas entièrement exposées ou que les mises à jour des outils prennent du temps pour être mises à jour dans le chargeur. Here's a more detailed description of the problem. J'ai rencontré ce problème avec Grunt/gulp, et j'ai fini par abandonner ceux qui étaient en faveur de la transformation directe de ma source avec des scripts bash que j'utilise via npm. Est-il possible de faire la même chose avec Webpack? Si c'est le cas, comment?

Answer 1

Je created a custom Webpack loader appelé shell-loader qui prend un script shell arbitraire et l'exécute sur le contenu de chaque fichier qu'il charge à l'aide child_process.exec. Je peux l'utiliser comme ça dans webpack.config.js;

{ 
    test: /.*\.css$/, 
    use: [ 'css-loader', { loader: 'shell-loader', options: { 
    script: 'postcss --use autoprefixer' 
    }} ] 
} 

Il semble fonctionner, comme une preuve de concept, mais je ne suis pas sûr que ce soit une bonne idée lorsque vous travaillez avec Webpack, ou si je suis le piratage des choses ensemble qu'ils n'étaient pas destinées être.