I'm using https://www.npmjs.com/package/babel-relay-plugin to make my custom loader in my project. Recently I ran into some issues with this loader and decided to debug by console.log something in the loader code. It turned out that I can only see the log once (after I remove the entire node_modules folder and npm install again). All the subsequence run produces no log. It seems clear to me that webpack cached something. When I put some syntax errors or even clear the entire loader code. Webpack still successfully bundle the files.
This is my config file:
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
var isProduction = process.env.NODE_ENV === 'production';
function concat() {
return [].slice.call(arguments).reduce(function (arr, elems) {
return elems ? arr.concat(elems) : arr;
}, []);
}
function getJsLoader() {
return {
test: /.js$/,
exclude: /node_modules/,
loaders: concat(
'babel?cacheDirectory=true&presets[]=es2015,presets[]=react,presets[]=stage-0,plugins[]=' + path.join(__dirname, 'babelRelayPlugin'),
!isProduction && 'eslint'
)
};
}
function getCssLoader() {
var module = {
test: /\.css$/
};
var loaders = concat(
!isProduction && 'style',
'css?' + concat(
'importLoaders=1',
'localIdentName=[name]--[local]--[hash:base64:5]',
'modules',
isProduction && 'sourceMap'
).join('&')
);
if (isProduction) {
module.loader = ExtractTextPlugin.extract(loaders.join('!'));
} else {
module.loaders = loaders;
}
return module;
}
module.exports = {
entry: {
app: path.resolve(__dirname, 'client'),
vendor: [
'react',
'react-router'
]
},
output: {
path: path.resolve(__dirname, '../build'),
filename: 'scripts/app.js'
},
module: {
loaders: [
getJsLoader(),
getCssLoader()
]
},
devtool: isProduction ? 'source-map' : 'eval',
plugins: [
new webpack.optimize.CommonsChunkPlugin('vendor', 'scripts/vendor.js')
].concat(!isProduction ? [] : [
new ExtractTextPlugin('styles/main.css')
]),
eslint: {
configFile: path.resolve(__dirname, '../.eslintrc')
},
cache: false,
}
And this is my plugin for js loader:
//babelRelayPlugin
var getBabelRelayPlugin = require('babel-relay-plugin');
var schema = require('./schema.json');
module.exports = getBabelRelayPlugin(schema.data);
I run webpack with this webpack -p --progress --config src/webpack.config.js
A day of asking around and studying the webpack source code gave me no clue.
Hope that some one could help me!
PS: this problem seems only occur when the schema.json
is big,
It turns out that Babel loader is the one who cache things. Just need to set remove cacheDirectory=true
.
Most helpful comment
It turns out that Babel loader is the one who cache things. Just need to set remove
cacheDirectory=true
.