Method for building automatic development scaffold based on webpack

Abstract

The invention discloses a method for building an automatic development scaffold based on webpack, and relates to the technical field of software development, the method comprises the following steps: S1, environment preparation; s2, installation dependence; s3, creating a project structure; s4, performing project initialization; s5, configuring a file (webpack. Config.js), and carrying out the configuration of the file (webpack. S6, developing a server; s7, constructing and deploying; through the self-defined scaffold, a developer can quickly initialize a new project with optimal practice and preset configuration, so that repeated work is greatly reduced, the development efficiency is improved, meanwhile, the construction process of the project can be better understood and controlled, and various complex development requirements can be better met.

Description

Technical Field

[0001] The invention belongs to the technical field of software development, and in particular relates to a method for building an automated development scaffold based on webpack. Background Art

[0002] In the field of software development, as business needs become increasingly complex and diversified, the scale and complexity of projects continue to increase, and the demand for efficient and flexible development frameworks and tools is becoming increasingly urgent. As the most popular lightweight and efficient front-end framework, Vue.js has quickly gained favor among developers with its simple API, responsive data binding, and component-based development model, and is particularly suitable for building complex single-page applications (SPA). At the same time, Webpack, as a mainstream module packaging tool, has become the preferred tool for building Vue projects due to its high configurability and rich plug-in ecosystem. It supports modular development, can handle various resource types, and optimize loading performance.

[0003] In order to meet the specific needs of different projects, developers often need to create customized templates based on their own project conditions. This not only helps them become more familiar with the process of automated construction, but also facilitates deeper exploration in performance optimization and project architecture.

[0004] However, the existing technologies still have the following problems: (1) The npm command cannot be used to selectively build projects; (2) There is no integrated unit test, and developers need to manually configure or use other libraries for unit testing when performing unit testing; (3) There are compatibility issues. As Webpack and related dependent libraries are updated, custom configurations may be incompatible with new versions and need to be regularly updated and tested to ensure continuous operation. The above problems require further innovation and improvement. Summary of the invention

[0005] The present invention aims to at least solve the technical problems existing in the prior art; to this end, the present invention proposes a method for building an automated development scaffold based on webpack, which is used to solve the technical problems that the prior art cannot use the npm command for selective construction, does not integrate unit testing and requires manual configuration or other libraries, and has compatibility issues caused by the update of Webpack and related dependent libraries, and requires regular updates and tests. The present invention solves the above problems by creating a reusable template to ensure that new projects follow a consistent file and directory structure.

[0006] To achieve the above object, the present invention provides a method for building an automated development scaffold based on webpack, comprising:

[0007] Step S1, environmental preparation;

[0008] Build a JavaScript runtime environment by installing Node.js and the NPM package management tool;

[0009] Step S2, install dependencies;

[0010] The installation dependencies include process processing plug-ins;

[0011] Step S3, create a project structure;

[0012] A project created in the JavaScript runtime environment, wherein the project structure includes: a src directory, a public directory, and a build directory;

[0013] Step S4, project initialization;

[0014] Use the command line tool to enter the project directory. The command line tool is Command Prompt, and run the npminit command to initialize a new Node.js project and generate a package.json file containing basic metadata information such as the project name, description, and version.

[0015] Step S5, configure the webpack.config.js file;

[0016] Configure the Webpack file in the root directory of the project and define the entry and output for the Webpack file;

[0017] The Webpack file includes webpack.config.js;

[0018] Step S6, developing a server;

[0019] The development server configures webpack-dev-server, sets up a proxy, enables hot module replacement, and configures the port;

[0020] Step S7: build and deploy;

[0021] Add the scripts field to package.json and define the script commands.

[0022] Furthermore, in step S2, the necessary dependencies for installation include Webpack plug-in, webpack-cli command tool, webpack-merge, webpack-bundle-analyzer, html-webpack-plugin to generate index.html file, css-loader, style-loader, css-minimizer-webpack-plugin, MiniCssExtractPlugin, babel tool, postcss tool, sass, typescript, fork-ts-checker-webpack-plugin, image-minimizer-webpack-plugin, and thread-loader.

[0023] Furthermore, in step S2, if the dependency installation fails during the installation process, first check whether the network connection is normal; if the network is normal, check the error information to determine whether it is a version incompatibility or dependency conflict problem; when it is determined to be a version incompatibility problem, specify the version number adapted to Webpack5.0.0 and babel7.0.0 to reinstall; when it is determined to be a dependency conflict problem, packageA and packageB depend on different versions of packageC at the same time, analyze the conflicting dependencies, adjust the version or exclude one of the conflicting dependencies.

[0024] Furthermore, in step S3, the src directory stores the development files of the project, including components and page logic; the public directory stores static resources, including website icons, favicon and HTML entry files; and the build directory stores the webpack configuration file webpack.config.js.

[0025] Furthermore, the configuration of step S5 in webpack.config.js includes:

[0026] Entry: defines the main entry file of the application, usually src / main.js;

[0027] Output: Set the build output path and file name, such as dist / main.js;

[0028] Module rules: configure Vue Loader for .vue files; for JavaScript, configure Babel Loader to process ES6+ syntax; for CSS, use a combination of css-loader and style-loader, and configure MiniCssExtractPlugin; for images, use url-loader; for fonts, use file-loader;

[0029] Configure plugins: Use HtmlWebpackPlugin to automatically generate HTML files and insert built JS and CSS references; configure TerserPlugin for code compression; configure CopyWebpackPlugin to copy static resources; configure DefinePlugin to configure global variables; configure ProvidePlugin to configure automatic module import; configure VueLoaderPlugin to call vue-loader to process vue files; configure BundleAnalyzerPlugin to view module thermal analysis charts;

[0030] Cache configuration: cache chunk, eslint, babel, style-lint;

[0031] Module parsing configuration: configure aliases and parse extensions;

[0032] Optimization configuration: configure TerserPlugin for code compression, configure MiniCssExtractPlugin to extract CSS to a separate file, configure ImageMinimizerPlugin to compress images, configure splitChunks for code segmentation, and configure runtimeChunk to manage chunk hash values ​​to generate corresponding chunk dependency networks.

[0033] Furthermore, in step S5:

[0034] If a syntax error occurs during the configuration process, webpack will give a corresponding error prompt during the build; at this time, check the syntax and parameter settings in the configuration file to make the configuration conform to the webpack specifications.

[0035] Further, the definition of the script in step S7 includes four script commands, and the four script commands include: serve.dev command, serve-prod command, build:dev command and build-prod command;

[0036] Among them, the serve.dev command starts webpack-dev-server in the development environment, the serve-prod command starts the service in the production environment, and the build:dev command and build-prod command are used for building development and production environments respectively.

[0037] Furthermore, this scaffold can run on Windows, Mac and Linux operating systems.

[0038] Compared with the prior art, the beneficial effect of the present invention is that through custom scaffolding, developers can quickly initialize a new project with best practices and preset configurations, thereby reducing duplication of work, improving development efficiency, and also better understanding and controlling the project construction process. BRIEF DESCRIPTION OF THE DRAWINGS

[0039] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0040] Figure 1 It is a schematic diagram of the process of the present invention. DETAILED DESCRIPTION

[0041] The technical solution of the present invention will be clearly and completely described below in conjunction with the embodiments. Obviously, the described embodiments are only part of the embodiments of the present invention, rather than all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0042] See also Figure 1 , an embodiment of the present invention provides a method for building an automated development scaffold based on webpack, comprising:

[0043] Step S1, environmental preparation;

[0044] Build a JavaScript runtime environment by installing Node.js and the NPM package management tool;

[0045] Step S2, install dependencies;

[0046] The installation dependencies include process processing plug-ins;

[0047] Step S3, create a project structure;

[0048] A project created in the JavaScript runtime environment, wherein the project structure includes: a src directory, a public directory, and a build directory;

[0049] Step S4, project initialization;

[0050] Use the command line tool to enter the project directory. The command line tool is Command Prompt, and run the npminit command to initialize a new Node.js project and generate a package.json file containing basic metadata information such as the project name, description, and version.

[0051] Step S5, configure the webpack.config.js file;

[0052] Configure the Webpack file in the root directory of the project and define the entry and output for the Webpack file;

[0053] The Webpack file includes webpack.config.js;

[0054] Step S6, developing a server;

[0055] The development server configures webpack-dev-server, sets up a proxy, enables hot module replacement, and configures the port; for example:

[0056] devServer:{

[0057] proxy:{

[0058] ' / api':'http: / / localhost:3000'

[0059] },

[0060] hot:true,

[0061] port:8080

[0062] }

[0063] Step S7: Build and deploy

[0064] Add the scripts field to package.json and define the script commands.

[0065] In step S2, necessary dependencies are installed, including Webpack plug-in, webpack-cli command tool, webpack-merge configuration merging plug-in, webpack-bundle-analyzer module analysis heat map, html-webpack-plugin to generate index.html file, css-loader to process css files introduced in js, style-loader to process css-loader to generate commonjs standard js and dynamically insert it into html, and process HMR; replace with vue-loader <support ssr>, css-minimizer-webpack-plugin to compress css files, MiniCssExtractPlugin to extract css files, babel tool compatible syntax, postcss tool syntax compatibility and syntax extension, sass syntax extension, typescript enhanced js syntax, fork-ts-checker-webpack-plugin ts compile first and then check type, image-minimizer-webpack-plugin image compression, thread-loader multi-process.

[0066] In step S2, if the installation fails, first check whether the network connection is normal; if the network is normal, check the error message to determine whether it is a version incompatibility or dependency conflict problem; if it is a version incompatibility problem, specify the version number of Webpack5.0.0 and babel7.0.0 to reinstall; if it is a dependency conflict problem, for example, packageA and packageB depend on different versions of packageC at the same time, it is necessary to analyze the conflicting dependencies and take corresponding solutions. Common solutions include:

[0067] 1. Exclude conflicting dependencies: You can use the exclude keyword in the project's dependency declaration to exclude conflicting dependencies. For example, in Maven, you can add <exclusions>Tags to exclude specific sub-dependencies.

[0068] 2. Force a specific version: Use <dependencymanagement>Tags define the version numbers of all dependencies in the project, ensuring that consistent dependency versions are used throughout the project.

[0069] 3. View the dependency tree and exclude it manually: Use tools such as Maven's dependency:tree command or IDEA's dependency tree function to view the conflicting class jars and manually exclude them.

[0070] 4. Use plugins to analyze and resolve dependency conflicts: Maven or Gradle provides plugins to help analyze and resolve dependency conflicts, which can be used to automate the process.

[0071] Step S5 is configured in webpack.config.js including:

[0072] Entry: defines the main entry file of the application, usually src / main.js;

[0073] Output: Set the build output path and file name, such as dist / main.js;

[0074] Module rules: Configure Vue Loader for .vue files; for JavaScript, configure Babel Loader to handle ES6+ syntax; the following is an example configuration:

[0075] module:{

[0076] rules:[

[0077] {test: / \.js$ / ,use:'babel-loader'} ]

[0079] }

[0080] For CSS, use css-loader and style-loader together, and configure MiniCssExtractPlugin; for images, use url-loader; for fonts, use file-loader;

[0081] Configure plugins: Use HtmlWebpackPlugin to automatically generate HTML files and insert built JS and CSS references; configure TerserPlugin for code compression, which is expected to reduce the size of JavaScript code by 30%-50%; configure CopyWebpackPlugin to copy static resources; configure DefinePlugin to configure global variables; configure ProvidePlugin to configure automatic module import; configure VueLoaderPlugin to call vue-loader to process vue files; configure BundleAnalyzerPlugin to view module thermal analysis charts.

[0082] Cache configuration: cache chunk, eslint, babel, style-lint;

[0083] Module parsing configuration: configure aliases and parse extensions;

[0084] Optimization configuration: After configuring TerserPlugin for code compression; configuring MiniCssExtractPlugin to extract CSS to a separate file can speed up page loading and reduce initial rendering time by about 10%; the following is a related configuration example:

[0085] optimization:

[0086] minimizer:

[0087] newTerserPlugin({}),

[0088] newMiniCssExtractPlugin({

[0089] filename:'[name].css',

[0090] chunkFilename:'[id].css'

[0091] }) ]

[0093] }

[0094] Configuring ImageMinimizerPlugin to compress images can reduce the image size by an average of 20%-30%; configuring splitChunks to separate the code, configuring runtimeChunk to manage chunkhash values ​​to generate corresponding chunk dependency networks, enhancing the efficiency of browser cache utilization, reducing the amount of repeatedly loaded code, and improving page loading performance.

[0095] In step S5:

[0096] If a syntax error occurs during the configuration process, webpack will give a corresponding error prompt during the build; at this time, you need to carefully check the syntax and parameter settings in the configuration file to ensure that they comply with the webpack specifications.

[0097] The definition of the script in step S7 includes four script commands, and the four script commands include: serve.dev command, serve-prod command, build:dev command and build-prod command;

[0098] Among them, the serve.dev command starts webpack-dev-server in the development environment, the serve-prod command starts the service in the production environment, and the build:dev command and build-prod command are used for building development and production environments respectively.

[0099] "scripts":{

[0100] "serve.dev":"node. / node_modules / webpack-dev-server / bin / webpack-dev-server.js--env runEnv=dev",

[0101] "serve-prod":"webpack serve--env runEnv=prod",

[0102] "build:dev":"webpackbuild--env runEnv=dev",

[0103] "build-prod":"webpackbuild--env runEnv=prod"}

[0104] This scaffolding can run on Windows, Mac and Linux operating systems.

[0105] The above embodiments are only used to illustrate the technical method of the present invention rather than to limit it. Although the present invention has been described in detail with reference to the preferred embodiments, those skilled in the art should understand that the technical method of the present invention may be modified or replaced by equivalents without departing from the spirit and scope of the technical method of the present invention.< / dependencymanagement> < / exclusions>

Claims

1. A method for building an automated development scaffold based on webpack, characterized in that: include: Step S1, environmental preparation; Build a JavaScript runtime environment by installing Node.js and the NPM package management tool; Step S2, install dependencies; The installation dependencies include process processing plug-ins; Step S3, create a project structure; A project created in the JavaScript runtime environment, wherein the project structure includes: a src directory, a public directory, and a build directory; Step S4, project initialization; Use the command line tool to enter the project directory. The command line tool is Command Prompt, and run the npminit command to initialize a new Node.js project and generate a package.json file containing basic metadata information such as the project name, description, and version. Step S5, configure the webpack.config.js file; Configure the Webpack file in the root directory of the project and define the entry and output for the Webpack file; The Webpack file includes webpack.config.js; Step S6, developing a server; The development server configures webpack-dev-server, sets up a proxy, enables hot module replacement, and configures the port; Step S7: build and deploy; Add the scripts field to package.json and define the script commands.

2. The method for building an automated development scaffold based on webpack according to claim 1, characterized in that: In step S2, the necessary dependencies for installation include Webpack plug-in, webpack-cli command tool, webpack-merge, webpack-bundle-analyzer, html-webpack-plugin to generate index.html file, css-loader, style-loader, css-minimizer-webpack-plugin, MiniCssExtractPlugin, babel tool, postcss tool, sass, typescript, fork-ts-checker-webpack-plugin, image-minimizer-webpack-plugin, and thread-loader.

3. The method for building an automated development scaffold based on webpack according to claim 1, characterized in that: In step S2, if the dependency installation fails during the installation process, first check whether the network connection is normal; if the network is normal, check the error information to determine whether it is a version incompatibility or dependency conflict problem; when it is determined to be a version incompatibility problem, specify the version number adapted to Webpack5.0.0 and babel7.0.0 to reinstall; when it is determined to be a dependency conflict problem, packageA and packageB depend on different versions of packageC at the same time, analyze the conflicting dependencies, adjust the version or exclude one of the conflicting dependencies.

4. The method for building an automated development scaffold based on webpack according to claim 1, characterized in that: In step S3, the src directory is used to store the development files of the project, including components and page logic; the public directory is used to store static resources, including website icons, favicon and HTML entry files; and the build directory is used to store the webpack configuration file webpack.config.js.

5. The method for building an automated development scaffold based on webpack according to claim 1, characterized in that: The configuration of step S5 in webpack.config.js includes: Entry: defines the main entry file of the application, usually src / main.js; Output: Set the build output path and file name, such as dist / main.js; Module rules: configure Vue Loader for .vue files; for JavaScript, configure Babel Loader to process ES6+ syntax; for CSS, use a combination of css-loader and style-loader, and configure MiniCssExtractPlugin; for images, use url-loader; for fonts, use file-loader; Configure plugins: Use HtmlWebpackPlugin to automatically generate HTML files and insert built JS and CSS references; configure TerserPlugin for code compression; configure CopyWebpackPlugin to copy static resources; configure DefinePlugin to configure global variables; configure ProvidePlugin to configure automatic module import; configure VueLoaderPlugin to call vue-loader to process vue files; configure BundleAnalyzerPlugin to view module thermal analysis charts; Cache configuration: cache chunk, eslint, babel, style-lint; Module parsing configuration: configure aliases and parse extensions; Optimization configuration: configure TerserPlugin for code compression, configure MiniCssExtractPlugin to extract CSS to a separate file, configure ImageMinimizerPlugin to compress images, configure splitChunks for code segmentation, and configure runtimeChunk to manage chunk hash values ​​to generate corresponding chunk dependency networks.

6. The method for building an automated development scaffold based on webpack according to claim 1, characterized in that: In step S5: If a syntax error occurs during the configuration process, webpack will give a corresponding error prompt during the build; at this time, check the syntax and parameter settings in the configuration file to make the configuration conform to the webpack specifications.

7. The method for building an automated development scaffold based on webpack according to claim 1, characterized in that: The definition of the script in step S7 includes four script commands, and the four script commands include: serve.dev command, serve-prod command, build:dev command and build-prod command; Among them, the serve.dev command starts webpack-dev-server in the development environment, the serve-prod command starts the service in the production environment, and the build:dev command and build-prod command are used for building development and production environments respectively.

8. The method for building an automated development scaffold based on webpack according to claim 1, characterized in that: This scaffold can run on Windows, Mac and Linux operating systems.

Images