I can't get webpack (3.10) file-loader paths to work how I need it.. Here is an extract of my webpack.config.js
// ...
const images = {
test: /\.(jpg|png|svg)$/,
use: {
loader: 'file-loader',
options: {
name: 'images/[path][name].[hash].[ext]',
},
},
}
//...
const config = {
entry: {
App: './public/assets/js/main.js',
},
output: {
path: path.resolve(__dirname, 'public', 'assets', 'dist'),
filename: 'main.js',
},
module: {
rules: [javascript, styles, images],
},
plugins: [new ExtractTextPlugin('main.css'), uglify],
}
//...
I want my images to be in /public/assets/dist/images/XXX.svg but they're beeing loaded into /public/assets/dist/images/public/assets/images/XXX.svg
I really don't get it... thank you for every help.
I've already commented. But every question should have an answer.
test: /\.(jpg|png|svg)$/,
use: 'file-loader?name=[name].[ext]&outputPath=./images/'
Related
I'm trying to making a website under Webpack, ReactJS, Babel, Express and Sass, so far, all working perfectly, but when I'm trying to import an image like this:
import { Logo } from './../../Logo.png';
And use it in an image like this:
<img src={ Logo } alt="Logo" />
I'm getting this error:
./src/components/Header/Header.js 7:9-13
"export 'Logo' was not found in './../../Logo.png'
I've tried many solutions on the web but nothing solve my problem.
This is my webpack configuration:
const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require('path');
const htmlPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
module.exports = {
entry: "./src/index.js",
output: {
path: path.join(__dirname, 'dist'),
filename: "[name].js"
},
plugins: [htmlPlugin],
module: {
rules: [
{
test: /\.(png|jpg|jpeg|gif|ico)$/,
use: [{
// loader: 'url-loader'
loader: 'file-loader',
options: {
name: '[name].[hash].[ext]'
}
}]
}, {
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader',
options: {
name: '[name].[hash].[ext]'
}
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.s?css$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}]
}
};
And yeah, I'm sure this is the good path to the file.
Thanks in advance for helping me.
You should be importing the image without curly braces:
import Logo from './../../Logo.png';
Documentation from Webpack: https://webpack.js.org/guides/asset-management/
Documentation from create-react-app: https://create-react-app.dev/docs/adding-images-fonts-and-files/
I have a Sass file that imports Bootstrap and Font Awesome.
They has been put on the of the file before my custom CSS class.
Here is the code:
/src/scss/site.scss
#import "~bootstrap/scss/bootstrap";
#import "~font-awesome/scss/font-awesome";
// Custom style sheet here
.my-custom-header{
color:#F00
}
There is a source map after Webpack build but it includes the content of Bootstrap and font awesome.
Here what is look like in Browser:
When I tried to inspect a custom class it point to correct line number of origin source code but incorrect for generated source map because it has content of Bootstrap in the top.
My question is:
Is it possible to configure a output source map to keep the import statement and the content is exact the same as actual source code.
Here what source map I'm expected.
site.css.map
#import "~bootstrap/scss/bootstrap";
#import "~font-awesome/scss/font-awesome";
// Custom style sheet here
.my-custom-header{
color:#F00
}
Here my Webpack configuration:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const siteFile = [__dirname, 'src', 'scss', 'site'];
const outputPath = [__dirname, 'public', 'css'];
module.exports = {
entry: {
site: path.resolve(...siteFile),
},
output: {
path: path.resolve(...outputPath),
},
resolve: {
// https://github.com/webpack/webpack-dev-server/issues/720#issuecomment-268470989
extensions: ['.scss']
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader', // Translates CSS into CommonJS modules
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader', // Run post css actions
options: {
plugins: () => {
// post css plugins, can be exported to postcss.config.js
return [
require('precss'),
require('autoprefixer')
];
},
sourceMap: true
}
},
{
loader: 'resolve-url-loader',
},
{
loader: 'sass-loader', // Compiles Sass to CSS, using node-sass by default
options: {
sourceMap: true
}
}
],
exclude: /node_modules/
},
{
test: /\.(png|jpe?g|gif|svg|eot|ttf|woff2?)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: '.' //relative to output
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: './[name].css' // relative to output
}),
],
devServer: {
contentBase: path.join(__dirname, 'public'),
compress: false,
port: 8080,
}
};
Here is a link to a repository of the example code.
codesanook-examples-webpack
Thank you.
Have you tried SourceMapDevToolPlugin?
https://webpack.js.org/plugins/source-map-dev-tool-plugin/
You might need to create a vendor bundle for node modules stuff then you can ignore it from sourcemap.
Hey guys (using webpack 2.1.0-beta.22) so I have the following config in my webpack.base.js:
entry: {
client: "./client/index.js"
},
output: {
path: _.outputPath,
filename: '[name].js',
publicPath: '/themes/default/dist/'
},
module: {
loaders: [
{
test: /\.(ico|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
loader: 'file',
query: {
name: 'media/[name].[hash:8].[ext]'
}
}
]
}
And this in my webpack.dev.js:
const cssImagePath = path.resolve('../..');`
base.module.loaders.push(
{
test: /\.(s?)css$/,
loaders: [
'style-loader',
`css-loader?sourceMap&root=${cssImagePath}`,
'sass-loader?outputStyle=expanded&sourceMap&sourceMapContents'
]
}
)
Now I have this line in my scss file: background-image: url('/themes/default/client/images/snow-flake.png');
If I run webpack and use the inspector the path is being replaced to this: url(/themes/default/dist/media/snow-flake.0af467e3.png)
Which looks perfect problem is the file-loader is not creating / copying to that directory so themes/default/dist/media does not exist?
Anyone came across this?
When I visit http://localhost:8080, everything works as expected including hot reloading.
However, when I visit http://localhost:8080/webpack-dev-server/, nothing seems to work; can't type into the input components, can't scroll, etc.
It's almost like the page is frozen. This just started happening after a fresh npm install. It wasn't a problem previously.
Is anyone else experiencing this?
Here's my webpack.config.js:
const webpack = require('webpack');
const path = require('path');
const PATHS = {
app: './src/index.js',
html: './src/index.html',
dist: path.join(__dirname, 'dist')
};
module.exports = {
entry: {
javascript: PATHS.app,
html: PATHS.html
},
output: {
path: PATHS.dist,
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
historyApiFallback: true,
contentBase: PATHS.dist
},
eslint: {
emitWarning: true
},
module: {
preLoaders: [
{
test: /\.(js|jsx)$/,
loaders: ["eslint-loader"],
exclude: /node_modules/
}
],
loaders: [
{
test: /\.html$/,
loader: "file?name=[name].[ext]"
},
{
test: /\.(js|jsx)/,
exclude: /node_modules/,
loaders: ["react-hot", "babel-loader"]
}
]
},
resolve: {
extensions: ['', '.js', '.jsx']
}
};
Here's my file layout:
-dist
-node_modules
-src
- components
--index.js
--index.html
--webpack.config.js
try changing your public path like below
module.exports = {
entry: {
javascript: PATHS.app,
html: PATHS.html
'webpack/hot/dev-server', // For hot style updates
// The script refreshing the browser on none hot updates
'webpack-dev-server/client?http://localhost:8080',
},
output: {
path: PATHS.dist,
publicPath: '/webpack-dev-server/',
filename: 'bundle.js'
},
I am trying to get *.scss files to be supported in my webpack configuration but I keep getting the following error when I run the webpack build command:
ERROR in ./~/css-loader!./~/sass-loader!./app/styles.scss
Module build failed: TypeError: Cannot read property 'sections' of null
at new SourceMapConsumer (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/node_modules/source-map/lib/source-map/source-map-consumer.js:23:21)
at PreviousMap.consumer (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/previous-map.js:37:34)
at new Input (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/input.js:42:28)
at parse (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/parse.js:17:17)
at new LazyResult (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:54:47)
at Processor.process (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/processor.js:30:16)
at processCss (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/lib/processCss.js:168:24)
at Object.module.exports (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/lib/loader.js:21:15)
# ./app/styles.scss 4:14-117
I can't for the life of me figure out why. It's a very basic setup.
I have created a dropbox share with the bare minimum illustrating this:
https://www.dropbox.com/s/quobq29ngr38mhx/webpack.sass.test.zip?dl=0
Unzip this then run:
npm install
webpack
Here is my webpack.config.js file:
var path = require('path')
var webpack = require('webpack')
module.exports = {
devtool: 'eval',
entry: [
'./app'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'index.js',
publicPath: '/dist/'
},
plugins: [
new webpack.NoErrorsPlugin()
],
resolve: {
extensions: ['', '.js']
},
module: {
loaders: [{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
}]
}
}
And the index.js entry file:
require('./styles.scss');
alert('foo bar baz');
And the styles.scss file:
body {
background-color: #000;
}
It appears to follow the recommendations of the sass-loader documentation site, but I can't get it to run.
:(
Information about my environment:
node - 0.12.4
npm - 2.10.1
os - OS X Yosemite
I have managed to get another workaround working that doesn't involve editing the css-loader libraries within my npm_modules directory (as per the answer by #chriserik).
If you add '?sourceMap' to the sass loader the css loader seems to handle the output.
Here is my updated configuration:
var path = require('path')
var webpack = require('webpack')
module.exports = {
devtool: 'eval',
entry: [
'./app'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'index.js',
publicPath: '/dist/'
},
plugins: [
new webpack.NoErrorsPlugin()
],
resolve: {
extensions: ['', '.js']
},
module: {
loaders: [{
test: /\.scss$/,
loader: 'style!css!sass?sourceMap'
}]
}
}
P.S. I even expanded this test to include a compass-mixins include, and this worked too.
After having the same issue, I found this: https://github.com/webpack/css-loader/issues/84
Apparently, the solution for now is to manually modify lines 17-19 of /node_modules/css-loader/lib/loader.js with
if(map && typeof map !== "string") {
map = JSON.stringify(map);
}
This fixed the problem for me.
The problem is solved by setting source-map option to true (as seen in other answers).
But in case you find messy passing options in the query string there is an alternative;
for configuring the sass loader you can create a sassLoader property in the webpack config object:
module.exports = {
devtool: 'eval',
entry: [
'./app'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'index.js',
publicPath: '/dist/'
},
plugins: [
new webpack.NoErrorsPlugin()
],
resolve: {
extensions: ['', '.js']
},
module: {
loaders: [{
test: /\.scss$/,
loader: 'style!css!sass'
// loader: ExtractPlugin.extract('style', 'css!sass'),
}]
},
sassLoader: {
sourceMap: true
},
}