Web pack Engineering


What is webback

Webback can be regarded as a module packer. Its function is to package all the dependencies (such as. Jade,. Less,. PNG, etc.) into the so-called front-end static resources (such as JS, CSS, PNG, etc.) through a portal. (module module = > webpack = > static resource)

Why use it and what it can do

There are also many packaging tools before webpack, such as grunt, gulp… But these packaging tools have a single function and can only complete specific tasks. But a web front-end project is complex. There may be many business codes for a webapp. If you want to load on demand, the first screen loading time will be reduced, and you need to integrate some third-party libraries
In order to solve these problems, webback provides the following functions:

  • Code conversion: for example, ES6 to Es5, less, sass to CSS
  • File Optimization: such as compressing code volume
  • Code segmentation: for example, separation of public modules and lazy loading of routes
  • Module merging: for example, merging multiple modules into one module according to functions
  • Auto refresh: Hot update
  • Code verification: check whether the code conforms to the specification
  • Automatic publishing

What are the advantages of using webpack

1. Everything is a module:In the world of Web pack, any resource other than JavaScript can be referenced as a module.
2. Load on demand:The key to the optimization of webapp is the code volume. When the application volume increases, it is necessary to load the code on demand, which is also the root cause of webback.
3. Customizable:No tool can solve all the problems. It is the most feasible to provide a solution. Webback is built based on the concept of customization. Through plug-in system and configuration file, the customization requirements of large projects can be realized.

After learning a general situation of webback, how can we use it?

Basic configuration of webpack (how to write)

You should have installed node before

1. Install local webpack

npm install webpack webpack-cli -g
npm install webpack-dev-server -g

Node_modules, package-lock.json file will be generated

2. Use of webback

// src => name.js
module.exports = 'my name is lzzhy'

// src => index.js
let str = require('./name.js')

In this way, it can be run in node, as shown in the following figure:
But we need to run the output on the browser, that is, get the output in dist output, so we need to configure the file.

3. Use of configuration file

Create webpack.config.js in the project directory as follows. Running NPX webpack will generate the corresponding dist according to the configuration file:

//Webpack is a way of writing nodes written by nodes
var webpack = require('webpack')
let path = require('path')
module.export = {
    Mode: 'development', // there are two default modes of process development
    Entry: '. / SRC / ndex. JS', // entry
    output: {
        Filename: 'bundle. JS', // the packaged filename
        Path: path.resolve ('dirname, 'dist') // the path must be an absolute path, and 'dirname' refers to the path
    module: {
        loaders: [
                test: /\.js[x]?$/,
                exclude: /node_modules/,
                Loader: 'Babel loader', // process. JS or. JSX file loader
                query: {
                    presets: ['env']
                test: /\.css$/,
                Loader: "style loader! CSS loader" // process. CSS file loader
                test: /\.(png|jpg)$/,
                Loader: 'URL loader? Limit = 8192' // process image loader

Webpack can only deal with JS modules. If you want to deal with other types of files (such as CSS), you need to use loader for conversion, which refers to the webpack loader that replaces the code at the other end with a piece of code.

With such a simple configuration (of course, the configuration of weback is more than that), the module is transformed into a static resource with the weback packer.

Please refer to my blog for more details

Recommended Today

[reading notes] calculation advertising (Part 3)

By logm This article was originally published at https://segmentfault.com/u/logm/articles and is not allowed to be reproduced~ If the mathematical formula in the article cannot be displayed correctly, please refer to: Tips for displaying the mathematical formula correctly This article isComputing advertising (Second Edition)Reading notes. This part introduces the key technology of online advertising, which is […]