Front-end engineering

1. Modularity

1.1 Server modular specifications

CommonJS

  • Modules are divided into single file modules and packages
  • Module member exports: module.exports and exports
  • Module member import: require (‘ module identifier ‘)

Ex. :

a.js

let a = 10
let b = 20
module.exports = {
    a,b
}
Copy the code

b.js

const a = require('./a.js')
console.log(a)
Copy the code

1.2 ES6 Modularization

ES Module treats a file as a Module, and each Module has its own independent scope. How do you link each Module together?

The core point is the import and export of modules.

1.2.1 the module exports

Let’s transform the above code into ES6 format

let a = 10
let b = 20
export default {
    a,b
}
Copy the code

b.js

import a from './a.js'
console.log(a)
Copy the code

Pay attention to

  • The browser does not support the IMPORT of ES6 by default. Use NPM init -y to initialize the import
  • Add “type”: “module” to package.json
1.2.2 Import and Export on Demand (Export)

a.js

export let a = 10
Copy the code

b.js

import {a} from './a.js'
console.log(a)
Copy the code
1.2.3 Directly execute the module code

a.js

for (let i = 0; i < 5; i++) {
    console.log(i)
}
Copy the code

b.js

import './a.js'
Copy the code
1. To summarize
  • Only when export Default is used, variable names in B. js can be arbitrarily named
  • When exporting directly using export, the variables in B. js must be the same as those in a.js and need to add {}.
  • To use it in a browser, you need to set type=”module” to the script tag.

Second, the webpack

2.1 Installing and Configuring the WebPack

2.1.1 installation webpack
  • npm install webpack webpack-cli --save-dev
  • Can be abbreviated as:npm install webpack webpack-cli -D
  • Dev represents the development environment. Save represents the production environment
2.1.2 configuration webpack

Create a webpack.config.js file in the current directory

module.exports={
    mode:'development' // Development mode
    mode:'production' // Production mode
}
Copy the code

Then write to scripts in packPage. json

"dev":"webpack"
Copy the code

Finally, run the command in the terminal

npm run dev
Copy the code

2.2 Package export and export documents

By default, index.js is packaged in the SRC directory

Entrance to the file

It is the first file to be accessed when a project or program is requested, and this file is processed by the corresponding module

In the current project, index.html is the entry file because that’s what we’re requesting

But for Webpack, the entry file is index.js, because index.js introduces modules needed by other programs and writes the corresponding logic code

The export file

The directory and name of the packaged file

Webpack has some default configurations

webpack.config.js

const path = require('path')
module.exports = {
    // mode:'development'
    mode: 'production'.entry: path.resolve(__dirname, 'src/app.js'), // Import file
    output: {
        path: path.resolve(__dirname, 'dist'), // Export file
        filename: 'bundle.js' // File name after packing}}Copy the code
  • It is recommended that the output file name be bundle.js, and note that you change the import file in index.html to bundle.js

2.3 Automatic Packaging

Use the webpack – dev server. –

Webpack-dev-server gives you a simple Web server with live reloading.

Installation:

npm install --save-dev webpack-dev-server
Copy the code

Modify the startup command in package.json

"dev":"webpack serve"
Copy the code

Run after

npm run dev
Copy the code

Note:

  • Using webpack-dev-serve to pack the address islocalhost:8080
  • When packaged, Webpack-dev-serve is not written to any output files but stored in memory

2.4 Generating a preview page

Current problems: localhost:8080 corresponds to the website and directory, and index.html is in the SRC directory, which is difficult to access

Solution: Copy index.html from SRC to the root directory so that when localhost:8080 is accessed, the index.html will be rendered by default

However, if you need to manually copy index. HTML after modifying it, you can use the plugin:

HtmlWebpackPlugin

Installation:

npm install --save-dev html-webpack-plugin
Copy the code

Then we need to introduce it in webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
Copy the code

At the same time we need to install

npm i loader-utils -D
Copy the code

Configuration HtmlWebpackPlugin

const htmlPlugins = new HtmlWebpackPlugin({
    template:'./src/index.html'.// The file to copy
    filename:'index.html'           // Copy to where
})

plugins: [htmlPlugins]
Copy the code

Then retrograde NPM run dev

But index. HTML is not in the root directory because it is still created in memory

2.5 summarize

webpack-dev-serve:

  • A service is enabled at localhost:8080, which by default corresponds to the root directory of the project
  • Changes to the code will automatically repackage and generate a bundle.js file in memory without overwriting the bundle.js file in the dist directory
  • The path to access bundle.js is localhost:8080/bundle.js

html-webpacl-plugin:

  • Automatically copy the HTML files in the specified path to the specified directory (such as the root directory) according to the configuration.
  • Copy is made every time you run the package command
  • It also exists in memory

2.6 loader

By default, webpack can only package.js module files. Other static files, such as.css and images, cannot be processed by default. If the corresponding loader is not loaded, an error will be reported

Webpack supports preprocessing files using the Loader. You can build any static resource, including JavaScript.

2.6.1 Processing CSS Files

Install loader

npm install --save-dev css-loader style-loader
Copy the code

Configuration webpack. Config. Js

module: {rules:[
            {test:/\.css$/,use:['style-loader'.'css-loader']]}}Copy the code

Loader calls go back to front

2.6.2 Processing LESS Files

The installation

npm install less-loader less -D
Copy the code

configuration

{test:/\.less$/,use:['style-loader'.'css-loader'.'less-loader']}
Copy the code

Then repack

2.6.3 Processing pictures and text

The installation

npm i file-loader url-loader -D
Copy the code

configuration

{
   test: /\.png$/,
   use: [{
      loader: 'url-loader'.// Use url-loader to process packaged images
       options: {limit:10750}}}]Copy the code
  • Images that are smaller than the limit value are imported and packaged as base64-bit codes
  • Instead of being packaged, it is referenced as a resource
2.6.4 Processing advanced JS syntax

The installation

npm install -D babel-loader @babel/core @babel/preset-env
Copy the code

Add the following rules to webpack.config.js

            {
                test: /\.m? js$/,
                exclude: /(node_modules|bower_components)/.// exclude effects from node_modules
                use: {
                    loader: 'babel-loader'.options: {
                        presets: ['@babel/preset-env'].// Processing mode}}}Copy the code

Write to index.js

class Person{
    static age = 10
}
console.log(Person.age)
Copy the code

When finished we execute the package command NPM run dev

Later we found that the error was reported because the plugin for the Babel syntax was not installed

Installation:

npm i -D @babel/plugin-proposal-class-properties
Copy the code

Then add the configuration to the option property of the rule above

plugins: ['@babel/plugin-proposal-class-properties'] // New configuration
Copy the code