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.
Related
I am getting this error in IE when I try run my react site. It works in all other browsers and I have tried to load babel-polyfill multiple ways.
IE 11 error:
Here is my webpack.dev.config.js file
const path = require('path');
module.exports = {
devtool: "source-map",
mode: 'production',
entry: {
app: ['babel-polyfill', './index.js']
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, '/dist')
},
module: {
rules: [{
test: /\.js$/,
enforce: "pre",
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
query: {
presets: ['es2015', 'react', 'stage-0']
}
}]
},
{
test: /\.css$/,
loader: [ 'style-loader', 'css-loader' ]
},
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
}]
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}]
}]
},
};
I just can't seem to fix this error any help would be appreciated
Apologies, I didn't really post enough information for anyone to fix this as the problem didn't reside in the webpack.dev.config.js file. The problem resided in one of my React files:
publicIP().then(ip =>{
//code here
});
As IE doesn't have support for ES6 the => was causing the error!
I tried to add 'target:node' to the webpack.dev.js to exclude node_modules from my bundle file. This results in an error. Now I have 'target:web' but has the node_modules back in. This is my config file for the applicationpart(trying to use DllReferencePlugin):
var path = require("path");
var webpack = require("webpack");
module.exports = {
target:'web',
devServer: {
contentBase: path.join(__dirname, "build"),
compress: true,
port: 9000
},
node: {
fs: 'empty'
},
cache: true,
devtool: "eval", //or cheap-module-eval-source-map
entry: {
app: path.join(__dirname, "client/app", "app.js")
},
output: {
path: path.join(__dirname, "buildf"),
filename: "ha.js",
chunkFilename: "[name].js"
},
plugins: [
//Typically you'd have plenty of other plugins here as well
new webpack.DllReferencePlugin({
context: path.join(__dirname, "client"),
manifest: require("./build/vendor-manifest.json")
}),
],
module: {
loaders: [
{
test: /\.js?$/,
loader: "babel-loader",
include: [
path.join(__dirname, "client") //important for performance!
],
exclude: [
path.resolve(__dirname, "node_modules")
],
query: {
cacheDirectory: true, //important for performance
plugins: ["transform-regenerator"],
presets: ["es2015", "stage-0"]
}
},
{ test: /\.(scss|sass)$/, loader: ['style-loader', 'css-loader', 'sass-loader'] },
{ test: /\.html$/, loader: 'raw-loader' },
{ test: /\.css$/, loader: 'css-loader' }
]
}
};
How can I exclude the node_modules folder from the ha.js (app bundle) build? for the complete code see here
Here an example:
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/, // <---
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
}
]
I want to see my app on the webpage so what do I do? I followed this link
https://github.com/simonqian/react-helloworld
But I didn't get an answer? So pls provide some links to solve the issue
After I started the npm using npm start I faced this type of error? How to resolve this?
This is my web.config.js file. My configuration file will be in the root directory
'use strict';
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: 'E:/react/webnative/main.js',
output: {
// path: 'E:/',
filename: 'index.js',
},
devServer: {
inline: false,
port: 7777,
},
resolve: {
extensions: ['.js', '.jsx'],
},
module: {
rules: [
{
test: /\.pug$/,
use: ['pug-loader?self'],
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
loaders: [
{
test: /\.jsx?$/,
//exclude:/(node_modules|bower_components)/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
cacheDirectory: true,
presets: ['es2015', 'react'],
},
},
],
},
plugins: [new UglifyJSPlugin()],
};
Your web pack config should look something like this to read .jsx files:
module.exports = {
entry: './app/assets/frontend/myFile.jsx',
output: {
path: __dirname + '/app/assets/javascripts',
filename: 'bundle.js'
},
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [{
test: /\.jsx?$/,
loader: 'babel',
exclude: /node_modules/,
query: {
cacheDirectory: true,
presets: ['react', 'es2015']
}
}]
}
}
Or just dont use jsx. Hope this Helps!
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")
},
],
},
...
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']
}
},