This is the 21st day of my participation in the August Text Challenge.More challenges in August

Webpack configuration

  • Entry and output configurations

The previous article introduced the four core concepts of WebPack: portals, exits, Loaders, and plug-ins. Let’s manually configure WebPack around these four core concepts

  • By default when we run the WebPack package, webpack will use index.js under SRC as the entry file;
  • By default, the package produces a dist directory that generates a main.js file
  • If we want to manually specify the entry file and output directory and file, we can manually modify the configuration file to do so
    • Create a new webpack.config.js file under the Webpack project. This file is a configuration file that will be checked automatically when the webpack command is executed.
    • This file follows the commonJS specification for Node and is exported through module.exports
const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
	entry:"./src/index2.js".// use index2 as the entry file
	output: {filename:'bundle.[hash:8].js'.// Generate a random 8-bit hash number in parentheses to avoid caching
		path: path.resolve(__dirname, "dist") // Output directory __dirname current path, resolve merge two paths
	},
	plugins: [new CleanWebpackPlugin()// You can also set what can and cannot be deleted]}Copy the code
  • Html-webpack-plugin plugin – Automatically introduces packaging files
  • Each time a new export file is generated after packaging, we have to modify the HTML template file to re-introduce the new js file, each operation is very troublesome, then we can use the HTMl-webpack-plugin to automatically help us to import the packed JS file into the HTML template
const path = require('path');
const {HtmlWebpackPlugin} = require('html-webpack-plugin');
module.exports = {
	entry:"./src/index2.js".// use index2 as the entry file
	output: {filename:'bundle.[hash:8].js'.// Generate a random 8-bit hash number in parentheses to avoid caching
		path: path.resolve(__dirname, "dist") // Output directory __dirname current path, resolve merge two paths
	},
	plugins: [new HtmlWebpackPlugin()// Automatically import the packed JS file into the HTML template file]}Copy the code
  • Clean – Webpack-plugin plugin – Automatically clean up packaging files
  • Dist directory will be generated by default when webpack is run each time, but the contents will not be emptied each time, and the files that were packed last time will still be retained. As a result, more files will be generated with more packaging times. In this case, a plug-in (clean-webpack-plugin) is needed to remove the old files
const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
	entry:"./src/index2.js".// use index2 as the entry file
	output: {filename:'bundle.[hash:8].js'.// Generate a random 8-bit hash number in parentheses to avoid caching
		path: path.resolve(__dirname, "dist") // Output directory __dirname current path, resolve merge two paths
	},
	plugins: [new CleanWebpackPlugin()// You can also set what can and cannot be deleted]}Copy the code
  • Webpack-dev-server – Creates a local server, automatically rebuilds and automatically opens the browser
  • Install: NPM install webpack-dev-server -d
  • The webpack-dev-server plugin automatically creates a local service that provides a runtime environment for our code, like IIS/ Apache, etc
  • You can also use the plug-in to automatically build and open the browser
  • To use this plug-in, you need to configure the startup command in the package.json file in addition to the webpack.config.js configuration file.
  • Then NPM run [devServer] can be directly started
//webpack.config.js
module.exports = {
	devServer: {// All contents are stored in the root directory
		port: 8080.// Set the port number
		open: true.// Automatically open the browser
		compress: true.// Code compression
		contentBase:"static".// Static resource file
		hot: true.// Automatically refresh}}//package.js
{
	scripts: {"devserver":"webpack-dev-server"}}Copy the code
  • Multi-entry, multi-egress, multi-HTML page file configuration
  • Sometimes when the project is large and complex, there may be more than one entry file. For example, in a project, both index.js and other.js files need to be used as entry files, so we need to configure the webpack.config.js configuration file to support multiple entry files
  • Simply configure entry as an object key-value pair
const path = require('path');
const {HtmlWebpackPlugin} = require('html-webpack-plugin');
module.exports = {
	entry: {index:"./src/index.js".other:"./src/other.js"
	}
	output: {filename:'[name].js'.// Output file. The name in parentheses stands for index or other in the entry above
		path: path.resolve(__dirname, "dist") // Output directory __dirname current path, resolve merge two paths
	},
	plugins: [new HtmlWebpackPlugin({
			template:"./index.html".// Dependent template file
			hash:true.minify: {removeAttributeQuotes: true.// Delete quotes
				collapseWhitespace: true.// Delete Spaces
			},
			filename:'index.html'.// The packaged HTML file name
			chunks: ['index']// Add the wrapped index.js to index.html
		}),// Automatically import the packed JS file into the HTML template file
		new HtmlWebpackPlugin({
			template:"./other.html".// Dependent template file
			hash:true.minify: {removeAttributeQuotes: true.// Delete quotes
				collapseWhitespace: true.// Delete Spaces
			},
			filename:'other.html'.// The packaged HTML file name
			chunks: ['other']// Import the packaged other.js to other.html
		}),// Automatically import the packed JS file into the HTML template file]}Copy the code

If there are many HTML pages in the above code, then you need to configure multiple HtmlWebpackPlugin, so it is very troublesome, so we can encapsulate a method, behind if there are many HTML pages between us to call the encapsulated method can be.

let htmlPlugins = ['index'.'other'].map(chunkName= >{
	return new HtmlWebpackPlugin({
		template: `./src/${chunkName}.html`.filename:`${chunkName}.html`.chunks:[chunkName]
	});
});
plugins:[
		...htmlPlugins
	]
Copy the code