I'm seeing an error in webpack when I try to run my build.
webpack --config conf/webpack.build.config.js --progress --colors --display-error-details --display-modules --display-reasons
Hash: e633ac8cf3ba9196f876
Version: webpack 1.12.9
Time: 312ms
Asset Size Chunks Chunk Names
tinymce-comments-plus-bundle.js 5.88 kB 0 [emitted] main
[0] multi main 28 bytes {0} [built] [1 error]
[1] ./js/tinymce-comments-plus.js 0 bytes [built] [failed]
single entry ./js/tinymce-comments-plus.js [0] multi main
ERROR in missing path
# multi main
Options.build is true when the npm task is running. I've tried adjusting the paths but can't seem to find which path is wrong. Where is # multi main?
Here is my webpack config.
module.exports = function( options ) {
var path = require( 'path' ),
cssLoaders = 'style!css',
scssLoaders = cssLoaders + '!sass',
babelLoader = 'react-hot!babel',
webpack = require( 'webpack' ),
ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
function extractLoaders( extract, loaders ) {
return ExtractTextPlugin.extract( extract, loaders.substr( loaders.indexOf( '!' ) ) );
}
if ( options.build ) {
cssLoaders = extractLoaders( 'style', cssLoaders );
scssLoaders = extractLoaders( 'style', scssLoaders );
babelLoader = extractLoaders( 'react-hot', babelLoader );
}
return {
entry: [ './js/tinymce-comments-plus.js' ],
output: {
path: __dirname + '/../js',
publicPath: options.build ? '/dist/' : 'http://localhost:8080/',
filename: 'tinymce-comments-plus-bundle.js',
// hot: true,
// headers: { 'Access-Control-Allow-Origin': '*' }
},
module: {
loaders: [
{
test: /\.css$/,
loader: cssLoaders
},
{
test: /\.scss$/,
loader: scssLoaders
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: babelLoader
},
{
test: /\.jsx$/,
exclude: /node_modules/,
loader: babelLoader
}
]
},
resolve: {
root: [
path.join( __dirname, '..', 'components' ),
path.join( __dirname, '..', 'js' ),
path.join( __dirname, '..', 'sass' ),
],
extensions: [ '', '.js', '.jsx', '.sass', '.scss', '.css' ],
},
plugins: options.build ? [
// build plugins
new ExtractTextPlugin( './css/[name].css' ),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new webpack.HotModuleReplacementPlugin()
] : [
// dev plugins
new ExtractTextPlugin( './css/[name].css' ),
//new webpack.HotModuleReplacementPlugin()
]
}; }
I had a similar issue, I would recommend installing webpack globally using npm install -g webpack then linking to the global installation npm link webpack
Also, ensure that you have your extension linked to resolve.extensions
resolve: {
extensions: ['', '.ts', '.tsx', '.js'] // <-- Had to add the .js one
}
Related
When executing Webpack 4 for development and production mode the chunks for development are smaller than when built for production. I am currently using the following Webpack 4 configuration;
const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const DuplicatePackageCheckerPlugin = require('#cerner/duplicate-package-checker-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const bundleAnalyzerPlugin = new BundleAnalyzerPlugin();
/** ignore #anwb packages
* Keep warning for multiple react-is versions as warning
* * */
const duplicatePackageChecker = new DuplicatePackageCheckerPlugin({
verbose: true,
exclude(instance) {
// ignore #anwb packages
if (instance.name.includes('#anwb')) {
return true;
}
return false;
},
});
/** clean dist on build , webpack 5 supports clean property in output object * */
const cleanWebpackPlugin = new CleanWebpackPlugin();
module.exports = (env, argv) => {
const isDevelopment = argv.mode === 'development';
// No sourcemaps in production
// const devtool = isDevelopment ? { devtool: 'source-map' } : {};
const devtool = { devtool: 'source-map' };
// Separated output folders for OTA an P to separate artifacts in pipeline
const distFolder = isDevelopment ? 'distota' : 'dist';
console.log(`Webpack build for : ${isDevelopment ? 'development' : 'production'}`);
console.log(`Source maps included : ${Object.keys(devtool).length !== 0 ? 'yes' : 'no'}`);
console.log(`Build directory : ${distFolder}`);
return {
entry: {
index: path.resolve(__dirname, './src/index.tsx'),
},
/**
* Library target is set to umd so the anwb core js loading system can import it
*/
output: {
path: path.resolve(__dirname, `./${distFolder}`),
filename: '[name].js',
chunkFilename: '[name].js',
libraryTarget: 'umd',
publicPath: `/`,
},
resolve: {
/**
* Import files from the src or node_modules directory
*/
modules: ['src', 'node_modules'],
/**
* Load preact-compat when react is encountered
*/
alias: {
react: 'preact/compat',
'react-dom': 'preact/compat',
'#anwb/typography': path.resolve(__dirname, '.', 'node_modules', '#anwb/typography'),
},
extensions: ['.ts', '.tsx', '.js'],
},
bail: true,
/**
* Include source maps
*/
...devtool,
module: {
rules: [
/**
* The font is loaded using the fileloader and placed in a fonts folder
*/
{
test: /\.(eot|ttf|woff|woff2)$/,
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]',
},
},
/**
* The svg images are loaded and placed in the images directory
*/
{
test: /\.svg$/,
loader: 'file-loader',
options: {
name: 'images/[name][hash].[ext]',
},
},
/**
* All images bigger then 25000 bytes are placed in an images folder. Small images are included as inline base 64.
*/
{
test: /\.(png|jpg|gif)$/,
loader: 'url-loader',
options: {
limit: '25000',
name: 'images/[name][hash].[ext]',
},
},
/**
* All less files are converted down to css and are autoprefixed using the postcss module
*/
{
test: /\.(less|css)$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
{
loader: 'less-loader',
options: {
lessOptions: {
javascriptEnabled: true,
},
},
},
],
},
/**
* Js is transpiled using babel
*/
{
test: /\.(js|ts|tsx)$/,
exclude: ['/node_modules'],
include: [/src/, /node_modules\/#anwb/],
loader: 'babel-loader',
options: {
presets: [
[
'#babel/env',
{
modules: false,
targets: ['> 1% in NL', 'last 2 versions', 'last 5 iOS versions'],
// NewRelic uses Chrome 72 (2019). Therefore we need to Polyfill some features like Promise.allSettled.
// Story is made to remove it when NR is updated (MACS-13942)
useBuiltIns: 'usage',
corejs: { version: 3, proposals: true },
},
],
'#babel/react',
'#babel/flow',
],
plugins: [
['#babel/plugin-transform-react-jsx', { pragma: 'h' }],
'syntax-dynamic-import',
],
},
},
],
},
optimization: {
// splitChunks: {
// chunks: 'all',
// },
minimizer: [
new CssMinimizerPlugin({
test: /.css$/i,
minimizerOptions: {
preset: [
'default',
{
discardComments: { removeAll: true },
},
],
},
}),
new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: false,
},
},
}),
],
},
plugins: [
bundleAnalyzerPlugin,
cleanWebpackPlugin,
/**
* The extract text plugin makes sure that all css is put into a single css file named after the application
*/
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[name].css',
}),
duplicatePackageChecker,
/**
* Dont use all moment locales
*/
new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /nl/),
new webpack.DefinePlugin({
// "process.env": {
// NODE_ENV: simulateProduction ? JSON.stringify("production") : JSON.stringify("development")
// },
PRODUCTION: true,
}),
],
};
};
E.g. if the build is created for development the component has a stat size of 203KB
If the same build is run for production the same component has a stat size of 676KB
When the Webpack optimization is removed, this does not change. So i can rule this out.
Webpack is started using the two following package.json scripts;
"build": "webpack --config ./webpack.js --mode=production",
"build:ota": "webpack --config ./webpack.js --mode=development",
Any ideas how to optimize the chunks for production ?
I have my scss file which imports a scss file which further imports bourbon and bourbon-neat. I even searched various issues on the forum but did not find the issue where in the scsss to css conversion, the case is to include bourbon.
webpack 4.28.1
mini-css-extract-plugin 0.5.0
I am seeing the following error:
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/lib/loader.js??ref--5-2!src/component/styles/main.scss:enter code here
Entrypoint mini-css-extract-plugin = *
[./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js?!./src/component/styles/main.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js??ref--5-2!./src/component/styles/main.scss 373 bytes {mini-css-extract-plugin} [built] [failed] [1 error]
ERROR in ./src/component/styles/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js??ref--5-2!./src/component/styles/main.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
var path = require('path');
^
Invalid CSS after "v": expected 1 selector or at-rule, was "var path = require("
in /Users/../node_modules/bourbon/index.js (line 1, column 1)
My webpack.config.js file is here
const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
entry: {
"app": ['whatwg-fetch',"./src/component/index.ts", "./src/component/styles/main.scss"],
"app-helper": "./src/component/helpers.ts"
},
output: {
path: path.resolve(__dirname, './src/component/dist'),
filename: "[name].bundle.js"
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
},
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: "sass-loader",// compiles Sass to CSS
options: {
includePaths: [
'node_modules/bourbon/app/assets/stylesheets',
'node_modules/bourbon-neat/app/assets/stylesheets'
]
}
}
],
]
},
plugins: [
new MiniCssExtractPlugin({
filename: './src/component/dist/output-style.css',
})
],
optimization: {
minimizer:[
new UglifyJSPlugin({
cache: true,
parallel: true,
sourceMap: true // set to true if you want JS source maps
}),
new OptimizeCSSAssetsPlugin({})
]
}
}
Please provide your valuable suggestions.
This turns out to be an issue with sass-loader version 7.x . I changed sass-loader dependency back to 6.0.7 and it started working like charm. Here is the stackoverflow thread which helped
Angular 2 Node Bourbon Error
The problem
Im using webpack 4 to compile scss to css and MiniCssExtractPlugin to save the css into a different file. The problem is, that i dont manage to load images and fonts, that are included via url() inside of the scss files. It also makes no difference between running development or production.
Scss is compiled perfectly and without any problems. Also the scss-loader has no problems loading .scss-files from node_modules.
Why does this error occur and how can i fix it?
error-message when running npm
ERROR in ./ui/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./ui/index.scss)
Module not found: Error: Can't resolve '../webfonts/fa-solid-900.woff' in '/home/asdff45/Schreibtisch/Programme/GO/src/factorio-server-manager/manager/ui'
# ./ui/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./ui/index.scss) 7:336881-336921
ERROR in ./ui/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./ui/index.scss)
Module not found: Error: Can't resolve '../webfonts/fa-solid-900.woff2' in '/home/asdff45/Schreibtisch/Programme/GO/src/factorio-server-manager/manager/ui'
# ./ui/index.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./ui/index.scss) 7:336799-336840
And multiple more, but all have the same error, just the filename changes.
webpack-Config
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: {
// js: './ui/index.js',
sass: './ui/index.scss'
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'app')
},
resolve: {
alias: {
Utilities: path.resolve(__dirname, 'ui/js/')
},
extensions: ['.js', '.json', '.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
},
{
test: /(\.(png|jpe?g|gif)$|^((?!font).)*\.svg$)/,
loaders: [
{
loader: "file-loader",
options: {
name: loader_path => {
if(!/node_modules/.test(loader_path)) {
return "app/images/[name].[ext]?[hash]";
}
return (
"app/images/vendor/" +
loader_path.replace(/\\/g, "/")
.replace(/((.*(node_modules))|images|image|img|assets)\//g, '') +
'?[hash]'
);
},
}
}
]
},
{
test: /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/,
loaders: [
{
loader: "file-loader",
options: {
name: loader_path => {
if (!/node_modules/.test(loader_path)) {
return 'app/fonts/[name].[ext]?[hash]';
}
return (
'app/fonts/vendor/' +
loader_path
.replace(/\\/g, '/')
.replace(/((.*(node_modules))|fonts|font|assets)\//g, '') +
'?[hash]'
);
},
}
}
]
}
]
},
performance: {
hints: false
},
plugins: [
new MiniCssExtractPlugin({
filename: "bundle.css"
})
]
}
Project Repo/Branch
You need to add resolve-url-loader to your build, like this:
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"resolve-url-loader",
"sass-loader?sourceMap"
]
}
resolve-url-loader is resolving paths to assets based on the original file that is importing the asset.
I tried it locally and the build is now passing :) Cheers!
I am working on an AngularJS Project to configure webpack for bundling purpose. I am using webpack4 for the same.
Below is the config file.
webpack.config.js:
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');// Require html-webpack-plugin plugin
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const ExtractNormalCSS = new ExtractTextPlugin("./src/main/frontend/sass/main.scss");
const extractCSS = new ExtractTextPlugin('/src/main/frontend/assets/icons/paas-icons/style.css');
module.exports = {
entry: [ "./src/main/frontend/app/app.js","./src/main/frontend/sass/main.scss"], // webpack entry point. Module to start building dependency graph
output: {
path: path.join(__dirname, '/distTemp/'), // Folder to store generated bundle
filename: '[name].bundle.js' // Name of generated bundle after build
//publicPath: '' // public URL of the output directory when referenced in a browser
},
resolve:{
modules: [
'node_modules',
'bower_components',
'src'
],
extensions:[".js"]
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
options: {
compact: false,
cacheDirectory: true,
presets: ['es2015', 'angular'],
},
},
{
test: /.(scss)$/,
loader: 'style-loader!css-loader!sass-loader'
},
{
test: /\.html$/,
loader: 'html-loader?name=views/[name].[ext]'
},
{
test: /\.(png|jpg)$/,
use: [
'url-loader?limit=8192'
]
},
]
},
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
compress: false,
ecma: 6,
mangle: false
},
sourceMap: true
})
],
splitChunks: {
cacheGroups: {
commons: {
test: /node_modules/,
name: 'vendor',
chunks: 'all'
}
}
}
},
plugins: [ // Array of plugins to apply to build chunk
new HtmlWebpackPlugin({
template: "./src/main/frontend/index.html",
inject: 'body'
}),
new ExtractTextPlugin('/distTemp/style/style.css'),
ExtractNormalCSS,
extractCSS
],
devServer: { // configuration for webpack-dev-server
contentBase: '.src/main/frontend/assets', //source of static assets
port: 7700, // port to run dev-server
}
};
Upon building, I am getting the error mentioned below.
ERROR in ./src/main/frontend/sass/main.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/main/frontend/sass/main.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
var path = require("path");
^
Invalid CSS after "v": expected 1 selector or at-rule, was "var path = require("
in ###/node_modules/bourbon/index.js (line 1, column 1)
Error:
var path = require("path");
^
Invalid CSS after "v": expected 1 selector or at-rule, was "var path = require("
in ###/node_modules/bourbon/index.js (line 1, column 1)
at options.error (###/node_modules/node-sass/lib/index.js:291:26)
# ./src/main/frontend/sass/main.scss 2:14-134
# multi ./src/main/frontend/app/app.js ./src/main/frontend/sass/main.scss
I am using sass-loader and node-sass for the .scss files.
The main.scss file contains imports for the rest of the style files.
Could someone assist me in resolving this error please?
I am receiving lots of errors when trying to build my application using Webpack and have no idea what to do. I have looked around at other solutions that suggest adding things like target: 'web' and node: {fs: "empty"} to the webpack.config.prod.js but none of these have cleared the errors. Below is a selection of errors (there are about 150 in total) in the console after running sudo npm run build:
ERROR in ./~/ejs/lib/ejs.js Module not found: Error: Cannot resolve
module 'fs' in /tidee/auth_app/node_modules/ejs/lib #
./~/ejs/lib/ejs.js 47:9-22
ERROR in ./~/express/lib/request.js Module not found: Error: Cannot
resolve module 'net' in /tidee/auth_app/node_modules/express/lib #
./~/express/lib/request.js 18:11-25
ERROR in ./~/node-pre-gyp/lib/node-pre-gyp.js Module not found: Error:
Cannot resolve 'file' or 'directory' ../package in
/tidee/auth_app/node_modules/node-pre-gyp/lib #
./~/node-pre-gyp/lib/node-pre-gyp.js 60:16-37
ERROR in ./~/ps-tree/index.js Module not found: Error: Cannot resolve
module 'child_process' in /tidee/auth_app/node_modules/ps-tree #
./~/ps-tree/index.js 3:12-36
Below is my webpack.config.prod.js file:
const path = require('path');
var webpack = require("webpack");
var CompressionPlugin = require('compression-webpack-plugin');
const pkg = require("./package.json");
module.exports = {
entry: {
vendor: Object.keys(pkg.dependencies).filter(function (v) {
return v;
}),
app: path.join(__dirname, '/client/src/app.jsx')
},
output: {
path: path.join(__dirname, '/client/dist'),
filename: '[name].js',
publicPath: 'http://example.com/public/'
},
resolve: {
root: path.resolve('./client/dist'),
extensions: ['', '.js', '.jsx', '.less', '.css'],
alias: {
'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
}
},
module: {
loaders: [{
test: /\.js?$/,
loaders: ['babel'],
include: path.join(__dirname, '/shared')
},{
test: /\.jsx?$/,
loaders: ['react-hot','babel?' + JSON.stringify({
presets: ["es2015", "stage-0", "react"]
})],
include: path.join(__dirname, '/client/src')
},{
test: /\.less$/,
loaders: ['style', 'css', 'less']
},{
test: /\.css$/,
loaders: ['style', 'css']
},
{
test: /\.ico$/,
loader: "file-loader"
},
{
test: /\.png$/,
loader: "url-loader?limit=100000"
},
{
test: /\.jpg$/,
loader: "file-loader"
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&mimetype=image/svg+xml'
},{
test: /\.json$/,
loader: "json-loader"
}]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.ProvidePlugin({
"$":"jquery",
"jQuery":"jquery",
'global.jQuery': 'jquery'
}),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({ 'typeof window': '\"object\"' }),
new webpack.optimize.DedupePlugin(), //dedupe similar code
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.8
})
]
};
Note: I am using Node v7.2.1 and Webpack v1.14.0