Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 13:40
    webpack-bot labeled #9889
  • 13:40
    MrNoddyInfy opened #9889
  • 13:08
    webpack-bot synchronize #7075
  • 13:07

    webpack-bot on master

    chore(deps-dev): bump eslint-pl… Merge pull request #9888 from w… (compare)

  • 13:07

    webpack-bot on npm_and_yarn

    (compare)

  • 13:07
    webpack-bot closed #9888
  • 13:07
    webpack-bot labeled #9888
  • 12:50

    dependabot-preview[bot] on npm_and_yarn

    chore(deps-dev): bump eslint-pl… (compare)

  • 12:50
    webpack-bot labeled #9888
  • 12:50
    dependabot-preview[bot] labeled #9888
  • 12:50
    dependabot-preview[bot] opened #9888
  • 08:20
    webpack-bot synchronize #7075
  • 08:20

    webpack-bot on npm_and_yarn

    (compare)

  • 08:20

    webpack-bot on master

    chore(deps-dev): bump ts-loader… Merge pull request #9887 from w… (compare)

  • 08:20
    webpack-bot closed #9887
  • 08:20
    webpack-bot labeled #9887
  • 08:04

    dependabot-preview[bot] on npm_and_yarn

    chore(deps-dev): bump ts-loader… (compare)

  • 08:04
    webpack-bot labeled #9887
  • 08:03
    dependabot-preview[bot] labeled #9887
  • 08:03
    dependabot-preview[bot] opened #9887
Ahmed Abd El Mawgood
@oddcoder
when trying to build I get this error
ERROR in ./src/index.tsx
Module not found: Error: Can't resolve './components/App' in '/home/oddcoder/projects/rair/rair-ui/src'
 @ ./src/index.tsx 5:12-39
I have the feeling that it is something wrong with webpack config
Dhaval Vira
@dhavalveera

Hello, I am new into Webpack.

can anyone tell me where Webpack is used in Websites ?

joe
@joepagan
Can anyone suggest how I can do post-processing on my builds? Is there a complete callback in a webpack config, or plugin?
I want to trigger something while dev-server process is running so appending to an npm script simply will not be suitable.
*Edit: nevermind found compiler hooks was a thing & this: https://stackoverflow.com/a/49786887/902224
Dima Gorbenko
@dmitrygorbenko
hi guys,
how to get rid of messages like
harmony export imported
harmony side effect evaluation
which can be found on this page https://github.com/webpack/webpack/tree/master/examples/harmony-unused (given as an example, I just have the similar output)
Dima Gorbenko
@dmitrygorbenko
never mind
Misha
@ASmallCookie_gitlab
@oddcoder Hello, I have the same issue
If you find a fix, please send me a message
Nick Franken
@fridgerator
Does anyone know of a webpack loader that supports worker_thread Workers ?
Mario Perini
@MarioPerini
@joepagan thank you for the detailed informations i got it already, this was a good instruction: https://www.thebasement.be/working-with-babel-7-and-webpack/
Harm Smits
@harm-smits

Hello, I am having quite a few difficulties with the plugin mini-css-extract-plugin. I get this very long error about 'webpack_require' supposedly not being defined:

ERROR in ./css/theme.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: __webpack_require__(...) is not a function
    at Module.<anonymous> (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:123:63)
    at __webpack_require__ (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:21:30)
    at Module.<anonymous> (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:4919:41)
    at __webpack_require__ (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:21:30)
    at Object.<anonymous> (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:4809:28)
    at __webpack_require__ (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:21:30)
    at ****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:85:18
    at Object.<anonymous> (****project/_dev/node_modules/css-loader/dist/cjs.js!****project/_dev/node_modules/sass-loader/dist/cjs.js??ref--5-2!****project/_dev/css/theme.scss:88:10)
    at Module._compile (****project/_dev/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at exec (****project/_dev/node_modules/mini-css-extract-plugin/dist/loader.js:60:10)
    at childCompiler.runAsChild (****project/_dev/node_modules/mini-css-extract-plugin/dist/loader.js:153:14)
    at compile (****project/_dev/node_modules/webpack/lib/Compiler.js:343:11)
    at hooks.afterCompile.callAsync.err (****project/_dev/node_modules/webpack/lib/Compiler.js:681:15)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (****project/_dev/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (****project/_dev/node_modules/tapable/lib/Hook.js:154:20)
    at compilation.seal.err (****project/_dev/node_modules/webpack/lib/Compiler.js:678:31)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (****project/_dev/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (****project/_dev/node_modules/tapable/lib/Hook.js:154:20)
    at hooks.optimizeAssets.callAsync.err (****project/_dev/node_modules/webpack/lib/Compilation.js:1423:35)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (****project/_dev/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (****project/_dev/node_modules/tapable/lib/Hook.js:154:20)
    at hooks.optimizeChunkAssets.callAsync.err (****project/_dev/node_modules/webpack/lib/Compilation.js:1414:32)
    at _promise1.then._result1 (eval at create (****project/_dev/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:14:1)
    at process._tickCallback (internal/process/next_tick.js:68:7)
 @ multi ./js/global.js ./css/theme.scss global[1]

Could anyone help me out please?

Mario Perini
@MarioPerini
can you show the webpack config?
Harm Smits
@harm-smits
const path = require('path');
const AssetsPlugin = require('assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const SriPlugin = require('webpack-subresource-integrity');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: "production",
    entry: {
        runtime: ['./js/runtime.js', './css/inline.scss'],
        vendor: ['./js/vendor.js']
    },
    output: {
        path: path.resolve(__dirname, '../assets/js'),
        filename: '[name].[contenthash].js',
        crossOriginLoading: 'anonymous'
    },
    resolve: {
        alias: {
            jquery: "jquery/src/jquery"
        }
    },
    optimization: {
        runtimeChunk: 'single',
        splitChunks: {
            cacheGroups: {
                default: false,
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendor',
                    chunks: 'all',
                    minChunks: 2
                }
            }
        },
        minimizer: [
            new UglifyJsPlugin({
                sourceMap: true,
                extractComments: '/@extract/i'
            }),
            new OptimizeCSSAssetsPlugin({
                cssProcessorPluginOptions: {
                    preset: ['default', {discardComments: { removeAll: true } }],
                }
            })
        ]
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [{
                    loader: 'babel-loader'
                }],
                include: [
                    path.resolve('js'),
                    path.resolve('node_modules')
                ],
            },
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            sassOptions: {
                                indentWidth: 4,
                                includePaths: ['css/*/'],
                            },
                        },
                    },
                ]
            }
        ]
    },
    plugins: [
        new SriPlugin({
            hashFuncNames: ['sha256', 'sha384'],
            enabled: true
        }),
        new AssetsPlugin({
            filename: 'assets.json',
            integrity: true,
            prettyPrint: true,
            path: path.resolve(__dirname, '../config')
        }),
        new MiniCssExtractPlugin({
            filename: '[name].[contenthash].css',
            chunkFilename: '[name].[contenthash].css'
        }),
        new CleanWebpackPlugin(),
        new FixStyleOnlyEntriesPlugin()
    ]
};
@MarioPerini There you go
@MarioPerini Here you also have all my dependencies (with their versions)
  "dependencies": {
    "@babel/core": "7.6.4",
    "@babel/polyfill": "^7.6.0",
    "babel-loader": "8.0.6",
    "core-js": "^3.3.2",
    "css-loader": "^3.2.0",
    "jquery": "^3.4.0",
    "mini-css-extract-plugin": "^0.8.0",
    "modernizr-webpack-plugin": "^1.0.7",
    "node-sass": "^4.12.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "path": "^0.12.7",
    "postcss-loader": "^3.0.0",
    "promise-polyfill": "^8.1.3",
    "regenerator-runtime": "^0.13.3",
    "sass": "^1.22.12",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "swiper": "^5.1.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9",
    "webpack-fix-style-only-entries": "^0.4.0",
    "webpack-subresource-integrity": "^1.3.4",
    "whatwg-fetch": "^3.0.0"
  },
  "devDependencies": {
    "@babel/plugin-syntax-dynamic-import": "7.2.0",
    "@babel/preset-env": "7.6.3",
    "assets-webpack-plugin": "^3.9.10",
    "clean-webpack-plugin": "^3.0.0"
  }
Frank Stallone
@frankstallone
with webpack-dev-server if I want to use --env.mode development, which is a webpack environment flag, can I use that string at the end of my command and webpack-dev-server will know to use the right config?
Lucas Bersier
@bersLucas

How can I use ExtractTextPlugin and style-loader to generate a .css file, but have the index.html reference it absolutely. Right now the index.html is saying

<link href="css/style.css" rel="stylesheet"></head>

but I want it to say

<link href="/my/folder/on/the/server/css/style.css" rel="stylesheet"></head>
I changed new ExtractTextPlugin('css/style.css'), to new ExtractTextPlugin('/my/folder/on/the/server/css/style.css'),, but it created that CSS file inside of (context)/my/folder/on/the/server/css
Lucas Bersier
@bersLucas
The solution was to add this to my config:
    output: {
        publicPath: '/my/folder/on/the/server'
    },
Frank Stallone
@frankstallone
Ahh okay webpack-dev-server does take --env the same as webpack itself. Really really handy
Wellington Cordeiro
@wldcordeiro
I'm running into an issue where webpack is placing some node_modules before the core-js modules and it ends up causing errors in IE11. I've tried using combinations of optimization.splitChunks now but using it makes my umd library output as undefined. How can I ensure babel/core-js/regenerator-runtime are first and then have the defaults take over?
Félix Sanz
@felixsanz
can someone give me a hand with webpack-dev-server please? i have some questions and i can't find any answer
like... how i do tell it to start my app? the entry file or something
Frank Stallone
@frankstallone
@felixsanz this is the command we run webpack-dev-server --env.mode production --env.presets devServer
spinningcat
@spinningcat
ola
is there a source find information about integrating react app with webpack?
Frank Stallone
@frankstallone
Source find information?
spinningcat
@spinningcat
i mean like tutorial
tutoriial about integrating react with webpack?
Felix
@Flixbox
@spinningcat use CRA
Frank Stallone
@frankstallone
@spinningcat may be a better question for a React chat like Reactiflux https://www.reactiflux.com/
Flixbox's suggestion is a great way to getting started with webpack/react.
spinningcat
@spinningcat
@frankstallone they want me to creact react app froom scratch
thanks for the link
does it llook correct? http://dpaste.com/3QDE12V
Frank Stallone
@frankstallone
PUSHPRAJ VERMA
@pushprajverma03_gitlab
Hi All, I am getting FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory after migrating webpack from 3 to 4
spinningcat
@spinningcat
hola again
how can i fix those error http://dpaste.com/11VVQ6X
Frank Stallone
@frankstallone
^ Can't see this. dpaste.com is blocked by our internal proxy.
spinningcat
@spinningcat
actually i solved the problem
my app is next.js app and you should create next.config.js and use
if (!isServer) {
config.node = {
fs: 'empty'
}
}
use fs:empty in webpack.config.js as well
Apollo packages are the reason of problem
choubani amir
@amirensit
Hello.
Any idea how to specify the rule.exclude part here ?
I get Invalid configuration object error for this configuration:
{
  test: /\.ts$/,
  enforce: 'pre',
  loaders: 'tslint-loader',
  exclude: [/node_modules/, new RegExp('reflect-metadata\\' + path.sep + 'Reflect\\.ts')]
}
Pierre-Marie Danieau
@Radiateurs
Hi all, I'm very new to webpack. I'm trying to upgrade an AngularJS using bower and grunt to (still)AngularJS with yarn and Webpack. I'm stuck at the CSS part. The project is loading, everything is ok BUT the style.