Webpack

Webpack loaders, plugins.

11 flashcards · Programming Languages · by lakesare

1. What does file-loader do?

   import url from '../hi.png'; // => emits file.png as file in the output directory and returns the public url // => '/public-path/45869e351f.png'

2. What is the difference between url-loader and file-loader?

   The url-loader works like the file-loader, but can return a Data URL if the file is smaller than some limit.

3. What does style-loader do?

   Adds CSS to the DOM by injecting a <style> tag

4. What does css-loader do?

   In the css file, it sees background: url('../pics/hi.png') and interprets it as import a from '../pics/hi.png'; then it uses either url-loader or file-loader (based on your webpack.config) to import that asset.

5. What does extract-text-webpack-plugin do?

   It moves all the required *.css modules into a separate CSS file.

6. Name 3 ways to use loaders.

   1. via webpack.config.js: module: { rules: [{ test: /\.css$/, use: ['style-loader'] }] } 2. via imports: import css from 'style-loader!../hi.css' 3. via cli: webpack --module-bind 'css=style-loader'

7. style-loader VS css-loader?

   They have nothing in common. style-loader adds css to <style> tag. css-loader could be named url(/file)-loader-for-css, it takes background: url('../pics/hi.png') and uses either url-loader or file-loader to import that asset.

8. Webpack loaders VS plugins?

   Loaders: Loaders work at the individual file level during or before the bundle is generated. Plugins: Plugins work at bundle or chunk level and usually work at the end of the bundle generation process. Plugins can also modify how the bundles themselves are created. Plugins have more powerful control than loaders.

9. Where will lodash library be located after the build? webpack.config.js var path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'build.js' } }; src/index.js import _ from 'lodash'; import numRef from './ref.json'; export function numToWord(num) { return _.reduce(numRef, (accum, ref) => { return ref.num === num ? ref.word : accum; }, ''); } export function wordToNum(word) { return _.reduce(numRef, (accum, ref) => { return…

   Inlined in the build.js. Now, if you run webpack, you will find that a largish bundle is created. If you inspect the file, you'll see that lodash has been bundled along with your code. In this case, we'd prefer to treat lodash as a peerDependency. Meaning that the consumer should already have lodash installed. Hence you would want to give up control of this external library to the consumer of your library.

10. How to make webpack not bundle lodash into build.js, and just expect a consuming library to have it installed? src/index.js import _ from 'lodash'; import numRef from './ref.json'; export function numToWord(num) { return _.reduce(numRef, (accum, ref) => { return ref.num === num ? ref.word : accum; }, ''); } export function wordToNum(word) { return _.reduce(numRef, (accum, ref) => { return ref.word === word && word.toLowerCase() ? ref.num : accum; }, -1); }

11. When we write import hi from "react-tippy" and react-tippy/index.js doesn't exist - what will hi resolve to?

    It will resolve to the "main" field in the package.json of the module.