I'm having these errors when bundling my app and I can't figure why it's not working. I was using style-loader before and now I'm trying to implement extract-text plugin but got these errors :
The thing is all of this was actually working with style-loader, I'm just replacing style-loader with extract plugin, not changing any other loader or plugin, and I searched but didn't found any solution.
vuetify.css can be found here https://github.com/vuetifyjs/vuetify/tree/master/dist
here is my index.scss :
#import "default";
#import "list";
#import "page";
#import "toolbar";
And here is part where I'm importing the files :
import 'vuetify/dist/vuetify.min.css';
import './sass/index.scss';
Webpack module config :
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
scss: 'css-loader?url=false!sass-loader',
},
extractCSS: true,
}
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
use: 'css-loader',
fallback: 'style-loader!css-loader'
})
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
use: 'css-loader?url=false!sass-loader',
fallback: 'style-loader!css-loader?url=false!sass-loader'
})
},
{
test: /\.(png|jpg|gif|svg|ttf|otf|eot|svg|woff(2)?)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
},
]
}
plugin config :
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
}
}),
new CleanWebpackPlugin([
getPath('../cordova/www/**'),
], {
root: getPath('..'),
}),
new CopyWebpackPlugin([{
from: getPath('../index.html'),
to: getPath('../cordova/www/index.html')
},
{
from: getPath('../assets'),
to: getPath('../cordova/www/assets/')
},
]),
new webpack.ProvidePlugin({
fetch: 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch'
}),
new webpack.LoaderOptionsPlugin({
minimize: false,
debug: true
}),
new ExtractTextPlugin('styles.css')
],
Change /\.css$/ rule to this one.
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}
Related
i'm making a react and django app and got stuck at this, I've tried everything, i even deleted my project and created a new one but nothing seems to be working, when i navigate to the files in devtools the code is completely different from mine, idk why they are so different the app file is completely diff to my file is app.jsx but in the devtools it imports app.js and the content is different to.
this is my actual index.js code
this is the index.js from the devtools
this is my webpack.config.js, i don't think this ha any issues:-
const webpack = require('webpack');
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './static/Main'),
filename: 'main.js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: {
loader: "babel-loader",
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
'postcss-loader'
]
},
{
test: /\.svg$/,
use: 'file-loader'
},
{
test: /\.png$/,
use: [
{
loader: 'url-loader',
options: {
mimetype: 'image/png'
}
}
]
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
]
},
optimization: {
minimize: true,
},
plugins: [
new CleanWebpackPlugin(),
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("development"),
},
})
],
};
I'm using the new version of Ecma Script preset in Webpack 4 but It still throws the error.
(currently, my bundle.js file size is about 5MB and it's so huge. In addition to UglifyJs, please let me know any other advice to decrease bundle size in Webpack 4 and ReactJs if you know)
Here is the error:
ERROR in bundle.js from UglifyJs
Unexpected token: keyword (const) [bundle.js:4981,0]
and here is my Webpack config:
{
...
...
module: {
rules: [
{
query: {
presets: ['react', 'env', 'stage-3'],
compact: false
},
test: /\.js$/,
loader: 'babel-loader',
exclude: /(node_modules|bower_components)/
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
{
test: /\.(eot|otf|ttf|woff|woff2)$/,
loader: 'file-loader?name=./fonts/[name].[ext]'
},
{
test: /\.(jpg|jpeg|png|gif|svg)$/,
loader: 'file-loader?name=./images/[name].[ext]'
},
{
test: /\.css$/,
exclude: /node_modules/,
include: [
resolve(__dirname, "not_exist_path")
],
loader: 'style-loader!css-loader'
},
]
},
...
...
optimization: {
minimizer: [new UglifyJsPlugin()]
},
}
What am I doing wrong? where is the problem?
I need to add the react-froala-wysiwyg editor to my ReactJs application. I installed the package and I insert this snippet in my component :
// Require Editor JS files.
import 'froala-editor/js/froala_editor.pkgd.min.js';
// Require Editor CSS files.
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';
// Require Font Awesome.
import 'font-awesome/css/font-awesome.css';
import FroalaEditor from 'react-froala-wysiwyg';
<FroalaEditor model={this.state.infos} />
In the webpack.js :
module: {
rules: [
{ test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
{ test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
loader: 'url-loader?limit=1024&name=images/[name].[ext]',
exclude: /node_modules/
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
}, {
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/octet-stream"
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file"
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=image/svg+xml"
}
]
},
I get this error :
in ./~/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0
in./~/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0
in ./~/font-awesome/fonts/fontawesome-webfont.eot in
in ./~/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0
in ./~/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0
in ./~/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0
You may need an appropriate loader to handle this file type.
So I need to know how can I edit the webpack coonfig file to fix this issue ?
Thanks,
Looks like you could use file-loader -
Install with npm npm install file-loader
update your loaders:
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}]
}
I have the following css files:
<link rel="stylesheet" href="style/select.css">
<link rel="stylesheet" href="style/site.css">
and the following webpack config
var path = require("path");
module.exports = {
entry: {
app: './src/index.js'
},
output: {
path: path.resolve(__dirname + '/dist'),
filename: '[name].js',
},
module: {
rules: [
{
test: /\.(css|scss)$/,
use: [
'style-loader',
'css-loader',
]
},
{
test: /\.html$/,
exclude: /node_modules/,
loader: 'file-loader?name=[name].[ext]',
},
{
test: /\.elm$/,
exclude: [/elm-stuff/, /node_modules/],
loader: 'elm-webpack-loader?verbose=true&warn=true',
options: {debug: true, warn: true},
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff',
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader',
},
],
noParse: /\.elm$/,
},
devServer: {
inline: true,
stats: { colors: true }
},
resolve: {
mainFields: [ 'main'],
}
};
when I use webpack-dev-server, the in memory file server seems to have the correct css files. However when I call
yarn build
it does not copy the css files in my dist folder and therefore fails to load the css files.
Are you importing the css files in your modules? I think you need to use the ExtractTextWebpackPlugin which extract the css from the js bundle into a separate css file.
This will not work with webpack-dev-server though, so you need to disable the plugin in the configuration that you use for the dev server. There is an option that allows you to do that:
new ExtractTextPlugin({
filename: '[name].css',
disable: true,
}),
Try this config to webpack 4,
For loader:
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader', options: {modules:true, importLoaders: 1 } },
{ loader: 'postcss-loader', options: {
ident: 'postcss',
plugins: () => [
postcssPresetEnv(/* pluginOptions */)
]
} }
]
For plugin section:
new MiniCssExtractPlugin({
filename: '[name].css' }),
Webpack 2 source-map are not generating for javascript and css. It doesn't even show error. I used same syntax as the official documentation. I even added uglifyJs plugin sourcemap parameter to true. Can anybody please help me?
Below is my webpack config
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const webpack = require('webpack');
const extractSass = new ExtractTextPlugin({
filename: "vendor-styles.css"
});
module.exports = {
entry: './js/app/index.js',
output: {
path: path.resolve(__dirname, "./js/dist/"),
filename: "[name].js"
},
devtool: "source-map",
plugins: [
extractSass,
new webpack.ProvidePlugin({
Promise: 'es6-promise-promise',
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
return module.context && module.context.indexOf('node_modules') !== -1;
}
}),
new webpack.optimize.UglifyJsPlugin({sourceMap: true})
],
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: [
'env',
'react'
]
}
},
{
test: /\.scss$/,
use: extractSass.extract({
use: [{
loader: "css-loader",
options: {
sourceMap: true,
importLoaders: true
}
}, {
loader: "sass-loader",
options: {
sourceMap: true
}
}],
// use style-loader in development
fallback: "style-loader"
})
},
{
test: /\.css$/,
use: extractSass.extract({
use: [{
loader: "css-loader",
options: {
sourceMap: true,
importLoaders: true
}
}],
// use style-loader in development
fallback: "style-loader"
})
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
use: "url-loader?limit=10000&mimetype=application/font-woff&name=/css/fonts/[name].[ext]"
},
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
use: "url-loader?limit=10000&mimetype=application/font-woff&name=/css/fonts/[name].[ext]"
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: "url-loader?limit=10000&mimetype=application/octet-stream&name=/css/fonts/[name].[ext]"
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: "file-loader?name=/css/fonts/[name].[ext]"
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: "url-loader?limit=10000&mimetype=image/svg+xml&name=/css/fonts/[name].[ext]"
},
{
test: /\.(png|jpg|jpeg|gif)$/,
loader: 'url-loader'
},
]
}
}
I had the same problem but I finally got webpack to spit out sourcemaps for my .jsx files, by using the SourceMapDevToolPlugin. I straight copied it from the example in the docs; https://webpack.js.org/plugins/source-map-dev-tool-plugin/
Hope it helps :)
Add this line of code before entry devtool: 'cheap-module-eval-source-map', then in the debugger you should get exact line number of error.
I was having the same problem that #pritesh-panjiker was having.
What actually solved it for me was the simple addition of:
{sourceMap: true}
Into the the line of code:
new webpack.optimize.UglifyJsPlugin({sourceMap: true})
I also found these two documents very useful when I upgraded from Webpack 1 to Webpack 2:
https://moduscreate.com/blog/webpack-2-tree-shaking-configuration/
https://gist.github.com/sokra/27b24881210b56bbaff7