Catch it all - Webpack project packaging 1

[[427986]]

This article is reprinted from the WeChat public account "Front-end Gravitation", the author is Yichuan. Please contact the WeChat public account "Front-end Gravitation" to reprint this article.

1. Basic concepts of webpack

1.1 What is webpack?

Webpack is a static module bundler for modern JS applications, a front-end resource building tool.

• What is a front-end resource building tool? The browser does not recognize web resources such as sass, less, ts, and js advanced syntax. Only through a building tool such as webpack can they be compiled one by one into js files that the browser can read.
• What is a static asset bundler? When webpack processes your application, it recursively builds a dependency graph, bundling all the modules your application needs into one or more bundles.

1.2 What can webpack be used for?

As the most commonly used front-end resource building tool for front-end engineers, webpack can solve many pain points and difficulties encountered in development.

• It can solve the cross-domain problem when calling the backend interface without relying on the backend
• Automatically refresh the browser after code changes, no need to clear the cache if there is one
• It can easily solve the compatibility issues of new CSS and JS features on various browsers and improve your development efficiency
• There is no need to use an additional packaging platform or write packaging scripts, nor is there any need to package and compress js, css, etc. separately

Of course, webpack is more powerful than that. It has many simple and convenient configurations that can improve your development efficiency.

2. Webpack core configuration

The commonly used core configurations are as follows:

• Entry
• output
• Loader
• plugin
• mode
• Other configurations, etc.

Of course, the above are the commonly used configurations. For other requirements, you can find the official documentation for reading: [https://webpack.docschina.org/concepts/]

2.1 Entry

The entry undoubtedly refers to which file or files webpack uses as the starting point for packaging and which module to use to build the internal dependency graph. webpack will analyze the dependencies between modules based on the dependency graph and then package them.

 // Single file entry, string format: package into a chunk, output a bundle file, of course, not very flexible in actual development
 entry: "./src/index.js"   
 
 //Multiple file entries, array format: all files eventually form a chunck, outputting a bundle file
 entry:[ "./src/index.js" , "./src/main.js" ] 
 
 //Multiple file entries, object form: Multiple entry files form multiple chunks, and finally output multiple bundle files, and the name of the chunk is the key value of the object. Although this method is more cumbersome, it has strong scalability, and the configuration can be reused or combined with other configurations.
 entry:{
 index : "./src/index.js" ,
 main: "./src/main.js"  
 }

Of course, there are many other configuration properties when describing the entry object, please refer to the documentation for details.

• dependOn: The entries that this entry depends on. They must be loaded before this entry is loaded.
• filename: Specifies the name of the file to be output.
• import: Modules to be loaded at startup.
• library: Specify the library option to build a library for the current entry.
• runtime: The name of the runtime chunk. If set, a new runtime chunk will be created. Since webpack 5.43.0 this can be set to false to avoid a new runtime chunk.
• publicPath: Specifies a public URL for the output files of this entry point when they are referenced in a browser. See output.publicPath.

2.2 Output

Output (output) is obviously telling webpack where to output the packaged resource bundles and how to name these output files. Of course, the main file defaults to "./dist/main.js", and other files are placed in the "./dist" folder.

 //Package export
 output :{
 // Output folder path
    path:path.resolve(__dirname, "dist" ),
    // file name
 // filename: "bundle.js"  
 // If there are multiple entry points, placeholders should be used to ensure that each file has a unique name
 filename: "[name].js" ,
 // All resources introduce public path prefixes, be cautious when used in production environments
 publicPath: "" , //When compiling, if the address of the output file is unknown, leave it blank and dynamically configure it through the __webpack_public_path__ of the entry point file at runtime.
    chunkFilename: "[contenthash:10].chunk.js" ,
 clean: true , //Clear the output directory before packaging, which is equivalent to the function of the clean-webpack-plugin plug-in.
 /* When using Webpack to build a library that can be imported and used by other modules, you need to use library */
 library: {
 name : "[name]" , //The variable name exposed to the outside world by the entire library
 type: "window" //Library exposure method
 }
 }

Remember: Even though there can be multiple entry origins, only one output configuration can be specified.

2.3 Loader

As you know, webpack can only parse js and json files, which is its inherent ability. The ability of loader is to allow webpack to process other types of files and convert them into module files js or json that webpack can parse, so as to provide them to the application and generate them into the dependency graph.

 // Loader
 loader:{
 // Match file types, following regular expression syntax
 test:/\.css/,
 // Define which loaders to use during conversion, processing from bottom to top and from right to left
 use:[
 "style-loader" , //Create a style tag, extract the style resources in the js file, and add it to the head tag of the index.html file
 "css-loader" , //Convert the css file into commonjs format and load it into the js file
 {
 loader: "postcss-loader" , //css compatibility processing, remember: you need to configure browserlist in the package.json file in advance
 options:{
 postcssOptions:{
            ident: "postcss" ,
 // postcss-preset-env plugin: helps postcss find the browserslist configuration in package.json and loads the specified compatibility style according to the configuration
            plugins:[require( "postcss-preser-env" )()]
 }
 }
 }
 ]
 },
 {
 test: /\.js$/,
 // Note that you need to configure browserslist in package.json, otherwise babel-loader will not take effect
 //js compatible processing babel
      loader: "babel-loader" ,
 // Recommended way to write a rule when only one loader is used
 options:
 presets: [
 [
 "@babel/preset-env" ,
 // Default: instruct babel to do what kind of compatibility processing
 {
                  useBuiltIns: "usage" ,
 // Load on demand
 corejs: {
                      version: "3" ,
 },
                  targets: "defaults" ,
 }
 ]
 ]
 }
 }

2.4 Plugin

Plugin: A plugin is actually an auxiliary loader to perform a wider range of tasks, from packaging optimization, file compression, resource management, and re-injection of environment variables.

 // CleanWebpackPlugin helps you automatically clean up dist files when packaging, which is convenient for learning
 // const { CleanWebpackPlugin } = require( "clean-webpack-plugin" ); // Starting from webpack5, webpack has built-in this function, just configure clear to true in ouput 
 
 // HtmlWebpackPlugin helps you create HTML files and automatically imports the bundled output files. Supports HTML compression.
 const HtmlWebpackPlugin = require( "html-webpack-plugin" ); 
 
 // This plugin extracts CSS into separate files. It will create a CSS file for each chunk. Need to be used with loader
 const MiniCssExtractPlugin = require( "mini-css-extract-plugin" ); 
 
 // This plugin will search for CSS resources during the Webpack build process and optimize\minify CSS
 const OptimizeCssAssetsWebpackPlugin = require( "optimize-css-assets-webpack-plugin" ); 
 
 // For vue-loader V15 and above, you need to introduce the VueLoaderPlugin plug-in, which is used to apply the js, css and other rules you defined to the vue file.
 const { VueLoaderPlugin } = require( 'vue-loader' ) 
 
 module.exports = {
 module: {
 rules:
 {
                test: /\.vue$/,
                loader: "vue-loader"  
 },
 {
                test: /\.css$/,
 use: [
 // The function of MiniCssExtractPlugin.loader is to extract the style resources (in the js file) processed by css-loader separately to become a css style file
 MiniCssExtractPlugin.loader, //Used in production environment, style-loader is recommended for development environment
 "css-loader" ,
 ],
 },
 ],
 },
 plugins: [
        new HtmlWebpackPlugin({
            template: "index.html"  
 }),
        new MiniCssExtractPlugin({
            filename: "css/built.css" ,
 }),
        new OptimizeCssAssetsWebpackPlugin(),
        new VueLoaderPlugin(),
 ]
 }

2.5 Mode

The mode is used to tell webpack that it needs to use the configuration in the corresponding environment mode, which can be production, development or none. Of course, the default is production.

There are two ways to use the mode mode. You can set the mode option in the configuration object.

 module.exports = {
 mode: "development"  
 }

It can also be configured in the cli in package.json:

 webpack --mode=development  

The official documentation says:

If you want to change the bundling behavior based on the mode variable in webpack.config.js, you have to export the config as a function instead of exporting an object:

 ar config = {
 entry: './app.js' ,
 //...
 }; 
 
 module.exports = (env, argv) => {
  if (argv.mode === 'development' ) {
    config.devtool = 'source-map' ;
 } 
 
  if (argv.mode === 'production' ) {
 //...
 } 
 
 return config;
 };

Other common configurations:

 module.exports = {
 // Rules for parsing modules:
 resolve: {
 //Configure the parsing module path alias: the path can be abbreviated.
 alias: {
 "@" : path.resolve(__dirname, "src" )
 },
 //Configure the file path suffix to be omitted. By default, js and json are omitted. These are also the two file types that webpack recognizes by default.
 extensions: [ ".js" , ".json" , ".css" ], // add new css file
 // Tell webpack which directory to look for when parsing the module
 // This configuration explicitly tells webpack to go directly to the previous level to find node_modules.
        modules: [path.resolve(__dirname, "../node_modules" )],
 },
 // devServer (configuration in development environment):
 devServer: {
 // Directory to run the code
        contentBase: path.resolve(__dirname, "build" ),
 // Enable gzip compression for each static file
 compress: true ,
 host: "localhost" ,
 port: 5000,
 open : true , // automatically open the browser
 hot: true , // Enable HMR function
 // Set up the proxy
 proxy: {
 // Once devServer (port 5000) receives a request for /api/xxx, it will use the service started by devServer to forward the request to another server (3000)
 // This is to solve the cross-domain problem in development
 api: {
                target: "http://localhost:3000" ,
 // When sending a request, rewrite the request path: /api/xxx --> /xxx (remove /api)  
                pathRewrite: {
 "^api" : "" ,
 },
 },
 },
 }, 
 
 // optimization (configuration in production environment)
 optimization:
 // Extract common code
 splitChunks: {
 chunks: "all" ,
 },
 minimizer:
 // Configure the compression scheme for the production environment: js and css
            new TerserWebpackPlugin({
 // Multi-process packaging
                parallel: true ,
                terserOptions: {
 // Start source-map
                    sourceMap: true ,
 },
 }),
 ],
 },
 };

3References

webpack official documentation

Webpack5.0 Learning Summary-Basics