transform-loader
transform-loader copied to clipboard
Webpack watch mode with html changes doesn't work
I have been used for a while browserify and in particular brfs module. Now i have migrated to webpack, but i would to continue to use brfs to laod my html files into JS.
I'm trying to use your loader with this webpack configuration:
module: {
rules: [{
test: /\.js$/,
loader: "transform-loader?brfs",
enforce: "post"
}]
}
For example i have this angular component:
module.exports = {
bindings: {
data: '<'
},
controller: function(){
....
},
controllerAs: 'vm',
template: fs.readFileSync(__dirname + '/create-team-project.html', 'utf8')
};
All this stuff works good, and my bundle load correctly corrensponding html file.
But when i run webpack in watch mode, and if i made some changes on html file, the bundle isn't regenerated. When i used browserify, this behavior didn't happened, so it was able to regenerate bundle on html changes.
How can i have this feature in webpack with your loader?
To force webpack to regenerate bundle, i have to edit the JS file thath use with fs.readFileSync the corresponding html file.
Any solutions?
Hi. I have the same problem. My workaround was use CopyWebpackPlugin and register the folder with my html files:
package.json
"scripts": {
"start": "webpack --watch"
}
webpack.config.js
//configuration section
context: path.resolve('./src'),
...
...
//plugin section
new CopyWebpackPlugin([
{
from: './template/**/*',
to: './'
}
])
My folder structure is:
package.json
webpack.config.js
/src/template/
/src/template/login.html
/src/template/form.html
Hope this helps