40 Matching Annotations
  1. Jul 2020
  2. Feb 2020
  3. Dec 2019
    1. If none of these commands identified the duplication, try analyzing your bundle for multiple instances of @material-ui/styles. You can just check your bundle source, or use a tool like source-map-explorer or webpack-bundle-analyzer.
    1. This works, but… it's super hacky. I don't really understand the intent of the abstractions in webpack-chain, and looking through the code of existing modules makes me think every module is currently inventing its own hacks to work around some fundamental limitations here.
    1. Webpack supports the ability to run multiple builds by exporting an array of configurations instead of a single configuration.
    2. Various test runners support using compiled webpack code to drive tests, but may be difficult to integrate with webpack, and Neutrino helps alleviate this
    1. To make some of this possible, we had to create our webpack configuration API, called webpack-chain. As you may know, webpack exposes a low-level configuration format, but this format isn't well-suited for merging configuration deterministically across middleware, or even across many projects. With webpack-chain, we expose a chainable or fluent API for aggregating a webpack configuration which is much more deterministic.
  4. Nov 2019
    1. Whereas Webpack bundles all our JavaScript source code files into one bundle (including custom configured build steps), Babel enables us to use recent JavaScript features that are not supported by many browsers yet.
  5. Oct 2019
    1. When you do import '../src/application.css', you're telling webpack include application.css in the build. This does not mean it's going to be compiled into your javascript, only that webpack now knows that you want to compile this file. How that file compilation is handled is depending on how your loaders (css-loader, sass-loader, file-loader, etc.. ) are configured.
  6. Sep 2019
  7. Nov 2018
  8. Oct 2018
  9. Jun 2017
    1. npm install eslint-loader --save-dev

      Note, if you haven't already, you must install eslint,and babel-eslint alongside eslint-loader. Otherwise, you'll get an error from your npm start script.

      npm install eslint babel-eslint eslint-loader

    1. To get it to work, you have to install it first through npm install nodemon --save-dev. After that, you can make it watch webpack config and restart WDS on change. Here's the script if you want to give it a go:

      Force your dev environment to watch updates to your webpack config!

  10. May 2017
    1. npm install --save-dev webpack webpack-dev-server react-hot-loader

      You may run into problems if you don't install webpack-dev-server globally. If you must, as you will have to on many Linux systems, the command is as follows:

      sudo npm install --save-dev webpack-dev-server -g
      
    2. var webpack = require('webpack');

      Note you should also add:

      const path = require('path'); 
      

      See following comments for rationale.

    3. path: 'dist'

      Again, this will throw errors. The solution utilises 'path' (see comment above). The code should look like this in new versions of webpack:

      path: path.resolve(__dirname, 'dist')
      
    4. loader: 'react-hot!babel'

      In newer versions of Webpack, this is disallowed. It should be:

      loader: 'react-hot-loader!babel-loader'
      
  11. Apr 2017
  12. Mar 2017
    1. webpack ./entry.js bundle.js --module-bind 'css=style!css'

      This approach has been deprecated. Here is how it works now:

      webpack ./entry.js bundle.js --module-bind 'css=style-loader!css-loader'

    1. To partition your code into library and application bundles, you will need to create two Webpack configurations, one that creates the library bundle(s) and another that creates the application bundle(s) that use code from the libraries.

      为了分离类库和应用代码,你不得不提供两个配置文件,一个用于类库的bundle;另一个用于应用代码的bundle

  13. Feb 2016
    1. but also it is extremely easy to transition from browserify to webpack when needed.
    2. If however, you’re predominantly dependent on the NPM ecosystem and you want a tool with a small and very well designed API and takes minimal configuration, you should go for Browserify

      We don't particularly need Node compatibility at the moment, but "small and well designed API" is appealing.

      On the other hand, not having to hunt around and collect all the tools together for packaging code for the browser is also appealing.

    1. This is probably the best high level comparison of the approach of Webpack and Browserify that I've seen.

  14. Jan 2016
    1. The greatest advantage Webpack has over these tools is Hot Module Replacement (HMR). In short, it provides a way to patch the browser state without a full refresh. We'll discuss it in more detail when we go through the React setup