The use of webpack

Why use Webpack

1. The front end needs engineering

The characteristics of the assembly line: automation, modularization, performance optimization

Automation is the command line operation, a single command to achieve multiple functions, such as automatically listening for changes, automatically translate source code into a packaged code base

2. Documents are complex and varied

  1. The CSS/js/HTML/img/SVG files
  2. Css-less -sass- SCSS -stylus js-coffee – ES6 – typescript – Babel HTML – Jade – pug-SLIM Changes quickly

Webpack has the advantage of grouping files together as a module and packaging them as modules.

The CSS Loader keeps reporting errors

The configuration of Webpack can be called metaphysical, you can not find the cause of the error, I recommend you to do so, and suggest not to refer to other people’s configuration, it is better to refer to the official configuration example, so that you can also ask questions and find solutions on github issue when you encounter errors

  • You need to delete it firstnode_modulesAll the content
  • Then reinstall the dependenciesnpm install
  • If all else fails, you need to lookreadmeFor example, different versions of CSS-Loader load different loaders

About loader learning in Webpack, you can attend Ruan Yifeng’s article and learning demo

css loader github

Exotic curiosity-a solution looking

1. Global installation vs. local installation

Global installation: NPM install -g http-server. The installation directory is user/local/. Bin/and the installation is in the global directory

Local installation: It is installed in the local directory./node_modules/. Bin, which can be accessed using the file prefix

Let’s say you want to package your code with Webpack

Global: webpack main.js bundle.js Local:./node_modules/.bin/webpack main.js bundle.js

In addition, there is a shorthand command to execute the webpack command. The webpack command to execute the local directory can be changed to NPX webpack

2. Key directories in webpack

./ Current directory SRC source Folder of untranslated original code dist Distribution distribution code folder node_modules/vendors third-party code folder

3. Loader autoprefixer that automatically adds prefixes

Cannt find ‘module’ : NPM install Module. This works in most cases. If the error message changes, the solution works.