This is the first day of my participation in the August Challenge. For details, see:August is more challenging

Webpack-01

What are some common static resources that are referenced on a web page?

  • JS
  • .js.jsx.ts (TypeScript)
  • CSS
  • .css .less .sass .scss
  • Images
  • .jpg .png .gif .bmp .svg
  • Fonts files
  • .svg .ttf .eot .woff .woff2
  • Template file
  • .ejs.jade. Vue (this is the way to define components in Webpack, recommended)

What’s the problem with introducing more static resources into web pages?

  1. A front-end project may have multiple.js, multiple.css, multiple static images, and multiple other front-end resources. When multiple.js are loaded on a page, it slows down the entire page because we have to make a lot of secondary requests.
  2. Dealing with complex dependencies, such as js resources that depend on each other.

What is a webpack?

  • Webpack is a front-end resource loading/packaging tool (project build tool). It performs a static analysis based on the dependencies of modules, and then generates the corresponding static resources for those modules according to the specified rules.
  • Webpack provides friendly modular support, and powerful functions such as resource merging, packaging, compression, confusion, handling JS compatibility issues, performance optimization and so on, so that programmers can focus on specific function implementation, improving development efficiency and project maintainability.
  • Webpack website

Why use WebPack

  1. A front-end project may have multiple.js, multiple.css, multiple static images, and multiple other front-end resources. When multiple.js are loaded on a page, it slows down the entire page because we have to make a lot of secondary requests.
  2. Dealing with complex dependencies, such as js resources that depend on each other.

Two ways to install WebPack

  1. runnpm i webpack -gInstall WebPack globally so you can use Webpack commands globally
  2. Run in the project root directorynpm i webpack --save-devInstall into project dependencies
  3. View webpack information NPM info webpack webpack -v

Initial use of WebPack packaging to build a list interlacing case

  1. runnpm initInitialize the project and use NPM to manage the dependencies in the project
  2. Create a basic directory structure for the project
  3. usecnpm i jquery --saveInstall the jquery class library
  4. createmain.jsAnd write the code logic for the lines to change color:
    import $ from 'jquery'
    // Set the background color for even rows, starting from 0, which is even
    $('#list li:even').css('backgroundColor'.'lightblue');
    // Set the background color for odd rows
    $('#list li:odd').css('backgroundColor'.'pink');
    
Copy the code

  1. Referencing main.js directly on the page will cause an error, because the browser does not recognize the advanced JS syntax such as import, so you need to use WebPack to handle it. Webpack will convert the advanced JS syntax to a lower-level browser syntax by default.

  2. Run the Webpack entry file path -o output file path to process main.js: webpack./ SRC /js/main.js -o./dist/bundle.js -o === –output

By default, webPack4 does not need to create webpack.config.js to configure the entry and exit of the package. By default, the webpack entry is./ SRC /index.js and the exit is./dist/main.js. Webpack is packaged by default (the latest version does not need to import a configuration file)Copy the code

Use webPack’s configuration file to simplify packaging time commands

  1. Create in the project root directorywebpack.config.js
  2. Since webpack needs to specify the path of the entry file and the output file when running the webpack command, we need towebpack.config.jsTo configure these two paths:
    // Import the module of the processing path
    var path = require('path');
​
    // Export a configuration object. When WebPack starts, it will look for webpack.config.js by default and read the exported configuration object from this file for packaging
    module.exports = {
        entry: path.resolve(__dirname, 'src/js/main.js'), // The project entry file
        / / entrance
        // entry:['./src/js/index.js','./src/js/one.js'],
        //entry: {
            //ind: './src/js/index.js',
            //on: './src/js/one.js'
        / /},
        output: { // Configure the output options
            path: path.resolve(__dirname, 'dist'), // Configure the output path
            filename: 'bundle.js' // Configure the output file name
        },
        / / export more
        //output: {
         // filename: 'js/webpack02.[name].js',
         // path: path.resolve(__dirname, 'dist')
        / /},
    }
Copy the code