has recently been trying to build a general multi-page and multi-entry application using webpack4.
both the common component and the third-party node _ modules are extracted through splitChunks. Look, the results are separated.
the html file for each entry page is specified through html-webpack-plugin.
the question arises, how to dynamically add chunk js files separated from splitChunks to html? Is there a ready-made plug-in, or can you only separate the file and add it manually?
the newly separated chunk block can specify the desired chunk block in the html template. The following figure shows my configuration
common/common.js common/vendor.js chunk
specify a specific block in each html template
I hope I can help you!
you can extract the entry configuration from the htmlwebpackplugins configuration by traversing.
you can refer to webpack-mutipage-tempalte
this is the entry configuration section
//
const glob = require('glob')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { resolve } = require('./utils')
const entries = glob.sync(resolve('src/page/**/*.js'))
const entriesOpt = {}
const pluginsOpt = []
const faviconPath = resolve('src/image/favicon/favicon.png')
entries.forEach(item => {
const chunkName = item.match(/src\/page\/(.+)\.js/)[1]
const templatePath = item.replace(/.js$/, '.html')
let fileName = templatePath.match(/src\/(page\/.+\.html$)/)[1]
entriesOpt[chunkName] = item
pluginsOpt.push(
new HtmlWebpackPlugin({
favicon: faviconPath,
filename: fileName,
template: templatePath,
chunks: ['vendor', 'manifest', 'common-styles', chunkName],
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
}
})
)
})
const config = {
entry: entriesOpt,
plugins: pluginsOpt
}
module.exports = configwebpack project upgrade version configuration is as follows: webpack.json "scripts": { "dev": "webpack --mode development", "build": "webpack --mode production", "watch": &quo...
recently I watched the teaching video of vue2.0 high imitation music webapp, but because the version of vue-cli (vue-cli version is 2.8.2) is different, there is no dev-server.js file in my build directory. On the video, the request for cross-domain da...
I referenced the components of element and wanted to transform it into my own UI library. After packaging, I introduced the project, npm run dev and reported the following error: introduced package: node_modules ipst dist ipst.js error: Uncaught T...
A rookie at the front end is now developing a company project, using the development mode of the vue build tool, and then there are some problems when debugging the interface with the back end. The server software used by the company is apache,. Once a c...
clone has a node+react framework and intends to learn server-side rendering, but npm install cannot start it after installing dependencies. Here is Debug.log 0 info it worked if it ends with ok 1 verbose cli [ C: Program Files nodejs node....
npm run dev: and the port number is still 8080, not 5555, so ask God for advice on where the problem is. node version is 8.10.0 npm version is 5.6.0 ...
satisfies both the beginning of api and the need to forward to aaa, api order to bbb. api : { target: http: dev.api.aaa.cn , changeOrigin: true }, api order : { target: http: dev.api.bbb.cn , changeOr...
A sudden problem with vue-cli scaffolding today after npm run dev, there was a problem, and the final result was also successful, but the page could not be opened at all excuse me, what is the reason for this? has anyone encountered it ...
how does vscode start webpack packaging? actually I want to debug webpack (not the webpack project, but webpack itself). I want to see how webpack works, that is, I make breakpoints in the node_modules _webpack@1.13.3@webpack bin webpack.js file and wa...
*start* import aaa ; *end* let a={ b: c *start* d: e *end* } now you want to match all the content from * start* to * end* , and replace it with ", , that is, all that s left in the above code is: . let a={ b:...
the technology stack is: there is no problem for webpack+vue+express, programs to run directly in the development environment. Then plan to separate the front and back end code, and configure the project to the production environment, so webpack is pack...
if there is an ejs sentence in my template file new HtmlWebpackPlugin({ filename: .. views index.html , template: . src templates index.html }) if you execute it directly, you will get an error ReferenceError: user is not defined . but I...
package file if (config.build.outputZip) { var ZipPlugin=require ( zip-webpack-plugin ) webpackConfig.plugins.push () new ZipPlugin({ path:config.build.assetsRoot, filename: output.zip }) ) } error message compiler.hooks.emit.tapAsync...
isn t the js code automatically executed by loading the js file directly? Why does webpack need to wrap the js code in a jsonp way? Is designed to avoid namespace conflicts? ...
scenario 1 const config = { entry: {}, output: {}, module: {}, plugins: {}, } webapck(config, (err, stat) => {}) The products of and are inconsistent, mainly because there is no .html file generated by html-webpack-plugin in scenario 1 ...
Mobile cannot be accessed through ip during vue-cli development configuration is shown in the following figure: I have also tried to change host to 0re0j0j0j0j0j0jinghejinghe PC, but the mobile phone (the same local area network) can not be opene...
are there any best practices recommendations for jquery and arttemplate to build webAPP? given that the SEO, backend is rendered with node, is there a good case reference? ...
as the title: how to configure the domain name with webpack devServer, and use the domain name to access the local server without ip. ...
how to solve this problem is to copy less modules? Compared with the node_modules folder, there is no difference. Where does name copy the cross-env and where to copy it? or is there any other way to solve this problem? (evil corporate computers cannot ...
I developed a front-end project, npm run build with vue-cli scaffolding and wanted to use node.js to build a http server to view the project, but prompted the front-end js code to go wrong. There is no error in npm run build server.js Code ...