webpack: a two-hour quick start

The official website of Webpack is known as "packing all styles, resources, scripts, and pictures". Next, we will build the basic skeleton of modular development of front-end projects based on Webpack.

Introduction to webpack

webpack is a static module bundler for modern JavaScript applications. It is mainly used to compile JavaScript modules. webpack-based cli scaffolding or API can realize modular development of front-end applications.

When webapck processes an application, it recursively builds a dependency graph containing every module the application needs, and then packages those modules into one or more bundle s.

Getting started with webpack

(1) Initialize the project. To create a webpack project, you need to use the npm init command to initialize a project, and then use the following commands to install webpack dependencies and webpack-cli scaffolding locally, where: the latter webpack-cli scaffolding tool is used to run webpack on the command line.

npm init -y
npm install webpack webpack-cli --save-dev

(2) Create an entry file. Create index.html file, src/index.js, among which: index.js in the latter src directory is called "entry point", index.js usually needs to be in the webpack.config.js configuration file Specify and use it as the entry script file for webpack application building.

(3) Configuration file preparation. Write a simplest configuration file as follows,

/**
 * webpack Project configuration file
 */
const path = require("path");

module.exports = {
  //Provides a mode configuration option that tells webpack to use the built-in optimizations for the corresponding mode - [can also pass the mode parameter from the cli]
  mode:"production",
  //Entry file configuration
  entry:"./src/index.js",
  //Export File
  output:{
    filename: '[name].js',//Placeholder [name], to ensure that the file name is unique
    path: path.resolve(__dirname,"dist"),//Specifies that the output file is saved in the dist folder in the root directory
  }
};

(4) Configure package.json, add npm command , to replace how npx webpack runs.

(5) Installation lodash.js The third-party dependency module (this module provides a series of JavaScript utility libraries for processing arrays, strings, and mathematical operations), and writes the entry file src/index.js and the entry page index.html.

#Install lodash third-party dependencies

npm install --save lodash

<!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">
  <title>Cesium-Webpack</title>
  <!-- <script src="https://unpkg.com/lodash@4.16.6"></script> -->
</head>
<body>
  <script src="./src/index.js"></script>
</body>
</html>

import _ from 'lodash';//Manage JavaScript assets with webpack
/**
 * Create a child component
 */
function component(){
  const element = document.createElement("div");
  element.innerHTML = _.join(["hello","webpack"],' ');
  return element;
}

document.body.appendChild(component());

(7) Execute the following command to package the resources. You can see that a main.js - JavaScript script file appears in the root directory of the project. This file is the combination and compression of the code we wrote before and the script in the dependent library. JS script files that run directly on the browser side.

npm run build

(8) Note: when webpack is packaged by default, the main page of index.html will not be generated, so here we can manually provide one and use the script tag to import the main.js script library.

<!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">
  <title>Cesium-Webpack</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>

(9) At this point, double-click to open the index.html file in the dist output directory, and you can see the display effect.

webpack: manage static assets

So, how does webpack manage resources, such as images and fonts? The following sections describe in detail.

Webpack introduces any type of files except JavaScript through loader, that is, in addition to managing JavaSript modules that have dependencies between each other, Webpack can also be used to build all non-JavaScript content in websites or web applications.

webpack: load CSS assets

Let's try to write a global.css to perform global styles - clearing the boundaries of DOM elements. Note: webpack can treat all assets as submodules of a modular application, that is, we will use the import command to import a global.css global style file.

(1) Install style-loader and css-loader, the commands are as follows,

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

(2) Pass modules property , configure the loader, and modify the content of the webpack.config.js file as follows,

/**
 * webpack Project configuration file
 */
const path = require("path");

module.exports = {
  //Provides a mode configuration option that tells webpack to use the built-in optimizations for the corresponding mode - [can also pass the mode parameter from the cli]
  mode:"production",
  //Entry file configuration
  entry:"./src/index.js",
  //Export File
  output:{
    filename: '[name].js',//Placeholder [name], to ensure that the file name is unique
    path: path.resolve(__dirname,"dist"),//Specifies that the output file is saved in the dist folder in the root directory
  },
  //Module configuration
  module:{
    rules:[
      {
        test:/\.css$/,//regex - match css style file
        use:['style-loader','css-loader'],//Configure the style loader
      }
    ]
  }
};

(3) Try to import the src/global.css style file through the following command.

import './global.css' //Import a global style file

(4) Run the build/package command: npm run build, reopen the index.html file in the dist folder, and view the web page style. As shown in the figure below, the style file imported using the import command has taken effect.

webpack: load image resources

Now, we create a new assets subfolder in the src directory to store a photo, and try to import it using the import command in the webpack project, and insert it into the index.html page for display through native JavaScript programming.

(1) Install file-loader. The installation command is as follows,

npm install --save-dev file-loader

(2) Modify the content of the webpack.config.js configuration file, as shown below,

/**
 * webpack Project configuration file
 */
const path = require("path");

module.exports = {
  //Provides a mode configuration option that tells webpack to use the built-in optimizations for the corresponding mode - [can also pass the mode parameter from the cli]
  mode:"production",
  //Entry file configuration
  entry:"./src/index.js",
  //Export File
  output:{
    filename: '[name].js',//Placeholder [name], to ensure that the file name is unique
    path: path.resolve(__dirname,"dist"),//Specifies that the output file is saved in the dist folder in the root directory
  },
  //Module configuration
  module:{
    rules:[
      //css loader
      {
        test:/\.css$/,//regex - match css style file
        use:['style-loader','css-loader'],//Configure the style loader
      },
      //image loader
      {
        test:/\.(png|svg|jpg|gif)$/,//regex - match image files
        use:['file-loader'],//Configure image file loader
      }
    ]
  }
};

(3) Modify the code of the index.js entry file as follows, and use the import command to import the image image resource and add it to the index.html page. The code is as follows,

import _ from 'lodash' //Manage JavaScript assets with webpack
import './global.css' //Import a global style file
import img_hg from './assets/xjqxz.jpg' //Import image resources
/**
 * Create a child component
 */
function component() {
  const documentFrags = document.createDocumentFragment();
  //Create DOM elements
  const div = document.createElement('div')
  div.innerHTML = _.join(['hello', 'webpack'], ' ')
  //Create img element
  const image = document.createElement("img");
  image.src = img_hg;
  //add to the document fragment container
  documentFrags.appendChild(div);
  documentFrags.appendChild(image);
  //return document fragment
  return documentFrags;
}

document.body.appendChild(component())

(4) Re-execute the packaging command: npm run build, you can see that the image file just used appears in the dist directory, and then open the dist/index.html page to check the execution effect as follows, and the image resource is successfully imported.

webpack: load font resources

Now, let's try to introduce a font resource for spreadsheets and other styles. In a webapck project, you can still use the file-laoder file loader to load font resources (in fact, the file-loader can be used to load any type of file).

(1) First, we need to update the webpack.config.js configuration file to apply the file-loader loader to the font resources.

/**
 * webpack Project configuration file
 */
const path = require("path");

module.exports = {
  //Provides a mode configuration option that tells webpack to use the built-in optimizations for the corresponding mode - [can also pass the mode parameter from the cli]
  mode:"production",
  //Entry file configuration
  entry:"./src/index.js",
  //Export File
  output:{
    filename: '[name].js',//Placeholder [name], to ensure that the file name is unique
    path: path.resolve(__dirname,"dist"),//Specifies that the output file is saved in the dist folder in the root directory
  },
  //Module configuration
  module:{
    rules:[
      //css loader
      {
        test:/\.css$/,//regex - match css style file
        use:['style-loader','css-loader'],//Configure the style loader
      },
      //image loader
      {
        test:/\.(png|svg|jpg|gif)$/,//regex - match image files
        use:['file-loader'],//Configure image file loader
      },
      //font resource loader
      {
        test:/\.(woff|woff2|eot|ttf|otf)$/,//regex - matching font resources
        use:['file-loader'],//Configure font resource loader
      }
    ]
  }
};

(2) Second, we create a new fonts subfolder under the src/assets folder to store font resources.

(3) Next, we try to use @font-face to register fonts in the global.css global style file and use these two fonts.

/* Register fonts */
/* spreadsheet font */
@font-face {
  font-family: DS_DIGIT;
  src: url('./assets/fonts/DS-DIGIT.TTF');
  font-weight:400 ;
  font-style: normal;
}
/* Station cool high-end black font */
@font-face {
  font-family: ZK_BLACK;
  src: url('./assets/fonts/zk_black.woff') format('woff'),url('./assets/fonts/zk_black.woff2') format('woff2');
  font-weight:400 ;
  font-style: normal;
}

*,html,body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: skyblue;
}

(4) Repackage, open index.html in the dist folder, and you can see that the two font files were successfully imported.

webpack: load various files

In addition to image and font resources, webpack can also be used to load various data files, such as: JSON files, CSV, TSV and XML. Similar to NodeJS, webpack naturally supports JSON format. You can directly use the import command to import JSON files, which work normally by default. However, to import CSV, TSV and XML files, csv-loader and xml-loader are used, which are configured below.

(1) Use the following command to install the corresponding loader,

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

(2) Modify the webpack.config.js configuration file to provide corresponding loaders for CSV, TSV, and XML files.

/**
 * webpack Project configuration file
 */
const path = require("path");

module.exports = {
  //Provides a mode configuration option that tells webpack to use the built-in optimizations for the corresponding mode - [can also pass the mode parameter from the cli]
  mode:"production",
  //Entry file configuration
  entry:"./src/index.js",
  //Export File
  output:{
    filename: '[name].js',//Placeholder [name], to ensure that the file name is unique
    path: path.resolve(__dirname,"dist"),//Specifies that the output file is saved in the dist folder in the root directory
  },
  //Module configuration
  module:{
    rules:[
      //css loader
      {
        test:/\.css$/,//regex - match css style file
        use:['style-loader','css-loader'],//Configure the style loader
      },
      //image loader
      {
        test:/\.(png|svg|jpg|gif)$/,//regex - match image files
        use:['file-loader'],//Configure image file loader
      },
      //font resource loader
      {
        test:/\.(woff|woff2|eot|ttf|otf)$/,//regex - matching font resources
        use:['file-loader'],//Configure font resource loader
      },
      //Configure CSV, TSV Loaders
      {
        test:/\.(csv|tsv)$/,
        use:"csv-loader",
      },
      //Configure XML Loader
      {
        test:/\.xml$/,
        use:"xml-loader",
      }
    ]
  }
};

(3) Then we create a data subfolder under the src/assets folder, and put several files, including: json, csv, xml format,

(4) Try to introduce three files in the index.js entry file and print the content.

import grid_json from './assets/data/grid.json' //import json file
import result_csv from './assets/data/result.csv' //import csv file
import test_xml from './assets/data/test.xml' //import xml file
console.log(grid_json)
console.log(result_csv)
console.log(test_xml)

(5) Repackage and open the dist/index.hml file to view the contents of the console. It can be found: After the processing of webapck, the imported data resources have been converted into JavaScript Object objects or Array object arrays.

Advantages of webpack asset management

Our project structure above is: put all static resources in the src/assets folder, although this is a regular practice in front-end development, but the management capabilities of this modular resource of webpakc can make We keep modules together with their respective resource files, thus reducing maintenance/development stress.

webpack: manage output

webpack: automatically build dist directory

So far, the index.html file in our dist directory is still manually written and then copied. This is a bit low, and, if it is a really large project development, as the application grows, and once you start to filename using hash (hash) ] and output multiple bundle s , manually manage the index.html file, everything becomes difficult.

Next, we try to configure the plugin in webpack so that the index.html file in the dist directory can be automatically generated.

(1) First clear all files in the dist directory;

(2) Install the HtmlWebpackPlugin plugin, which simplifies the creation of HTML files and can provide services for webpack packages, which is useful for the above situation (webpack resources that change frequently and contain hash characters), because this plugin can An HTML file is automatically generated for us.

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

(3) Modify the content of the webpack.congfig.js configuration file to make the HtmlWebpackPlugin plugin take effect.

/**
 * webpack Project configuration file
 */
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require("path");

module.exports = {
  //Provides a mode configuration option that tells webpack to use the built-in optimizations for the corresponding mode - [can also pass the mode parameter from the cli]
  mode:"production",
  //Entry file configuration
  entry:"./src/index.js",
  //Export File
  output:{
    filename: '[name].js',//Placeholder [name], to ensure that the file name is unique
    path: path.resolve(__dirname,"dist"),//Specifies that the output file is saved in the dist folder in the root directory
  },
  //Module configuration
  module:{
    rules:[
      //css loader
      {
        test:/\.css$/,//regex - match css style file
        use:['style-loader','css-loader'],//Configure the style loader
      },
      //image loader
      {
        test:/\.(png|svg|jpg|gif)$/,//regex - match image files
        use:['file-loader'],//Configure image file loader
      },
      //font resource loader
      {
        test:/\.(woff|woff2|eot|ttf|otf)$/,//regex - matching font resources
        use:['file-loader'],//Configure font resource loader
      },
      //Configure CSV, TSV Loaders
      {
        test:/\.(csv|tsv)$/,
        use:"csv-loader",
      },
      //Configure XML Loader
      {
        test:/\.xml$/,
        use:"xml-loader",
      }
    ]
  },
  //Plugin configuration
  plugins:[
    new HtmlWebpackPlugin(),
  ]
};

(4) Rerun the packaging command: npm run build, the content of the dist output directory and the content of the automatic build of index.html are as follows,

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Webpack App</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <script defer="defer" src="main.js"></script>
</head>

<body></body>

</html>

webpack: automatically clean up dist directory

Usually, when the project is packaged in the above way, the files generated in the dist directory will only perform the overwrite operation, but not the cleanup operation. Over time, this is very unfriendly to the packaging and release of the project.

Therefore, you can use the recommended webpack website clean-webpack-plugin Manage plugins, it will automatically help us to clean up the dist directory every time before executing the npx webapck or npm run build command, and then generate new content.

(1) The installation command is as follows,

npm install clean-webpack-plugin --save-dev

(2) Modify webpack.config.js and configure it in the plugins node,

/**
 * webpack Project configuration file
 */
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const path = require("path");

module.exports = {
  //Provides a mode configuration option that tells webpack to use the built-in optimizations for the corresponding mode - [can also pass the mode parameter from the cli]
  mode:"production",
  //Entry file configuration
  entry:"./src/index.js",
  //Export File
  output:{
    filename: '[name].js',//Placeholder [name], to ensure that the file name is unique
    path: path.resolve(__dirname,"dist"),//Specifies that the output file is saved in the dist folder in the root directory
  },
  //Module configuration
  module:{
    rules:[
      //css loader
      {
        test:/\.css$/,//regex - match css style file
        use:['style-loader','css-loader'],//Configure the style loader
      },
      //image loader
      {
        test:/\.(png|svg|jpg|gif)$/,//regex - match image files
        use:['file-loader'],//Configure image file loader
      },
      //font resource loader
      {
        test:/\.(woff|woff2|eot|ttf|otf)$/,//regex - matching font resources
        use:['file-loader'],//Configure font resource loader
      },
      //Configure CSV, TSV Loaders
      {
        test:/\.(csv|tsv)$/,
        use:"csv-loader",
      },
      //Configure XML Loader
      {
        test:/\.xml$/,
        use:"xml-loader",
      }
    ]
  },
  //Plugin configuration
  plugins:[
    new HtmlWebpackPlugin({
      title: 'Output Management'
    }),
    new CleanWebpackPlugin(),//Specifies the directory to clean
  ]
};

webpack: packaging progress bar

In addition to third-party plug-ins, webapck also provides some built-in plug-ins, one of which is ProgressPlugin - used to display the packaging progress bar when packaging front-end projects, just modify the content of the webpack.cionfig.js configuration file as follows.

/**
 * webpack Project configuration file
 */
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const webpack = require('webpack'); //Get webpack built-in plugins
const path = require("path");

module.exports = {
  //Provides a mode configuration option that tells webpack to use the built-in optimizations for the corresponding mode - [can also pass the mode parameter from the cli]
  mode:"production",
  //Entry file configuration
  entry:"./src/index.js",
  //Export File
  output:{
    filename: '[name].js',//Placeholder [name], to ensure that the file name is unique
    path: path.resolve(__dirname,"dist"),//Specifies that the output file is saved in the dist folder in the root directory
  },
  //Module configuration
  module:{
    rules:[
      //css loader
      {
        test:/\.css$/,//regex - match css style file
        use:['style-loader','css-loader'],//Configure the style loader
      },
      //image loader
      {
        test:/\.(png|svg|jpg|gif)$/,//regex - match image files
        use:['file-loader'],//Configure image file loader
      },
      //font resource loader
      {
        test:/\.(woff|woff2|eot|ttf|otf)$/,//regex - matching font resources
        use:['file-loader'],//Configure font resource loader
      },
      //Configure CSV, TSV Loaders
      {
        test:/\.(csv|tsv)$/,
        use:"csv-loader",
      },
      //Configure XML Loader
      {
        test:/\.xml$/,
        use:"xml-loader",
      }
    ]
  },
  //Plugin configuration
  plugins:[
    new webpack.ProgressPlugin(),//Packing progress bar
    new HtmlWebpackPlugin({
      title: 'Output Management'
    }),
    new CleanWebpackPlugin(),//Specifies the directory to clean
  ]
};

webpack development configuration

webpack: bug tracking

Usually, when we are developing, we are very happy to see that the development tool can directly prompt us: the file and location information of the code error, instead of generally telling you: the code is running incorrectly, such an error prompt is meaningless.

In order to track the error location in the code, we can use the source map configuration item. When this configuration item is enabled, JavaScript will internally pass a reverse mapping to map the error in the packaged code to the file before packaging. , and prompt.

(1) Modify the configuration items in the webapck.config.js configuration file,

/**
 * webpack Project configuration file
 */
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const webpack = require('webpack'); //Get webpack built-in plugins
const path = require("path");

module.exports = {
  //Provides a mode configuration option that tells webpack to use the built-in optimizations for the corresponding mode - [can also pass the mode parameter from the cli]
  mode:"production",
  //Entry file configuration
  entry:"./src/index.js",
  //Export File
  output:{
    filename: '[name].js',//Placeholder [name], to ensure that the file name is unique
    path: path.resolve(__dirname,"dist"),//Specifies that the output file is saved in the dist folder in the root directory
  },
  devtool: 'inline-source-map',//source-map configuration
  //Module configuration
  module:{
    rules:[
      //css loader
      {
        test:/\.css$/,//regex - match css style file
        use:['style-loader','css-loader'],//Configure the style loader
      },
      //image loader
      {
        test:/\.(png|svg|jpg|gif)$/,//regex - match image files
        use:['file-loader'],//Configure image file loader
      },
      //font resource loader
      {
        test:/\.(woff|woff2|eot|ttf|otf)$/,//regex - matching font resources
        use:['file-loader'],//Configure font resource loader
      },
      //Configure CSV, TSV Loaders
      {
        test:/\.(csv|tsv)$/,
        use:"csv-loader",
      },
      //Configure XML Loader
      {
        test:/\.xml$/,
        use:"xml-loader",
      }
    ]
  },
  //Plugin configuration
  plugins:[
    new webpack.ProgressPlugin(),//Packing progress bar
    new HtmlWebpackPlugin({
      title: 'Output Management'
    }),
    new CleanWebpackPlugin(),//Specifies the directory to clean
  ]
};

(2) We deliberately add a line of code to index.js as follows,

(3) Repackage and run the program, and see the following error message. In this way, according to the error message, we can directly trace to line 38 of the index.js file, which is where we deliberately throw the Error error just now. .

webpack: enable observer mode

The project currently built by webpack needs to be repackaged after each modification, and then find dist/index.html and reopen it to see the effect after modification. This repetitive operation is extremely cumbersome in actual development. We need a plugin/configuration that can update and see the modified content in the index.html view in real time after modifying the code.

To achieve this effect, just add the following script to the scripts tag in the package.json file,

"watch": "webpack --watch",

Then, we use the command: npm run watch to start the project without exiting the command line. This is because the script script is still watching the file. Now, while webpack is watching the file, let's remove the error we introduced earlier:

At this point, we comment out the statement that throw new Error() throws an error just now, and then refresh the browser to see the latest effect.

What you get from this behavior: in observer mode, if one of the files is updated, the code will be recompiled, so you don't have to run the entire build manually.

webpack: webpack-dev-server local server

The observer mode of webpack helps us solve the problem of automatic compilation/build. However, after each code modification, we still need to manually refresh the browser to see the latest content, which is obviously not very friendly.

Therefore, we can use webpack-dev-server to build a local server that can be reloaded in real time (live reloading) to achieve a hot deployment operation similar to the java backend.

(1) Install the webpack-dev-server dependency package,

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

(2) Modify the webpack.config.js configuration file so that webpack-dev-server can work,

/**
 * webpack Project configuration file
 */
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const webpack = require('webpack'); //Get webpack built-in plugins
const path = require("path");

module.exports = {
  //Provides a mode configuration option that tells webpack to use the built-in optimizations for the corresponding mode - [can also pass the mode parameter from the cli]
  mode:"production",
  //Entry file configuration
  entry:"./src/index.js",
  //Export File
  output:{
    filename: '[name].js',//Placeholder [name], to ensure that the file name is unique
    path: path.resolve(__dirname,"dist"),//Specifies that the output file is saved in the dist folder in the root directory
  },
  devtool: 'inline-source-map',//source-map configuration
  //devserver configuration
  devServer:{
    static: './dist',//Specifies that the content in the dist directory is the directory that devServer monitors in real time
  },
  //Module configuration
  module:{
    rules:[
      //css loader
      {
        test:/\.css$/,//regex - match css style file
        use:['style-loader','css-loader'],//Configure the style loader
      },
      //image loader
      {
        test:/\.(png|svg|jpg|gif)$/,//regex - match image files
        use:['file-loader'],//Configure image file loader
      },
      //font resource loader
      {
        test:/\.(woff|woff2|eot|ttf|otf)$/,//regex - matching font resources
        use:['file-loader'],//Configure font resource loader
      },
      //Configure CSV, TSV Loaders
      {
        test:/\.(csv|tsv)$/,
        use:"csv-loader",
      },
      //Configure XML Loader
      {
        test:/\.xml$/,
        use:"xml-loader",
      }
    ]
  },
  //Plugin configuration
  plugins:[
    new webpack.ProgressPlugin(),//Packing progress bar
    new HtmlWebpackPlugin({
      title: 'Output Management'
    }),
    new CleanWebpackPlugin(),//Specifies the directory to clean
  ]
};

(3) Modify the scripts command script of package.json, add a new script script, you can directly run the development server (dev server): "start": "webpack-dev-server --open",

(4) Now, run npm start on the command line, and you will see the browser automatically load the page. If you modify and save any source file now, the web server will automatically reload the compiled code.

(5) At this time, a warning message is displayed in the browser, although this is not an Error error, but in the webpack program, this will still block the operation of the program, we can suppress it,

As of now, our package.json file structure is as follows,

{
  "name": "cesium-webpack",
  "version": "1.0.0",
  "description": "webpack-Cesium",
  "private": true,
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "watch": "webpack --watch",
    "start": "webpack-dev-server --open"
  },
  "author": "Xwd",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.7.1",
    "csv-loader": "^3.0.5",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1",
    "xml-loader": "^1.2.1"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

Tags: Vue Front-end Webpack

Posted by focus310 on Fri, 21 Oct 2022 00:54:51 +0530

Programs Team