This is not so convenient if you are developing multi-page projects and you have to configure WebPack yourself.

The difference between a single page project and a multi-page project is that all the JS, CSS and other resources in a single page project only need to be imported into the entry HTML file. You don’t even need to configure it. Plug-ins like htMl-webpack-plugin automatically insert JS and CSS into the index. HTML.

Under the multi-page project, in addition to some shared resources, each page also needs to introduce separate JS, CSS and other files for each page.

The key to this distinction lies in the configuration of the HTML-webpack-plugin.

First, we assume that all the entry files are in SRC/HTML /, so that we can read the names of all files in this directory synchronously via nodejs’ fs module:

let htmlArr = fs.readdirSync(path.resolve(__dirname, 'src/html'));
Copy the code

HtmlArr will hold an array of all file names in an HTML directory, and then we will get the entry configuration object for Webpack and the configuration object for htMpack-plugin by iterating through this array:

let entrys = {};
let htmlPlugins = [];
 
for(letItem of htmlArr){// We just need the file name in front of the.htmllet name = item.split('.html') [0]; htmlPlugins.push(new WebpackHtmlPlugin({ filename: item, template: path.resolve(__dirname, `src/html/${item}// This configuration will automatically insert js chunks you specify in the generated HTML: ['common', name] })); Entrys [name] = './ SRC /js/${name}.js`;
};
Copy the code

Next pass the entrys and htmlPlugins configuration objects generated above into the WebPack configuration:

Module.exports = merge(base, {// entry configuration entry: entrys, devtool:"cheap-module-eval-source-map",
	devServer: {
		contentBase: path.join(__dirname, "dist"),
		compress: true,
		port: 8080,
		//hot: true,
		index: 'index.html',
		open: true}, plugins: [// pass html-webpack-plugin configuration object...htmlPlugins,]});Copy the code

The above configuration is in my development environment, the production environment will have a little more content. Once configured and compiled, you’ll find that the HTML-webpack-plugin generates multiple page entry HTML for you:




One of the key features of the htMl-webpack-plugin is that it uses node’s FS module to synchronously read the names of all the files in the HTML folder, so that when you add a page entry to the folder, webpack automatically reads it:

Of course, these are basic configurations, but they’re ready to go.

Here I uploaded my configuration to Github: github.com/CSLLG/muti-…

— — — — — — — — — — — — — — — — — — — — — — — — — — — on August 26, added content — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

More configurations have been added today, as follows:

2018.8.26 Latest update

1. Improve the processing function of urL-loader for image resources

2. Add htMl-withimg-plugin to handle images imported by the SRC attribute of the IMG tag in HTML

3. Migrate all configuration files to ‘./build/’ to make the configuration files look cleaner

4. Add the process.evn.NODE_ENV environment configuration

5. Add mini-CSs-extract-plugin to separate CSS files from bundle.js into a separate CSS file

Record of problems and solutions during this configuration adjustment:

Can not find modlue file-loader can not find modlue file-loader can not find modlue file-loader The official document says that “file-loader is used by default when the image size exceeds the limit”, but I wonder whether the new version of URl-loader removes the file-loader function.

2. The extract-text-webpack-plugin is no longer recommended for CSS modules in Webapck4.0 + and above, but for mini-CSS-extract-plugin

The problem is that putting CSS files in dist/ CSS/will cause the path of the image referenced in CSS to be wrong. Many people on the web recommend that the solution is to add publicPath to output configuration: ‘.. / ‘configuration,

In fact, this will lead to the wrong path in all files except the CSS reference image path, and even cause the CSS file to introduce errors.

The optimal solution is to introduce MiniCssExtractPlugin. The loader when using the object, and in the options directory to add publicPath: ‘.. / ‘configuration

For details, see the configuration file

Other problems and corresponding solutions will be discussed in an independent article, thank you

Finally, thank you for your patience to read, if it is helpful to you can click a like oh!