Trying to install webpack loaders with `-loader` in it
okonet opened this issue · comments
I'm seeing lots of Installing [XXX]-loader-loader... attempts that lead to 404.
I use XXX-loader (explicit) notation in my webpack config since the previous version tried to install loaders with -loader suffix. I think this is a regression since it has been working as expected before.
Weird! I use that too but must've created a regression.
(You're right :D)
I'll get this fixed right up!
@okonet Hmmm, I just tried it with example/webpack1 by using babel-loader.
Can you past your config, or at least the loader part?
This didn't have a problem:
diff --git a/example/webpack1/webpack.config.defaults.js b/example/webpack1/webpack.config.defaults.js
index 953cbf9..4017781 100644
--- a/example/webpack1/webpack.config.defaults.js
+++ b/example/webpack1/webpack.config.defaults.js
@@ -11,7 +11,7 @@ module.exports = {
{ test: /\.css$/, loader: "style" },
{ test: /\.css$/, loader: "css", query: { localIdentName: "[name]-[local]--[hash:base64:5]" } },
{ test: /\.eot$/, loader: "file" },
- { test: /\.js$/, loader: "babel", query: { cacheDirectory: true }, exclude: /node_modules/ },
+ { test: /\.js$/, loader: "babel-loader", query: { cacheDirectory: true }, exclude: /node_modules/ },
{ test: /\.json$/, loader: "json" },
{ test: /\.(png|jpg)$/, loader: "url", query: { limit: 8192 } }, // Inline base64 URLs for <= 8K images
{ test: /\.svg$/, loader: "url", query: { mimetype: "image/svg+xml" } },Thanks for looking into it.
Here is my config. Note I use webpack-merge. Also, the only loader without suffix is babel and this one works fine (I don't see installation attempt for it)
This is the base file:
/**
* COMMON WEBPACK CONFIGURATION
*/
const path = require('path')
const webpack = require('webpack')
module.exports = {
output: {
path: path.resolve(__dirname, '..', 'build'),
publicPath: '/'
},
module: {
loaders: [{
// Transform our own .js files with Babel
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
}, {
// Do not transform vendor's CSS with CSS-modules
// The point is that they remain in global scope.
// Since we require these CSS files in our JS or CSS files,
// they will be a part of our compilation either way.
// So, no need for ExtractTextPlugin here.
test: /(.+)\/node_modules\/(.+)\.css$/,
loaders: ['style-loader', 'css-loader']
}, {
test: /\.jpe?g$|\.gif$|\.png$/i,
exclude: /favicon/,
loader: 'url-loader',
query: { limit: 10000 }
}, {
test: /\.ttf$|\.woff$|\.woff2$/i,
loader: 'file-loader'
}, {
test: /\.svg$/,
loaders: [{
loader: 'url-loader',
query: { limit: 10000 }
}, {
loader: 'svgo-loader',
query: { useConfig: 'svgoConfig' }
}]
}, {
test: /\.html$/,
loader: 'html-loader'
}, {
test: /\.csv$/,
loader: 'dsv-loader'
}, {
test: /\.json$/,
loader: 'json-loader'
}]
},
plugins: [
new webpack.DefinePlugin({
__CLIENT__: true
}),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/) // Ignore all optional deps of moment.js
],
postcss: () => [
require('postcss-import')(),
require('postcss-focus')(),
require('postcss-cssnext')({
browsers: ['last 2 versions', 'IE > 10']
}),
require('postcss-reporter')({
clearMessages: true
})
],
svgoConfig: {
plugins: [
{ removeTitle: true }
]
},
resolve: {
modules: ['node_modules'],
extensions: ['', '.js']
},
target: 'web' // Make web variables accessible to webpack, e.g. window
}and the dev config that is extension of base:
const webpack = require('webpack')
const merge = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const NpmInstallPlugin = require('npm-install-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = merge.smart(require('./webpack.base'), {
devtool: '#cheap-module-eval-source-map',
entry: [
// Add hot reloading in development
'webpack-hot-middleware/client?reload=true',
'./app/index.js'
],
output: {
filename: '[name].js',
chunkFilename: '[name].chunk.js'
},
plugins: [
new webpack.LoaderOptionsPlugin({
minimize: false,
debug: true
}),
// Disable ExtractTextPlugin in dev to enable CSS hot reloading
new ExtractTextPlugin('[name].css', { disable: true }),
new NpmInstallPlugin(),
new webpack.HotModuleReplacementPlugin(), // Tell webpack we want hot reloading
new HtmlWebpackPlugin({
template: 'app/index.html',
filename: 'layout.html',
inject: true // Inject all files that are generated by webpack, e.g. bundle.js
})
],
module: {
loaders: [{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/,
query: {
presets: ['react-hmre'],
plugins: ['babel-plugin-typecheck']
}
}, {
// Transform our own .css files with PostCSS and CSS-modules
test: /\.scss$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract(
'style-loader',
'css-loader?modules&localIdentName=[name]_[local]-[hash:base64:5]' +
'&importLoaders=1!postcss-loader'
)
}]
}
})I just tried this:
diff --git a/example/webpack1/webpack.config.defaults.js b/example/webpack1/webpack.config.defaults.js
index 953cbf9..8330022 100644
--- a/example/webpack1/webpack.config.defaults.js
+++ b/example/webpack1/webpack.config.defaults.js
@@ -8,7 +8,7 @@ module.exports = {
module: {
loaders: [
- { test: /\.css$/, loader: "style" },
+ { test: /\.css$/, loaders: ["style-loader"] },
{ test: /\.css$/, loader: "css", query: { localIdentName: "[name]-[local]--[hash:base64:5]" } },
{ test: /\.eot$/, loader: "file" },
{ test: /\.js$/, loader: "babel", query: { cacheDirectory: true }, exclude: /node_modules/ },So, no idea.
I'll need one of the following:
- You update one of the examples in
/exampleto replicate your problem (whose configs are 10x simpler than what's posted) or... - You provide an example repo (e.g. https://github.com/survivejs/react-boilerplate) that has this problem.
Otherwise, I can't fix it.
Thanks!
Fair enough. Thanks for looking at it. I'll try to play around and repro it in /examples and let you know.
Thanks! Or at the very least post up an example repo with it breaking. It doesn't need to be complicated, just as few lines of code possible to illustrate the problem :)
Closing until I can get a runnable demo of this. Webpack has too many variables at play to ascertain a cause from the config alone.
I'm all for fixing the problem once I have something to work with.
Thanks!