I have been using this webpack config for loading babel and css loaders, but getting error. My webpack config works very well, if I use only babel loader, but css loader isn't working.
var path = require('path');
var config = {
entry: './main.js',
output: {
path : path.join(__dirname, './'),
filename: 'index.js',
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'style-loader!css-loader',
}
]
}
}
module.exports = config;
The error I am getting while running webpack is
ERROR in ./~/css-loader!./main.js
Error screenshot
You need to configure the CSS loaders for imports matching .css not .jsx. Right now you're passing a JavaScript file to the css-loader, which isn't valid CSS, so it fails. The correct loader configuration is:
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.css$/,
loader: 'style-loader!css-loader',
}
]
}
You need style loader in your webpack config:
Example from one of my projects:
var ExtractTextPlugin = require("extract-text-webpack-plugin");
...
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css")
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style-loader", "css!sass")
},
],
},
...
Related
I'm using webpack config for my react.js application. When i run the command npm run build my images and font files are not build under media directory as i defined in my webpack:
module.exports = {
entry: {
app: ['./app/main.js']
},
output: {
path: path.resolve(process.cwd(), 'dist'),
publicPath: '/',
filename: 'bundle.js'
},
module: {
preLoaders: [
{
test: /.jsx?$/,
exclude: /node_modules/,
loader: 'eslint-loader'
},
],
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react'],
plugins: [
'transform-runtime',
'transform-object-rest-spread'
]
}
},
{
test: /\.(css|scss)$/,
loaders: ['style', 'css', 'sass']
},
{
test: /\.(eot|woff|woff2|svg|ttf|png|jpg|gif)([\?]?.*)$/,
loader: 'file-loader',
options: {
name: 'media/[name].[ext]'
}
},
{
test: /\.html$/,
loader: 'html'
},
{ // Load JSON-files into code base.
test: /\.json$/,
exclude: /node_modules/,
loader: 'json',
},
]
},
plugins: getPlugins(),
devtool: 'source-map',
};
But the files are placed just inside my dist. What am i missing?
That is the right behaviour. webpack outputs everything fist for your output path, then from that it starts to create folders for loaders. You can't have javascript under /dist and force it to output all other files to /media. It is always going to be everything under your dist.
I set up a project with React, webpack, babel, and typescript.
And I have an error : You need an appropriate loader.
This is a part of webpack.dev.config.js
var webpack = require('webpack');
var path = require('path');
var parentDir = path.join(__dirname, '../');
module.exports = {
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
module: {
loaders: [
{
test: /\.ts|\.tsx$/,
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
},
loader: 'awesome-typescript-loader',
},
{
test: /\.less$/,
loaders: ["style-loader", "css-loder", "less-loader"]
}
]
},
}
What is wrong in my code ?
When i run build of my react app i got: ERROR in bundle.js from UglifyJs
Unexpected token: name i found this https://github.com/joeeames/WebpackFundamentalsCourse/issues/3
they suggest use babel-reset-es2015 but i need babel-preset-react.
My webpack config:
const path = require('path')
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const extractSass = new ExtractTextPlugin({
filename: "style.css",
disable: process.env.NODE_ENV === "development"
});
const config = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname + "/dist")
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {presets:['react']}
},
{
test: /\.js$/,
enforce: 'pre',
loader: 'eslint-loader',
options: {
emitWarning: true,
}
},
{ test: /\.html$/,
use:[{
loader: 'html-loader',
options: {
minimize:true
}
}]
},
{
test: /\.scss$/,
use: extractSass.extract({
use: [{
loader: "css-loader"
}, {
loader: "sass-loader"
}],
fallback: "style-loader"
})
}
]},
plugins: [
extractSass
],
node:{
fs: "empty"
}
}
module.exports = config
You can have both, they are not mutually exclusive. Also query has been replaced with options in webpack 2, just as you're using it in your other loaders already. query still exists for compatibility reasons, but you should just use options.
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options: {
presets: ['es2015', 'react']
}
},
Somebody can help me on configuring webpack for following requirements
AngularJS (1.6) ES6 to ES5 converstion
SCSS to CSS compiler
All js to single bundle
All css to single bundle
All folder structure should created with html only ( no js files, since we alrady bundling it )
This is what I have tried so far
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, './app/app.module.js'),
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{ test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader'},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&minetype=application/font-woff'
},
{
test: /\.woff2$/,
loader: 'url?limit=10000&minetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&minetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&minetype=image/svg+xml'
}
]
},
plugins: [
//new ExtractTextPlugin("styles.css"),
]
};
Updated webpack conf
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, './app/app.module.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
devtool: 'source-map',
module: {
loaders: [{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}, {
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}, {
test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
loader: 'file-loader?name=[name].[ext]&publicPath=../fonts/&outputPath=/assets/fonts/'
},
{ test: /\.(jpe?g|png|gif)$/i, loader: 'file-loader?name=/assets/images/[name].[ext]' },
{
test: /\.(html)$/,
loader: 'file-loader?name=[path][name].[ext]'
},
{
test: /\.(json)$/,
loader: 'file-loader?name=[path][name].[ext]'
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
use: [{
loader: 'css-loader'
}, {
loader: 'sass-loader' // compiles Sass to CSS
}],
fallback: 'style-loader'
})
}
]
},
plugins: [
new ExtractTextPlugin('assets/css/styles.css')
]
};
sample project with webpack configured posted it in my github
I'd like to use react-infinite-calendar component for a personal project. It's not picking up the css. I think my webpack configuration is the problem as I'm using react-css-modules.
Could someone show me what I'd need to do to get it working?
My webpack configuration is:
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
module.exports = {
entry: './index.js',
context: path.join(__dirname, 'client'),
devtool: 'source-map',
output: {
path: './dist/client/',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
// https://github.com/gajus/react-css-modules
test: /\.css$/,
loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
}
]
},
resolve: {
extensions: ['', '.js', '.json']
},
plugins: [
new CopyWebpackPlugin([
{from: 'static/index.html'}
])
]
};
My date selector component is:
import React from 'react';
import InfiniteCalendar from 'react-infinite-calendar';
import 'react-infinite-calendar/styles.css'; // only needs to be imported once
import {TODAY} from '../../server/constants/date';
export default class DateSelector extends React.Component {
render() {
return (
<div>
<InfiniteCalendar
width={400}
height={600}
selectedDate={TODAY}
maxDate={TODAY}
/>
</div>
);
}
}
Another option is to exclude react-infinite-calendar from your CSS module loader and include it in the standard CSS loader.
That way you don't have to rename all of your CSS files.
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
exclude: /react-infinite-calendar/,
loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
},
{
test: /\.css$/,
include: /react-infinite-calendar/,
loader: 'style-loader!css-loader',
},
]
I worked around this by having to separate webpack loaders for locally scoped css-modules and globally scoped ones. My webpack configuration is below and so for css modules I've had to name the files so they end with .module.css.
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
module.exports = {
entry: './index.js',
context: path.join(__dirname, 'client'),
devtool: 'source-map',
output: {
path: './dist/client/',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
// https://github.com/gajus/react-css-modules
test: /\.module.css$/,
loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
},
{
test: /^((?!\.module).)*css$/,
loader: 'style-loader!css-loader'
},
]
},
resolve: {
extensions: ['', '.js', '.json']
},
plugins: [
new CopyWebpackPlugin([
{from: 'static/index.html'}
])
]
};