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.