当前位置:网站首页>How to use webpach packer

How to use webpach packer

2022-05-14 14:00:07Fish that want to be taken away

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': '' },
        },
      },
    },
原网站

版权声明
本文为[Fish that want to be taken away]所创,转载请带上原文链接,感谢
https://chowdera.com/2022/134/202205141344069181.html

随机推荐