SoFunction
Updated on 2025-04-13

vue webpack multi-page construction example code page 2/3

vue webpack multi-page construction example code page 2/3

Updated: September 11, 2018 14:32:05 Author: ccyinghua
This article mainly introduces the example code of vue webpack multi-page construction. The code is simple and easy to understand, very good, and has certain reference value. Friends who need it can refer to it
, //Template path inject: true, // excludeChunks allows skipping certain chunks, and chunks tells the plugin which entry to refer to // How to better understand this? For example: For example, this demo contains two modules (index and about), the best thing is of course to introduce the js you need for each module. // Instead of introducing all js to each page, you can remove the following excludeChunks, then npm run build, and then you will know by looking at the compiled sum // filter: filter the data and then return the data that meets the requirements. It is to obtain each key in the JSON object excludeChunks: (pages).filter(item => { return (item != page) }) } // You need to generate several html files, and configure several HtmlWebpackPlugin objects (new HtmlWebpackPlugin(conf)) }

(4) Modify build/

Delete the original HtmlWebpackPlugin related content in the file

...
// generate dist  with correct asset hash for caching.
// you can customize output by editing /
// see /ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
 filename: ,
 template: '',
 inject: true,
 minify: {
  removeComments: true,
  collapseWhitespace: true,
  removeAttributeQuotes: true
  // more options:
  // /kangax/html-minifier#options-quick-reference
 },
 // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 chunksSortMode: 'dependency'
}),
...

Add at the end of the file

var pages = ('./src/entry/*/*.html')
for(var page in pages) {
 // Configure the generated html file, define the path, etc. var conf = {
 filename: page + '.html',
 template: pages
                            

Previous page123Next pageRead the full text
  • vue
  • webpack
  • page
  • Build

Related Articles

  • Vue implements the packaging of carousel diagram components

    The packaging of Vue carousel diagram components can be implemented through packaging components, using plug-ins, configuration, etc., mainly including image preloading, timed carousel, infinite scrolling, gesture sliding, responsive layout and other functions. The implementation method can use Vue's life cycle functions, custom events, computing attributes and other technologies.
    2023-04-04

  • A brief discussion on vue loading optimization strategy

    This article mainly introduces a brief discussion of vue load optimization strategies. The editor thinks it is quite good. I will share it with you now and give you a reference. Let's take a look with the editor
    2019-03-03

  • Regarding the caching of component information of Vue implementation

    This article mainly introduces relevant information about the cache of component information of Vue implementation. Friends who need it can refer to it.
    2017-08-08

  • Solve the problem of vue using the() method to initiate multiple requests on the console to report errors

    This article mainly introduces the problem of solving the problem of errors reported by vue using the() method to initiate multiple requests on the console. It is of good reference value and hopes it will be helpful to everyone. Let's take a look with the editor
    2020-11-11

  • How to splice route paths in vue

    This article mainly introduces how to splice strings in Vue, which has good reference value. I hope it will be helpful to everyone. If there are any errors or no complete considerations, I hope you will be very encouraged.
    2023-12-12

  • el-input binds keyboard keys (key modifier) ​​in vue

    This article mainly introduces the el-input binding keyboard keys (key modifiers) in vue. The example code is introduced in this article in detail, which has certain reference learning value for everyone's study or work. Friends who need it, please learn with the editor below.
    2020-07-07

  • Analysis of the principle of Vue responsive system dependency collection process

    When Vue is initialized, it will intercept the property getter and setter, create a dep for each value of the object and use () to store the watcher list of the property value. This article mainly introduces the analysis of the Vue responsive system dependency collection process. Friends who need it can refer to it.
    2022-06-06

  • How to develop a Vue using hybrid Mixins and plug-ins

    This article mainly introduces how Vue uses mixed Mixins and plug-ins to develop detailed explanations. The article introduces the sample code in detail, which has a certain reference learning value for everyone's learning or work. Friends who need it, please learn with the editor below.
    2020-02-02

  • Implementation of vue+element-ui table custom column template

    This article mainly introduces the implementation of the vue+element-ui table custom column template. The problem of element-ui table custom column template is perfectly solved through slots. It has certain reference value. If you are interested, you can learn about it.
    2024-05-05

  • How to automatically scroll to the top when using vue-router to switch pages in vue

    This article mainly introduces the implementation method of the scrollbar automatically scrolling to the top when using vue-router to switch pages in the vue project. It is generally implemented using the Window scrollTo() method. This article briefly introduces the use of crollTop. Friends who need it can refer to it.
    2017-11-11

Latest Comments