3 votes

Comment surveiller les fichiers twig avec Webpack et Symfony ?

Je m'amuse avec webpack et Symfony 2. Pour l'instant, j'ai réussi à les faire fonctionner ensemble.

Et lorsque je sauvegarde un fichier js ou css, mon navigateur est automatiquement rechargé avec webpack-dev-server. Mais comment puis-je demander à webpack de recharger le navigateur lorsque je modifie et enregistre un fichier Twig ?

Voici la structure de mon projet :

root
├── app
│   ├── config
│   └── Resources
│       └── assets
│           └── img
│           └── js
│               └── index.js (my entry point)
│           └── scss (my styles files)
│       └── views (All my twig files are here)
├── src
│   └── AppBundle
├── nodes_modules
├── web
    ├── bundles
    └── build (generated files by webpack)
├── package.json
└── webpack.config.js

Et ma configuration webpack :

...
module.exports = {
    entry: 'app/Resources/assets/js',
    output: {
        path: 'web/build',
        filename: '[name].js',
        chunkFilename: '[name].bundle.js',
        publicPath: '/build/',
        pathinfo: true
    }
    plugins: [
        new ExtractTextPlugin('styles.css', {allChunks: true}),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('development')
            }
        }),
    ],
    module: {
        preLoaders: [
            {
                test: /\.js$/,
                loaders: ['eslint', 'jscs'],
                include: PATHS.app
            }
        ],
        loaders: [
            {test: /\.js$/, loader: 'babel?cacheDirectory'},
            {test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css')},
            {test: /\.scss$/, loader: ExtractTextPlugin.extract('css?sourceMap!sass?sourceMap')},
            {test: /\.(png|gif|jpe?g|svg|woff2?|eot|ttf)$/i, loader: 'url', query: {limit: 10000}}
        ]
    },
    resolve: {
        extensions: ['', '.js'],
        modulesDirectories: ['node_modules', '']
    }
    devServer: {
        contentBase: path.join(__dirname, 'web/'),
        historyApiFallback: true,
        stats: 'errors-only',
        host: '0.0.0.0',
        port: '8090'
    }
}

Merci pour tout conseil.

3voto

Chuck Norris Points 691

Jamais de la vie,

J'ai trouvé un plugin qui fait ce que je veux : https://github.com/man27382210/watchFile-webpack-plugin .

Merci quand même.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X