Introduction to webpack speed of light

1.webpack installation

  1. Run the NPM install webpack webpack cli – D command to install the webpack related packages
  2. In the root directory of the project, create a file named webpack.com config. Webpack configuration file of JS
  3. In the configuration file of webpack, initialize the basic configuration:
module.exports = {   
    mode: 'development' // Mode is used to specify the build mode 
} 
  1. In package Under the scripts node in the JSON configuration file, add a dev script:
"scripts": {  
  "dev": "webpack" // Scripts under the script node can be executed through npm run 
}
  1. Run the npm run dev command in the terminal to start webpack for project packaging

webpack 4 Default conventions in X version:

  1. The packaged entry file is SRC - > index js
  2. The packaged output file is dist - > main js

2. Basic use

Modify the entry and exit of packaging

const path = require('path') // Import node JS module dedicated to operation path 

module.exports = {

    entry: path.join(__dirname, './src/index.js'), // Path to package entry file   

    output: {

        path: path.join(__dirname, './dist'), // Storage path of output file     
        
        filename: 'bundle.js' // The name of the output file   
    }
} 

3. Configure automatic packaging function

  1. Run the NPM install webpack dev server – D command to install tools that support automatic project packaging
  2. Modify package dev command in JSON - > scripts
"scripts": {   
  "dev": "webpack-dev-server" 
} 
  1. Index In HTML, the reference path of script script is modified to "/ bundle. JS“
  2. Run the npm run dev command to repackage
  3. Access in browser http://localhost:8080 Address and view the effect of automatic packaging

Webpack dev server will start a real-time packaged http server

The output file generated by webpack dev Server package is placed in the project root directory by default, and it is virtual and invisible

4. Configure HTML webpack plugin to generate preview page

  1. Run the NPM install HTML webpack plugin – D command to install the plug-in that generates the preview page
  2. On webpack config. JS file, add the following configuration information:
// Import the plug-in that generates the preview page and get a constructor 
const HtmlWebpackPlugin = require('html-webpack-plugin')
// Create an instance object of the plug-in   
const htmlPlugin = new HtmlWebpackPlugin({
    // Specify the template file to use   
    template: './src/index.html',
    // Specifies the name of the generated file, which exists in memory and is not displayed in the directory 
    filename: 'index.html'
})
  1. Exposure configuration object:
module.exports = {   
  plugins: [ htmlPlugin ] // The plugins array is a list of plug-ins that will be used during webpack packaging 
}

5. Configure parameters related to automatic packaging

  /**
  * package.json Configuration in 
  * --open Automatically open the browser page after packaging 
  * --host Configure IP address 
  * --port configure port
  */
 "scripts": { 
    "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888" 
  }

6.webpack module loader

Webpack can only be packaged and processed by default js suffix end of the module, other non Modules ending in js suffix cannot be handled by webpack by default. You need to call the loader loader to package normally, otherwise an error will be reported!

The loader loader can assist webpack in packaging and processing specific file modules. For example:

  • less loader can be packaged less related documents
  • Sass loader can be packaged scss related documents
  • url loader can package and process files related to url path in css

7. Package css files

  1. Run the NPM I style loader css loader - D command to install the loader that handles css files
  2. On webpack config. In the module - > rules array of JS, add the loader rule:
module: { 
    rules: [ 
      { test: /\.css$/, use: ['style-loader', 'css-loader'] } 
    ] 
  }

test indicates the matching file type, and use indicates the corresponding loader to be called

The order of loader s specified in the use array is fixed

Calling sequence of multiple loader s: calling from back to front

8. Package and process less files

  1. Run the NPM I less loader less - D command
  2. On webpack config. In the module - > rules array of JS, add the loader rule:
module: { 
    rules: [ 
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] } 
    ] 
  }

9. Configure postCSS to automatically add the compatible prefix of css

  1. Run the NPM I postcss loader autoprefixer - D command (note that the autoprefixer version is compatible)
  2. Create the configuration file of postcss in the root directory of the project config. JS and initialize the configuration:
// Import a plug-in that automatically prefixes 
const autoprefixer = require('autoprefixer')
// Mount plug-in
module.exports = {
    plugins: [autoprefixer]
} 
  1. On webpack config. In the module - > rules array of css, modify the loader rule of css:
module: { 
    rules: [ 
      { test:/\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] } 
    ] 
  }

10. Package the pictures and font files in the style sheet

  1. Run the NPM I URL loader file loader - D command
  2. On webpack config. In the module - > rules array of JS, add the loader rule:
module: { 
    rules: [ 
      {  
        test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,  
        use: 'url-loader?limit=16940' 
      } 
    ] 
  }

Note:? Then comes the parameter item of loader; Limit is used to specify the size of the picture in bytes. Only pictures smaller than the limit size will be converted to base64 pictures

11. Package and process the high-level syntax in js files

  1. Install package related to babel converter: NPM I babel loader @ babel / core @ babel / runtime - D
  2. Install package related to babel syntax plug-in: NPM I @ babel / preset env @ babel / plugin transform runtime @ babel / plugin propose class properties - D
  3. In the project root directory, create the babel configuration file babel config. JS and initialize the basic configuration:
module.exports = {
    presets: ['@babel/preset-env'],
    plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
} 
  1. On webpack config. In the module - > rules array of JS, add the loader rule:
// exclude is an exclusion item, indicating that Babel loader does not need to process node_ js file in modules   
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

12. Configure the loader of vue component in webpack

  1. Run the NPM I Vue loader Vue template compiler - D command

  2. On webpack config. JS configuration file, add the configuration of Vue loader:

    const VueLoaderPlugin = require('vue-loader/lib/plugin')
    module.exports = {
        module: {
            rules: [
                // ...  Other rules       
                { test: /\.vue$/, loader: 'vue-loader' }
            ]
        },
        plugins: [
            // ...  Other plug-ins     
            new VueLoaderPlugin()]
    }
    

13.webpack packaging and publishing

Through package JSON file configuration packaging command:

// In package Configure webpack packaging command in JSON file    
// This command loads the webpack.com in the root directory of the project by default config. JS configuration file    
"scripts": {      
  // Commands for packaging      
  "build": "webpack -p",      
  // Development commands for debugging      
  "dev": "webpack-dev-server --open --host 127.0.0.1 --port 3000", 
}, 

14. A simple configuration

const path = require('path')

const VueLoaderPlugin = require('vue-loader/lib/plugin')

const HtmlWebpackPlugin = require('html-webpack-plugin')
// Create an instance object of the plug-in   
const htmlPlugin = new HtmlWebpackPlugin({
    // Specify the template file to use   
    template: './src/index.html',
    // Specifies the name of the generated file, which exists in memory and is not displayed in the directory 
    filename: 'index.html'
})

module.exports = {
    mode: 'development',
    entry: path.join(__dirname, 'src'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader', exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                use: 'url-loader?limit=16941'
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    plugins: [htmlPlugin, new VueLoaderPlugin()]
}

Posted by kurdishvoice on Sat, 14 May 2022 06:30:39 +0300