I'm migrating an Angular 1 project in order to be able to deploy everything with Webpack.
So far, I managed to configure almost everything but I'm having issues trying to export the static assets (fonts and images mostly).
I've configured the ExtractTextPlugin as below
{ test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader','css-loader', {allChunks: true}) }
and in the compiled CSS the paths are replaced but the resulting absolute path is wrong. In fact the resulting path is /assetsweb/assets/.. while I expect it to be /assets/...
I cannot understand where the /assetsweb part is coming from.
Here's the Webpack configuration I'm using
var webpack = require("webpack");
var path = require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
context: __dirname + "/src",
entry:{
web: "./web/wayonara.js",
mobile: "./mobile/wayonara.js"
},
output:{
path: __dirname + "/dist",
filename: "/[name]/bundle.js",
publicPath: "/assets"
},
plugins:[
new webpack.DefinePlugin({
ENV: JSON.stringify('dev')
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
EXIF: "exif-js",
"window.EXIF":"exif-js"
}),
new ExtractTextPlugin("/[name]/assets/css/bundle.css")
],
module:{
loaders: [
{
loader: "babel-loader",
test: /\.js?$/,
exclude: [/node_modules/, /bower_components/],
query: {
presets: ['es2015']
}
},
{ test: /\.html$/, loader: "html" },
{ test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader','css-loader', {allChunks: true}) },
{
test: /\.(jpg|jpeg|png|svg)$/,
loader: "file-loader?name=[path][name].[ext]"
},
{
test: /\.(woff|woff2|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?/,
loader: 'file-loader?name=[path][name].[ext]'
}
]
}
};
Can you help me? Thanks in advance,
Best,
Maurizio
Related
How can I primereact css import to nextjs
I did it according to the nextjs documentation. but it gave the error. I have to install loader.but I'm new to webpack. I dont find how to webpack config. Please produce a solution.
This is what worked for me in webpack.config.js file:
var webpack = require('webpack');
var path = require('path');
var nodeExternals = require('webpack-node-externals');
module.exports = {
target: 'web',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'index.js',
libraryTarget: 'commonjs2'
},
module: {
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
exclude: /(node_modules|bower_components|build)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(png|jpg|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=100000'
}
]
},
mode: 'development'
};
Actually your need correct loaders to transpile from ES6 to ES5.
This should work.
I'm trying to use blueprintjs and when i'm importing its css. And i think i made something wrong in my webpack config so I see this error
there is my webpack config
const ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require("webpack");
var path = require("path");
module.exports={
entry: './src/index.js',
output:{
path: __dirname + "/public",
filename:'bundle.js',
publicPath: "/public/"
},
devServer: {
inline: true,
contentBase: './public',
port: 3000
},
module:{
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: "babel-loader",
query: {
presets: ['es2015', 'react', 'stage-0'],
}
},
{
test: /\.s(a|c)ss$/,
loader: ExtractTextPlugin.extract({loader: ['css-loader', 'sass-loader', 'style-loader']})
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
],
},
{
test: /\.(|gif||svg|woff|woff2|eot|ttf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader', options: {name: '[name].[ext]'}
}, {
test: /\.(png|jpg|)$/,
loader: 'url-loader?limit=200000'
},
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
}
i'm using "webpack": "^2.7.0","#blueprintjs/core": "^1.34.1" and a lot of loaders
i tried to import my css like this
require('!css-loader!./index.css');
and just like this
import styles from './index.css'
the result is the same
after extra couple hours of work i got this error
at this point i'm not sure what's wrong with my webpack and how to fix it at all
any suggestions are welcome
You can compare your webpack configuration with the one in the Blueprint monorepo: https://github.com/palantir/blueprint/tree/develop/packages/webpack-build-scripts
Try applying loaders in the same order as in the base config: ['style-loader', 'css-loader', 'sass-loader']
Try using the full path to blueprint.css inside the NPM package. The webpack error in the screenshot clearly shows the css-loader trying to load esm/index.js, a JS file, so of course it fails.
Try: #import "~#blueprintjs/core/lib/css/blueprint.css";
I can't figure out how to compile my less files to css and then include them in my build folder, without the app failing to run. Trying to build/run the application returns the following error:
ERROR in ./content/styles/less/ts.less
Module build failed:
#import "node_modules/bootstrap/less/mixins/buttons.less";
#import "node_modules/Font-awesome/less/font-awesome.less";
^
Can't resolve './node_modules/Font-awesome/less/font-awesome.less' in '/home/thinkpad/work/EPD.SPA/EpdSPA/content/styles/less'
in /home/thinkpad/work/EPD.SPA/EpdSPA/content/styles/less/ts.less (line 4, column 0)
# multi ./content/styles/less/for.less ./content/styles/less/kladd.less ./content/styles/less/ts.less
To clarify: These files have already proved to be working with grunt. The webpack migration triggered these errors.
I'm using the webpack config examples from here. My config file:
var webpack = require('webpack');
var globby = require('globby');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var AssetsPlugin = require('assets-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
const extractLESS = new ExtractTextPlugin('stylesheets/[name]-two.css');
module.exports = {
entry: {
app: globby.sync(['./app/app.js','./app/app.run.js', './app/app.config.js', './app/**/*.js']),
styles: globby.sync(['./content/styles/*.css']),
lessStyles: globby.sync(['./content/styles/less/*.less']),
images: globby.sync(['./content/images/**/*.*']),
vendor: [
// removed to save space
]
},
output: {
filename: './scripts/[name].bundle.js',
path: path.join(__dirname, "public")
},
devServer: {
port: 1384,
contentBase: './public/'
},
// Enable sourcemaps for debugging webpack's output.
devtool: 'source-map',
module: {
rules: [
{ test: /\.less$/,
use: extractLESS.extract([ 'css-loader', 'less-loader' ])
},
{
test: /\.html$/,
loader: 'raw-loader',
exclude: [/node_modules/]
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }),
},
{
test: /\.(ico)$/,
loader: "url-loader?name=./[name].[ext]",
include: path.resolve(__dirname, "content", "images")
},
{
test: /\.svg$/,
loader: 'svg-loader'
},
{
test: /\.(jpg|jpeg|gif|png|PNG|tiff|svg)$/,
loader: 'file-loader?name=/[path]/[name].[ext]',
include: path.resolve(__dirname, "content", "images"),
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?minetype=application/font-woff&name=./fonts/[name].[ext]'
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader?name=./fonts/[name].[ext]'
},
{
test: require.resolve('adal-angular/lib/adal'),
loader: 'expose-loader?AuthenticationContext'
},
{
test: /\.js$/,
enforce: "pre",
loader: 'source-map-loader'
}
],
},
plugins: [
new HtmlWebpackPlugin({
template: './app/layout.html',
filename: 'index.html'
}),
new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: './scripts/vendor.bundle.js' }),
new ExtractTextPlugin({ filename: './[name].bundle.css' }),
/*
new CleanWebpackPlugin(['./public'], {
verbose: false
}),
*/
new AssetsPlugin({
filename: 'webpack.assets.json',
path: './public/scripts',
prettyPrint: true
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'window.$': 'jquery',
"window.AuthenticationContext": "AuthenticationContext",
_: 'underscore'
}),
new CopyWebpackPlugin([
{from: './app/**/*.html', to: './'}
]),
extractLESS // including the less files here
],
externals: [
{ xmlhttprequest: '{XMLHttpRequest:XMLHttpRequest}' }
]
}
Here you can see that the less files have been compiled to css and included in the public(build) folder. Why do i get errors, if the config file executes as intended?
Here it also shows that all the files are included in the application in the browser as well. I have checked all my dependencies and they are all running latest versions.
The path for the imports in the less files, were incorrect. Here is the working references:
#import "~bootstrap/less/variables.less";
#import "~bootstrap/less/mixins/buttons.less";
#import "~font-awesome/less/font-awesome.less";
I think the problem is with your font_awesome path.
Try to change import to (font_awesome instead of Font_awesome)
#import "node_modules/font-awesome/less/font-awesome.less";
I've easily set up my webpack config for js+css and now I got stuck trying to update the config to generate a css-only bundle. The reason for this need is to separate bundles for landing page and the app itself. Here is my config (pretty much simplified but I kept everything that might be related):
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: [
'bootstrap-loader',
'./web/static/app/js/index.js'
],
output: {
path: './priv/static',
filename: 'js/app.js',
publicPath: '/',
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
plugins: ['transform-decorators-legacy'],
presets: ['react', 'es2015', 'stage-2', 'stage-0'],
}
}, {
test: /bootstrap\/dist\/js\/umd\//,
loader: 'imports?jQuery=jquery'
}, {
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style', 'css?localIdentName=[hash:base64]!autoprefixer?browsers=last 2 versions!sass')
}],
},
resolve: {
extensions: ['', '.js', '.scss', '.css'],
modulesDirectories: ["node_modules", __dirname + "/web/static/app/js"],
alias: {
styles: __dirname + '/web/static/app/styles'
}
},
plugins: [
new ExtractTextPlugin('css/[name].css')
]
};
currently it generates css/app.css and js/app.js just fine and what I'm trying to achieve is generating css/landing.css from web/static/landing/index.scss
What I've tried:
I added './web/static/landing/js/index.js' to module.exports.entry, added
var extractSCSS_app = new ExtractTextPlugin('css/app.css');
var extractSCSS_landing = new ExtractTextPlugin('css/landing.css');
and replaced scss loader with following:
}, {
test: /app\/.*?\.scss$/,
loader: extractSCSS_app.extract('style', 'css?localIdentName=[hash:base64]!autoprefixer?browsers=last 2 versions!sass')
}, {
test: /landind\/.*?\.scss$/,
loader: extractSCSS_landing.extract('style', 'css?localIdentName=[hash:base64]!autoprefixer?browsers=last 2 versions!sass')
}, {
and in plugins I've put
extractSCSS_app,
extractSCSS_landing,
Almost every article about webpack I've found describing js+css bundles configuration and docs are not clear to me regarding this question, so what I've tried is what I imagined could be right. Unfortunately it wasn't and that's why I'm here :)
Just quickly skimming through your question. could it be a typo. bring attention to this line
test: /landind\/.*?\.scss$/
landind instead of landing? late night coding haha?
So I'm trying to build a map app using webpack and leaflet. I can require leaflet.js from my map.js file, but I can't call leaflet.css without getting an error.
My current webpack.config.js looks like:
'use strict'
var webpack = require('webpack'),
path = require('path'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
srcPath = path.join(__dirname, 'src');
module.exports = {
target: "web",
cache: true,
entry: {
app: path.join(srcPath, "index.js")
},
resolve: {
alais: {
leaflet_css: __dirname + "/node_modules/leaflet/dist/leaflet.css"
}
},
module: {
loaders: [
{test: /\.js?$/, exclude: /node_modules/, loader: "babel-loader"},
{test: /\.scss?$/, exclude: /node_modules/, loader: "style!css!sass!"},
{test: /\.css?$/, loader: "style!css!"}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin("common", "common.js"),
new HtmlWebpackPlugin({
inject: true,
template: "src/index.html"
}),
new webpack.NoErrorsPlugin()
],
output: {
path: path.join(__dirname, "dist"),
publicPath: "/dist/",
filename: "[name].js",
pathInfo: true
}
}
And my main.js file looks like:
var $ = require('jquery'),
leaflet = require('leaflet');
require("./sass/main.scss");
require("leaflet_css");
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
console.log('I got called');
What is the correct approach of bundling css files from 3rd party suppliers via webpack?
I saw this project were leaflet is stored in the libs directory... what's the reason for this, why store it in the libs directory if it is installed into the node_modules direcory via npm?
This is very much a learning exercise so any pointers are greatly appreciated! :)
So it turns out, the answer is a combination of webpack's resolve.alias and the file loader. My new webpack file looks like this:
'use strict'
var webpack = require('webpack'),
path = require('path'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
srcPath = path.join(__dirname, 'src');
module.exports = {
target: "web",
cache: true,
entry: {
app: path.join(srcPath, "index.js")
},
resolve: {
extensions: ['', '.html', '.js', '.json', '.scss', '.css'],
alias: {
leaflet_css: __dirname + "/node_modules/leaflet/dist/leaflet.css",
leaflet_marker: __dirname + "/node_modules/leaflet/dist/images/marker-icon.png",
leaflet_marker_2x: __dirname + "/node_modules/leaflet/dist/images/marker-icon-2x.png",
leaflet_marker_shadow: __dirname + "/node_modules/leaflet/dist/images/marker-shadow.png"
}
},
module: {
loaders: [
{test: /\.js?$/, exclude: /node_modules/, loader: "babel-loader"},
{test: /\.scss?$/, exclude: /node_modules/, loader: "style-loader!css-loader!sass-loader!"},
{test: /\.css?$/, loader: "style-loader!css-loader!"},
{test: /\.(png|jpg)$/, loader: "file-loader?name=images/[name].[ext]"}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin("common", "common.js"),
new HtmlWebpackPlugin({
inject: true,
template: "src/index.html"
}),
new webpack.NoErrorsPlugin()
],
output: {
path: path.join(__dirname, "dist"),
publicPath: "/dist/",
filename: "[name].js",
pathInfo: true
}
}
And then all I need to do is require the icons in the .js file
require("./sass/main");
require("leaflet_css");
require("leaflet_marker");
require("leaflet_marker_2x");
require("leaflet_marker_shadow");
Lovely!!! :)
I managed to do it easier. Just needed to add loaders for css and for png
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{
test: /\.png$/,
loader: 'url-loader',
query: { mimetype: 'image/png' }
}
]