Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Momir Zmijanac
    @mzmijana
    Has anyone managed to get webpack-serve to reload on static file changes? For example, updating HTML? Thanks in advance :)
    webfer
    @webfer
    @webfer
    Hello, team
    I need your help regarding to create multi output structure directories into the /dist/
    In stackoverflow I describe my problem, can anybody take a look at this, please? https://stackoverflow.com/questions/52358617/how-i-can-create-multi-ouput-folders-into-the-dist-folder-webpack
    Any help will be appreciated
    Pagnito
    @Pagnito
    the webpack bundle includes the imported dependencies right?
    David Correa
    @DavJCorrea_twitter
    Hello! Is there any way to disable Live Reloading in Webpack4 + WebpackDevServer 3.1.5?
    Adzanny
    @zanisis
    guys i using webpack 3 i need build in production tu compress file css and javascript how to config
    const path = require('path');
    const webpack = require('webpack');
    const ProgressBarPlugin = require('progress-bar-webpack-plugin');
    const CopyWebpackPlugin = require('copy-webpack-plugin');
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    const Dotenv = require('dotenv-webpack');
    const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
    
    module.exports = {
        entry: path.resolve(__dirname, 'src'),
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle.js',
            publicPath: '/'
        },
        plugins: [
            new FriendlyErrorsWebpackPlugin(),
            new webpack.DefinePlugin({
                'process.env': {
                    NODE_ENV: JSON.stringify('production'),
                    WEBPACK: true
                }
            }),
            new webpack.optimize.UglifyJsPlugin({
                compressor: {
                    warnings: false
                }
            }),
            new CopyWebpackPlugin([
                {
                    from: path.resolve(__dirname, 'src', 'assets'),
                    to: path.resolve(__dirname, 'dist', 'assets')
                }
            ]),
            new ExtractTextPlugin('bundle.css'),
            new Dotenv({
                path: './.env',
            }),
            new ProgressBarPlugin()
        ],
        module: {
            loaders: [
                { 
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader'
                    },
                    include: path.resolve(__dirname, 'src')
                },{
                    test: /\.css$/,
                    exclude: /node_modules/,
                    use: ExtractTextPlugin.extract({
                        fallback: 'style-loader',
                        use: [
                            {
                                loader: 'css-loader',
                            },
                            {
                                loader: 'postcss-loader',
                                options: {
                                    plugins: function() {
                                        return [
                                            require('autoprefixer')
                                        ];
                                    }
                                }
                            }
                        ],
                    }),
                    include: path.resolve(__dirname, "src")
                },
                {
                    test: /\.scss/,
                    exclude: /node_modules/,
                    use: ExtractTextPlugin.extract({
                        fallback: 'style-loader',
                        use: [
                            'css-loader',
                            'sass-loader',
                            {
                                loader: 'postcss-loader',
                                options: {
                                    plugins: function() {
                        return [
                          require('autoprefixer')
                        ];
                      }
                                }
                            }
                        ],
                    }),
                    include: path.resolve(__dirname, 'src')
                },{
                    test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                    exclude: /node_modules/,
                    use: [{
                            loader: 'file-loader',
                            options: {
                                    name: '[name].[ext]',
                                    outputPath: 'fonts/'
                            }
                    }]
                }
            ]
        }
    };
    Tommy
    @simpert
    Hey, has anyone used webpack-dev-server with typescript configuration files. I use webpack.config.ts instead of .js files and webpack works correctly as expected but executing dev server with the same config files passed to webpack fails with many syntax errors.
    Lars Wettmann
    @lggwettmann
    Hey guys, my webpack with webpack-dev-server setup throws an error suddenly without me changing anything!? Can anyone take a look please? I have no clue how to solve this. https://stackoverflow.com/questions/52704476/why-does-webpack-throw-sudden-error-in-webpack-dev-server
    Jannik Keye
    @jannikkeye
    Helllo, I ahve the following problem: webpack-dev-server ona path like http://localhost:8080/auth/ok the bundle is requested from http://localhost:8080/auth/bundle.js which is of course incorrect. What am I missing here? I have historyApiFallback set to true.
    Krivega
    @Krivega
    Greetings! how can i get the value of a variable?
    parser.hooks.new.for('Worker').tap('NAME', expr => {
      const [depExpr, optsExpr] = expr.arguments;
      const dep = parser.evaluateExpression(depExpr);
      let depValue;
    
      if (dep.isIdentifier()) {
        depValue = dep.value // ?????
      }
    }
    douglassllc
    @douglassllc
    Tianyi
    @geniuszty
    I'm running a same webpack-dev-server script on Win10 and WinServer2008R2(both 64bit), node.exe on win10 uses 1M ram, but on 2008R2 it uses over 1G ram. Who can help?
    node -v is 8.9.4
    "webpack-dev-server": "^2.9.1"
    tzuriely
    @tzuriely
    Hi akk
    all
    Louis S.
    @si0ls
    Hi, I actually encounter a problem. I use Webpack and I decided to use relative dependencyes to avoid '../../../../' like paths in my imports.
    Webpack tells me that he can't find the module I defined as a dependency in my package.json, so can you tell me what I have to put in my Webpack config ?
    https://gist.github.com/si0ls/5e6af8e3ae55c802919a3f51f66e2688
    Jesper Westlund
    @wezzou1

    Hello, I'm trying to do splitcoding with webpack splitchunks, but I've got this error

    Uncaught (in promise) Error: Loading chunk 0 failed.

    Himanshu
    @himanshuc3
    Hi. I am Himanshu. I am new to webpack. I think it's an awesome tool and want to contribute. I know javascript/es6. What more should I know to contribute to core webpack?
    Christoph Werner
    @codepunkt
    Hello fellow webpackers!
    I need to show multiple errors when aborting/breaking a build from a plugin. When i push multiple Errors to compilation.errors, only the first one is shown. What can i do?
    Jaisa Ram
    @jbbpatel94
    @jbbpatel94
    webpack compression plugin configuration for prodction
    I mean recommended configuration
    Jason Young
    @rustjason
    Hi is there a way that I can indentify if the compilation is a incremental compiler or not?
    in the plugin
    Jawad Sefiani
    @jsefiani
    Hi everyone!
    Has anyone ran a react app in a docker container while developing?
    Chester Beard
    @Phinneas
    @jsefiani why would you want todo that?
    Nath
    @n8tz

    Hi there;

    sorry if i should ask this elsewhere,

    I'm writing a plugin that allow :

    • Inheriting one/multiple npm packages using webpack and this plugin like a big class ( by resolving require('$super') etc )
    • Do glob require on the folders within the inheritable root folder ( like require('App/stuff/*.js')
    • compile using the webpack conf of an inherited project (pretty cool)

    Even if it need optims, It work fine ( and it was working for some time where i extracted it )

    https://github.com/n8tz/webpack-inherit

    But a have a problem with hot reload:
    To require globs; i create a virtual file which will require & map the glob in es6
    How can i force Webpack to update this index file first when one the glob query files are deleted ?

    here the samples https://github.com/n8tz/webpack-inherit-samples
    here the glob query : https://github.com/n8tz/webpack-inherit-samples/blob/master/simple-inherit/childProject/App/App.js

    ( hoping someone know how to do that ^^' :) )
    Nath
    @n8tz
    @jsefiani yeah ; as i'm on windows & i'm tired of dealing with microsoft compiler / various back techs -> all my dev env are on dockers now
    you just need to bind the ports & get the good docker-compose
    Nath
    @n8tz
    ok i replaced the glob with require.context ; now https://github.com/n8tz/webpack-inherit is fully working :)
    Feel free to test / feedback / make contribs !
    barak igal
    @barak007
    Hi, does anyone know why the inputFileSystem doesn't reflect changes from watch when file is changed?
    MineX
    @Aladingding
    menu.saveimg.savepath20190219111622.jpg
    The style is confusing when I expanded the two menus in https://webpack.js.org/api/
    MineX
    @Aladingding
    @barak007 should i at anybody?
    Rhys van der Waerden
    @rhys-vdw
    there is a probably a repo for that website
    You should open an issue
    MineX
    @Aladingding
    @rhys-vdw thank you,man!
    Sunwoo
    @orange4glace
    Hi guys. I'm trying to fix some code in webpack-dev-server but I can't find which code line actually starts compile (compile.run(...)). I have tried to search both webpack-dev-server and webpack-dev-middleware but still not getting it. Could anybody tell me plz where the code is? :|
    Ross Rawlins
    @Ross-Rawlins
    hey all can anyone explain a good way to get all my HTML pages to compile without having to sepcify a opath for each one?
    I have 50 plus pages and growing and I dont want to have to define each one
    hv7214
    @hv7214
    Hi everyone, I am Harshit. I am newbie in webpack. I have given a thorough read to docs. I know Node.js, have done some projects on it. Can anyone guide me, how to contribute to webpack. Some concepts are yet to be consolidated. And can anyone share good resources to understand webpack better.
    Michaell007
    @Michaell007

    Hello,

    I'm a beginner,
    I use webpack 4 on a project view, the command "npm run dev" works normally but when I type the production command "npm run build" it displays an error "Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead. "
    help me please

    webpack.config.js:
    var path = require('path')
    var webpack = require('webpack')
    const VueLoaderPlugin = require('vue-loader/lib/plugin')

    module.exports = {
    mode: 'development',
    entry: './src/main.js',
    output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
    },
    module: {
    rules: [
    {
    test: /.css$/,
    use: [
    'vue-style-loader',
    'css-loader'
    ],
    },
    {
    test: /.scss$/,
    use: [
    'vue-style-loader',
    'css-loader',
    'sass-loader'
    ],
    },
    {
    test: /.sass$/,
    use: [
    'vue-style-loader',
    'css-loader',
    'sass-loader?indentedSyntax'
    ],
    },
    {
    test: /.vue$/,
    loader: 'vue-loader',
    options: {
    loaders: {
    // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
    // the "scss" and "sass" values for the lang attribute to the right configs here.
    // other preprocessors should work out of the box, no loader config like this necessary.
    'scss': [
    'vue-style-loader',
    'css-loader',
    'sass-loader'
    ],
    'sass': [
    'vue-style-loader',
    'css-loader',
    'sass-loader?indentedSyntax'
    ]
    }
    // other vue-loader options go here
    }
    },
    {
    test: /.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/
    },
    {
    test: /.(png|jpg|gif|svg)$/,
    loader: 'file-loader',
    options: {
    name: '[name].[ext]?[hash]'
    }
    },
    { test: /.(eot|woff|woff2|svg|ttf)([\?]?.)$/, loader: "file-loader" },
    ]
    },
    resolve: {
    alias: {
    'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['
    ', '.js', '.vue', '.json']
    },
    devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
    },
    performance: {
    hints: false
    },
    plugins: [
    new VueLoaderPlugin(),
    ],
    devtool: '#eval-source-map'
    }

    if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map'
    // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
    'process.env': {
    NODE_ENV: '"production"'
    }
    }),
    new webpack.optimize.UglifyJsPlugin({
    sourceMap: true,
    compress: {
    warnings: false
    }
    }),
    new webpack.LoaderOptionsPlugin({
    minimize: true
    })
    ])

    }

    Wise
    @cratter49

    Hello,
    I've been currently struggling with using a custom package I have made in a React project of mine. The custom package uses babel and webpack in order to transpile, bundle, and minify my code which outputs in a directories like so:

    dist/
       js/
       css/
       map/
       img/

    The value I'm using for main in package.json is dist/js/main.js which is the output file that results from the root index.js entry that exports all of my modules. The runtime error I've been receiving from the main project is Uncaught Invariant Violation which leads me to believe that the custom package is using the wrong output file from webpack. Does anyone have any idea what output file I should be using for my custom module's main field in package.json to get this all working?

    Shanmugapriya
    @pvipriya
    hi
    I am new to webpack. I have a doubt. I do have situation where i dont want the build to be run when we click button from 'Xcode' IDE not to npm run build. how can i achieve this?
    vitaly menchikovsky
    @vitaly87_twitter
    hi all I am trying to build with react but getting an error on build when using jsx
    image.png
    Anjul
    @anjultramp_twitter
    Hi All I will be needing some assitance.
    Maweypeyyu
    @Maweypeyyu
    Is this the chat for contributors?