This is the 7th day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

(I) Initial experience of Webpackage 5

1, the preface

Before using loader and plugins, webpack must be configured in the webpack.config.js file.

** Loader usage steps :*1, download 2, configure loader

Steps to use plugins: 1, download 2, introduce 3, use

2. Webpack packs HTML files

(1) Install the plug-in

npm i html-webpack-plugin -D
Copy the code

(2) Then introduce:

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

(3) Template configuration

plugins: [
    new HtmlWebpackPlugin({
        template: 'index.html'})]Copy the code

By default, the new HtmlWebpackPlugin() creates an empty HTML file and automatically imports all the resources that are packaged as output. If you need a structured HTML file with parameters, you need to define an HTML template in advance, and the plugin automatically copies it

3. Webpack packs image resources

(1) Install the plug-in

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

(2) the loader configuration

 // Process the image
       {
         test: /\.(jpg|png|gif)$/,
         loader: 'url-loader'.options: {
           // Images smaller than 8KB will be base64 processed
           limit: 8 * 1024}}Copy the code

Note: images in HTML cannot be processed by default. If you want to fix this problem, you need to install htML-loader

npm i html-loader -D
Copy the code

(3) the configuration

{
         test: /\.html$/.// Process images in HTML files to be recognized by urL-loader
         loader: 'html-loader'
 }
Copy the code

[Object Module] [object Module]

The reason is: URL-loader uses ES6 modular parsing by default, while HTML-Laoder uses common.js modular parsing to import images.

Solution: Add a familiarity under urL-loader to turn off ES6 modularity.

esModule: false
Copy the code

To summarize: htMl-loader is responsible for importing images from HTML files and handing them to URL-loader.

After the image is base64 processed:

Advantages: reduce the number of requests, reduce the server pressure, disadvantages: the size of the picture will change, file request read more slowly

4. Processing of other resources

Package all other resources, except HTML, JS, and CSS resources, through file-loader

For example, there are three default import methods for fonts downloaded through iconFont.

1, Unicode, **2, font class, 3, Symbol

Overall performance: Font Class is better.

// Package other resources, except HTML, JS, and CSS resources
       {
           exclude: /\.(css|js|less|html)$/,
           loader: 'file-loader'.options: {
             name: '[hash:10].[ext]'}}Copy the code

5, devServer

Open server devServer, used for automation (automatic compilation, automatic open browser, automatic refresh browser

Features: Packages are compiled in memory, with no output

Start the devServer directive: webpack-dev-server

1. Install the plug-in

npm i webpack-dev-server -D
Copy the code

2. Property configuration

/// start the devServer directive: webpack-dev-server
   devServer: {
     // Run the project directory
     contentBase: resolve(__dirname, 'build'),
     // Start compression
     compress: true./ / the port number
     port: 3000.// Automatically open the browser
     open: true
   }
Copy the code

3. Configuration of development environment:

Webpack prints out the packaging results.

NPX webpack-dev-server only compiles packages in memory, with no output

4, webpack.config.js detailed configuration reference

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { resolve } = require('path')
module.exports = {
   entry: './src/index.js'.output: {
     filename: 'js/bundle.js'.path: resolve(__dirname, 'build')},module: {
     rules: [
     // Process CSS style resources
      {
         test:/\.(css|less)$/,
         use: [
           'style-loader'.'css-loader'.'less-loader']},// Process image resources
      {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader'.options: {
          // Images smaller than 8KB will be base64 processed
          limit: 8 * 1024.// Disable THE ES6 modularization of url-loader and use commonJS parsing
          esModule: false.// Rename the image
          // [hash:10] remove the first 10 bits of the hash of the image
          // [ext] removes the original extension of the file
          name: '[hash:10].[ext]'.outputPath: 'imgs'}},// Process images in HTML
      {
        test: /\.html$/.// Process images in HTML files to be recognized by urL-loader
        loader: 'html-loader'
      },
      // Process other resources
      {
        exclude: /\.(html|js|css|less|jpg|png|gif)$/,
        loader: 'file-loader'.options: {
          name: '[hash:10].[ext]'.outputPath: 'media'}}},],plugins: [
     new HtmlWebpackPlugin({
       template: './src/index.html'})].mode: "development".// Enable devServer, with automation (automatically compile, automatically open browser, automatically refresh browser)
   // Features: Packages are compiled in memory, with no output
  // Start devServer directive: webpack-dev-server
   devServer: {
     // Run the project directory
     contentBase: resolve(__dirname, 'build'),
     // Start compression
     compress: true./ / the port number
     port: 3000.// Automatically open the browser
     open: true}};Copy the code

6, download the source code

Webpack5 learning source code