Then your configuration file will become very large, for example, the directory configuration is as follows
then in webpack.config.js you may write so much code
Therefore, if faced with a project with 100+ different interfaces and a lot of js scattered fragments, some students may immediately say to the configuration file
what the fuck！！。。。。。
so~
Actually this problem we can solve immediately with a simple fs module
For example, your directory structure is still like this
So if we mainly use html templates
The project src source code can be dynamically read
Use the fs module to write the following code
var htmlWebpackPlugin = require('html-webpack-plugin');
var extractTextPlugin = require('extract-text-webpack-plugin');
var fs = require('fs');
// source file path
var basePath = '/src';
//html template path
var tplPath = '/ tpl';
//js template path
var jsPath = '/ js';
//View file generation path
var viewPath = '../views';
//Set the json file of the entry according to the object of the file structure
function getEntry(files){
var entry = {};
for (var i = 0; i
In this way, adding pages to your project no longer requires modifying configuration files
Now we will directly insert a new set of interfaces
Below is the file content
Ok, the test run results
So, the purpose of using webpack is to let programmers focus on writing code, so
In the process of using webpack, we must fully learn its various excellent functions
and use it in the project
postscript:
The webpack tool is a very powerful web packaging tool.
Although a lot of cumbersome processes and technologies are required in the process of configuration and construction,
But if you really understand the use of webpack, I believe that everyone who has used it will deeply understand
Attracted by his elegance, programmers who have used webpack will definitely abandon traditional web development methods
Because we use it, we really don't have to think about a lot of problems