Note: WebPack is installed with a default configuration file. The default configuration file for official Settings will be used only if no custom configuration file is specified. So you don’t see the WebPack configuration at first, you have to write it yourself.

Let’s remember the name webpack.config.js, which is the name of the configuration file that WebPack recognizes. Then we will write our own configuration file, and then let webpack to me is dragon to me, to me obediently use the configuration file I wrote!

Webpack --config The name (address) of the configuration file you wroteCopy the code

The separate Webpack directive looks for the webpack.config.js file in the current address as the configuration and executes the default configuration if it doesn’t find it.

The configuration file

    module.exports = {
        entry: './src/index.js'.output: './dist/main.js'.mode: 'production'.module: {
            rules: [{
                test: /\.txt$/,
                use: 'raw-loader'}},plugins: [
            new HtmlwebpackPlugin({
                template: './src/index.html'}})]Copy the code

Node runs this js module to configure webpack. As an empty configuration: Only the entry and output attributes are required to specify the entry and output files.

Entry and output

Obviously, Entry tells WebPack the address of the entry file. The entry file is the first JS file to be executed when all project JS codes are to be executed. It can be understood that all JS are related to each other into a tree. The entry file is the root of the tree. However, when we use Webpack, we definitely don’t need to run our website project, so the project entry file here has another use. Node executes webpack, and webpack needs to tell it your project entry file. The output is also very obvious, is packaged as a result, no more mysterious, is the entrance to the file as the root of simplified into a single project js tree js file, it is no longer the js, citing the js and refer to the js is write you all the scattered js code conversion to a complete simple compression ratio is high and the effect of a single js file, Then your web page HTML references it. The js result file is located and named by the output attribute.

The tree metaphor here is based on modular development thinking, based on vUE single file components, that is, modular, componentized development (add pictures later).

New Import and Export specifications (2021-9)

Don’t panic, technology updates don’t care if newbies understand, they only care about how they enjoy themselves… ahem

In the first line, we introduce the path module (which is built-in) via node’s module require, and resolve, the path module’s object method, The new webPack specification for configuration files (this should work if you are downloading an older version of Webpack). Then we delete the last two attributes, do not affect the program execution, we do not need specific packaging effect, can be packaged on the line.

    const path = require('path')
    module.exports = {
        entry: path.resolve(__dirname, './src/index.js'),
        output: {
            path: path.resolve(__dirname, './dist'),
            filename: 'main.js'
        },
        mode: 'production',}Copy the code

Packaging test

The rest of the configuration is not written, bloggers are currently learning ing, and loader and plugins are more knowledge, need to be explained separately.

Now according to the set address, a packaging bar, first use the previous specified configuration file instructions, and then it will automatically execute packaging!

webpack
webpack --config .\webpack.config.js
// Here is the output:
asset main.js 106 bytes [compared for emit] [minimized] (name: main)
./src/index.js 105 bytes [built] [code generated]
webpack 5.521. compiled successfully in 246 ms
Copy the code

Here I have written two directives. Direct Webpack will follow the default configuration. To use our configured file, use the –config parameter.

By the way, you need to create the index.js file, not the main.js file, the output file can be output, if any will be overwritten.

index.js

console.log("Package this code, do not set the specific package configuration, of course, is intact output!")
// This is the comment information for development
function fn() {
    console.log("This is a function with an indentation format.")
}
fn()// Try removing the statement and try again.
Copy the code

After executing the webpack — config.\ webpack.config.js command, check to see if main.js is generated or if the code in the main.js file is the same as index.

By packaging, you can see that webpack packaging does basic processing to js files even if loader and plugins are not written, so you can see that comments in index files disappear in main. If you try to remove fn(), the fn function will not execute (it will disappear in main).

Package instruction supplement

Note the address when specifying the WebPack configuration directive, which we can simplify with the help of the NPM script.

  "scripts": {
    "webpack": "webpack --config webpack.congfig.js"
  },
Copy the code

To make it easy to open up while specifying our custom webpack configuration, we can simplify the code by using the NPM Run Webpack directive.

Addendum: If there is a problem, look at my structure, if there is a problem with the structure. (Ignore node_modules, which is generated when the Webpack module is installed and you don’t need to know about it yet.)

Hot pack

Every time a project is updated, we have to manually execute Webpack for packaging, but there are directives that automatically listen for project changes and automatically package.

webpack --watch
Copy the code

With the –watch argument, the Wabpack directive does not stop after execution, but runs continuously to listen for project changes.