Packager

effect ：1. Pack the files together , Easy to develop , Reduce requests 2. Module loading

Official documents ：https://webpack.docschina.org/

Webpach It can only be used for single page in the background

One ：Webpach Concept

Concept ：

Essentially ,webpack It's a modern JavaScript Application's Static module packager (module bundler). When webpack When processing an application , It builds one recursively Dependency graph (dependency graph), It contains each module required by the application , All these modules are then packaged into one or more bundle.

1. from webpack v4.0.0 Start , You don't need to introduce a configuration file , But use the naming rules it specifies

2. You can also configure files

   entry and output At the core of , You have to configure 
    entrance (entry)
    Output (output)
   loader
    plug-in unit (plugins)
   

Two ： Basic steps

• Create a new folder webpack.config.js file

  const path = require('path');
  // Configure inlet and outlet 
  module.exports = {
        
      entry: './src/main.js',
      output: {
        
          path: path.resolve(__dirname, 'dist'),
          filename: 'my-first-webpack.bundle.js'
        }
    };
  
  

• Build a src Folder （ Source code directory ）

• dist Folder , Store packaged files js, Write in this html Then import your packaged file

• npm init    The initialization file is node
  npm i webpack webpack-cli    download webpack plug-in unit 
  npm i webpack webpack-cli -w   Monitor changes in source code 
  

• start-up webpack

  npx webpack
  npx webpack -w  Start of monitoring 
  

3、 ... and ： load css

Because direct import The default import is js file , To import css You need to pass load To help

• download css Plug in for

  npm install --save-dev style-loader css-loader
  

• Then finish it css After importing

  import '../css/main.css';
  import css from '../css/main.css';
  

• webpack.config.js The content of

   module.exports = {
        
     entry: './src/index.js',  // entrance 
     output: {
                         // Output 
       filename: 'bundle.js',
       path: path.resolve(__dirname, 'dist'),
     },
     module: {
        
       rules: [
         {
        
           test: /\.css$/i,       // load css
           use: ['style-loader', 'css-loader'],
         },
        {
        
          test: /\.(png|svg|jpg|jpeg|gif)$/i,  // load images
          type: 'asset/resource',
        },
        {
        
          test: /\.(woff|woff2|eot|ttf|otf)$/i,      // Load Fonts 
          type: 'asset/resource',
        },
       ],
     },
   };
  

Four ： Load data

Besides , Useful resources that can be loaded and data , Such as JSON file ,CSV、TSV and XML. Be similar to NodeJS,JSON Support is actually built-in , in other words import Data from './data.json' By default, it will run normally . To import CSV、TSV and XML, You can use csv-loader and xml-loader. Let's deal with loading these three types of files ：

1. Download plug-ins

   npm install --save-dev csv-loader xml-loader
   

2. Import

   import Data from './data.xml';
   import Notes from './data.csv';
   

3. To configure

   rules: [
          {
         
            test: /\.css$/i,
            use: ['style-loader', 'css-loader'],
          },
          {
         
            test: /\.(png|svg|jpg|jpeg|gif)$/i,
            type: 'asset/resource',
          },
          {
         
            test: /\.(woff|woff2|eot|ttf|otf)$/i,
            type: 'asset/resource',
          },
         {
         
           test: /\.(csv|tsv)$/i,
           use: ['csv-loader'],
         },
         {
         
           test: /\.xml$/i,
           use: ['xml-loader'],
         },
        ],
   

5、 ... and ： Set up HtmlWebpackPlugin

1. Download plug-ins

   npm install --save-dev html-webpack-plugin
   

2. Import files

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

3. The configuration file

    module.exports = {
         
      entry: {
         
        index: './src/index.js',
        print: './src/print.js',
      },
        // If you want to join div If you want to share a template （template：src Under the index.html file ）
     plugins: [
       new HtmlWebpackPlugin({
         
         title: ' Manage output ',
         template:"./src/index.html"
       }),
     ],
      output: {
         
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
      },
    };
   

   index.html

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <!-- If you write this in the title, you will use the title in the plug-in . -->
       <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
       <div id="macnum" class="box"></div>
   </body>
   </html>
   

6、 ... and ： Use source map

When webpack When packaging source code , It can be hard to trace error( error ) and warning( Warning ) The original location in the source code . for example , If three source files （a.js, b.js and c.js） Pack it into a bundle（bundle.js） in , And one of the source files contains an error , Then the stack trace will point directly to bundle.js. You may need to know exactly which source file the error came from , So this tip usually doesn't help much .

To make it easier to track error and warning,JavaScript Provides source maps function , You can map the compiled code back to the original source code . If a mistake comes from b.js,source map Will clearly tell you .

source map There are many The available options , Be sure to read them carefully , So that it can be configured as needed .

For this guide , We will use inline-source-map Options , This helps explain the intent of the example （ This configuration is for example only , Don't use in a production environment ）：

such as ： Because the code has been packaged , But if there's something wrong in it , The number of lines he reported wrong is always the first line , So you need to see exactly what is wrong , Just add source map go in , But this is a convenient time for development , When it's time to upload , Must put source map It's closed , Otherwise, it will be on the web page , Everyone can copy See your source code

 module.exports = {
    
   mode: 'development',
   entry: {
    
     index: './src/index.js',
     print: './src/print.js',
   },
  devtool: 'inline-source-map',  // This is the sentence 
   plugins: [
     new HtmlWebpackPlugin({
    
       title: 'Development',
     }),
   ],
   output: {
    
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
     clean: true,
   },
 };

7、 ... and ： Use node The server opens the browser 、

localhost:3000

npm i: download node All documents ,npm init: Initialize project

Built in hot deployment ： Write code here and render automatically there .

All static resources are placed in dist Inside , But in src The address of the import file inside should be written dist Relative road strength .

1. Method 1：

   • Download plug-ins

     npm install --save-dev webpack-dev-server
     

   • To configure

      module.exports = {
             
        mode: 'development',
        entry: {
             
          index: './src/index.js',
          print: './src/print.js',
        },
        devtool: 'inline-source-map',
          // New addition 
       devServer: {
             
           // Set up folders 
         static: './dist',
           // Default port number 8080, You can customize 
         port:3000
       },
        plugins: [
          new HtmlWebpackPlugin({
             
            title: 'Development',
          }),
        ],
        output: {
             
          filename: '[name].bundle.js',
          path: path.resolve(__dirname, 'dist'),
          clean: true,
        },
          // New addition 
       optimization: {
             
         runtimeChunk: 'single',
       },
          // The default environment is production , Now for the development environment 
        mode:'development',
      };
     

   • stay pakage.json Your ranking in start The startup method assigned as below

     open Write that is to start hot deployment , If you don't write, you don't open

      "start": "webpack serve --open",
     

   • If you want to change the port ( Remember to restart every time you change or add a new thing )

     devServer: {
             
         static: './dist',
         port:3000
       },
     

8、 ... and ： How to solve cross domain problems

Directly in webpack.config.js Add inside

devServer: {
    
      static: './dist',
      port:'3000',
          // Cross domain configuration is this 
      proxy: {
    
        '/api': {
    
          target: 'http://localhost:3001',
          pathRewrite: {
     '^/api': '' },
        },
      },
    },