What is webpack and why use it?

This is webpack1.0+, if you're using 2.0+, please come here.

Webpack case: 1 watercress aggressively movie

Well-configured WEBPACK2 scaffolding: poke here

The text starts with the following ........

1. What is Webpack

Webpack can be seen as a module Packer : What it does is analyze your project structure, find JavaScript modules, and other language extensions (Scss,typescript, etc.) that can't be run directly by browsers. and package it in the appropriate format for use by your browser.

2. Why use Webpack

Many of today's Web pages can be seen as feature-rich applications that have complex JavaScript code and a whole bunch of dependent packages. In order to simplify the complexity of development, the front-end community has emerged a lot of good practical methods

A: Modularity allows us to refine complex programs into small files;

B: Similar to Typescript's development language based on javascript: it allows us to implement features that are not directly available in the current version of JavaScript, and can then be loaded into JavaScript files to make the browser recognizable;

CSS preprocessor such as c:scss,less

.........

These improvements do greatly improve our development efficiency, but the files developed by them often require additional processing to allow the browser to recognize, and manual processing is very locked, which provides the need for the Webpack class of tools.

3. What are the characteristics of webpack and grunt and gulp?

In fact, Webpack and the other two do not have much comparability, gulp/grunt is a tool to optimize the front-end development process, and Webpack is a modular solution, but webpack the advantages of Webpack can replace gulp/ Tools for the Grunt class.

Grunt and gulp work in a configuration file that indicates specific steps for tasks such as compiling, combining, and compressing certain files, which can then be done automatically for you.

The way Webpack works is to treat your project as a whole, With a given master file (for example: Index.js), Webpack will start to find all dependent files for your project from this file, use loaders to process them, and finally package it as a browser-aware JavaScript file.

Advantages: modularity

Everything in Webpack seems to be a module! That's what it's all about, including your JavaScript code, CSS and fonts, pictures, and so on, which can be handled as modules only through the right loaders.

1. CSS

Webpack provides two tools for working with style sheets, css-loader and style-loader , unlike the tasks they handle, css-loader allows you to use similar @import and implemented functions to add url(...) require() style-loader all the calculated styles to the page, The combination of the two allows you to embed the stylesheet into the Webpack-packaged JS file.

Need to be installed separately:npm install --save-dev style-loader css-loader

2. CSS Modules

Over the past few years, JavaScript has evolved very quickly through a number of new language features, better tools, and better practices, such as modularity. The module enables developers to transform complex code into small, clean, well-defined units, and based on optimization tools, dependency management and load management can be done automatically.
However, the other part of the front-end, CSS development is relatively slow, most of the style sheet is still huge and full of global class name, which makes maintenance and modification is very difficult and complex.

Recently, a technology called CSS modules is intended to bring the modular idea of JS into the CSS, through the CSS module, all the class name, the animation name by default only action on the current module. Webpack from the beginning of the CSS to support the modularization, in the CSS loader configuration, all you need to do is to "modules" to pass all the necessary places, and then you can directly pass the CSS class name into the code of the component, and this is only valid for the current component, You do not have to worry about having the same class name in different modules that can cause problems. The specific code is as follows

So the same class names don't pollute each other.

3. CSS Pre-compilation

Sass and less are extensions to native CSS that allow you to write CSS using features like variables, nesting, mixins, inheritance, etc. that do not exist in CSS, CSS preprocessor can translate these special types of statements into browser-readable CSS statements,
You may now be familiar with the webpack in the use of the relevant loaders configuration can be used, the following is a common CSS processing loaders

A:less-loader

B:sass-loader

C:stylus-loader

There is also a CSS processing platform-POSTCSS, allowing you to use CSS in advance more features, such as how to use POSTCSS, we use POSTCSS to add CSS code to adapt to different browser CSS prefix.

First install Postcss-loader and autoprefixer (automatically add prefix plugin)

install --save-dev postcss-loader autoprefixer

并在webpack配置文件中进行设置，只需要新建一个postcss关键字，并在里面申明依赖的插件，如下，现在你写的css会自动根据Can i use里的数据添加不同前缀了。

Second, Webpack-pulgins

Plug-ins (Plugins) are used to extend the functionality of Webpack, which take effect throughout the build process and perform related tasks.
Loaders and plugins are often confused, but they are really different things, so to say, loaders is used to process the source files during the package build process (jsx,scss,less. ), one process at a time, the plug-in does not directly manipulate a single file, it directly affects the entire build process.

Webpack has a lot of built-in plugins, and there are a lot of third-party plugins that allow us to do a richer function.

1, how to use the plugin?

To use a plugin, we need to install it via NPM, and then we have to add an instance of the plugin in the Plugins keyword section of the Webpack configuration (plugins is an array), and we add a plugin that implements the copyright notice. such as the Htmlwebpackpugin plugin,

The role of the plugin is based on a simple template, to help you generate the final HTML5 file, this file automatically refers to your packaged JS file. Each compilation inserts a different hash value in the file name.

Installation

NPM Install--save-dev Html-webpack-pugin

Reproduced

What is webpack and why use it?