“This is the third day of my participation in the First Challenge 2022, for more details: First Challenge 2022”.

The previous section covered entry in the basic WebPack configuration, so I’ll move on to other basic WebPack configurations

Package mode

The packaging mode is used to let Webpack know which packaging mode you are using. There are three modes of packaging: Development, production, and None. Different packaging modes have different functions.

  • development

    Mode value isdevelopmentThe Node environment variable will be changed when the package command is executedprocess.env.NODE_ENVSet todevelopment, will enable valid names for both modules and chunks.
// webpack.config.js
module.exports = {
    mode: "development"
}
Copy the code
  • production

    Mode is defined asproduction, sets the Node environment variable toproductionAnd turn on code compression and optimization. The default is to use optimization plug-ins built into WebPackFlagDependencyUsagePlugin.FlagIncludedChunksPlugin.ModuleConcatenationPlugin.NoEmitOnErrorsPlugin 和 TerserPlugin
// webpack.config.js
module.exports = {
    mode: "production"
}
Copy the code
  • none

    No packaging optimizations are used
// webpack.config.js
module.exports = {
    mode: "none"
}
Copy the code
  • When we do not configure mode, mode will default toproduction

Package output

Output defines how the packaged file should be exported. Output requires passing in an object, as we did in the previous section:

export default {
    entry: ["./src/index1.js"."./src/index2.js"].output: { filename: "bundle.js"}}Copy the code

The above is just a simple package output configuration, filename represents the name of the output file. Output has other parameters that allow us to configure the package output. Here is a brief introduction to some common parameters of output:

  • Filename: indicates the output filename. The output filename can be static or use the built-in webpack template, such as [id], [name], [contenthash], etc. For example, the output file name we can use to generate the file name from the hash value of the file:

        filename: "[contenthash].bundle.js"
Copy the code

    When we have multiple entry files, we can package them into separate files using template strings.

  • PublicPath: specifies the publicPath of packaged files, such as CDN and other servers that store static resources. For example, if we have relative paths in CSS or JS files, the relative paths will be replaced by publicPath after packaging

    // test.css
.cls {
    background-image: url(./img/test.png)
}

// webpack.config.js
module.exports = {
    output: {
        fileName: [name].js,
        publicPath: "https://www.testcdn.com/",}}Copy the code

    Set publicPath and package the output

    .cls {
    background-image: url(https://www.testcdn.com/img/test.png)}Copy the code

  • Path: Specifies the directory to package the output. It can be used with publicPath

    // webpack.config.js
const path = require('path')
module.exports = {
    output: {
        path: path.resolve(__dirname, 'dist')
        fileName: [name].js,
        publicPath: "https://www.testcdn.com/dist",}}Copy the code

Output has several more complex configurations in addition to the three more commonly used attributes, as described here

Webpack template string

In the filename attribute of output, we use the built-in template string, which is served by the TemplatedPathPlugin. Template strings are used at four levels: compile level,chunk level, module level, and file level.

  • Compile level template

    The template name role
    [fullhash] The full hash at compile time

  • Chunk Layer Template

    The template name role
    [id] The chunk of the id
    [name] The name of the chunk
    [chunkhash] Hash value of the module
    [contenthash] Hash value generated based on chunk content

  • Module Layer template

    The template name role
    [id] The module id
    [hash] Hash value of the module
    [contenthash] Hash value generated based on the module content

  • File level template

    The template name role
    [file] File name and path
    [query] The prefix with? The parameters of the
    [fragment] Arguments prefixed with #
    [base] Current file name, including the extension
    [path] Current file path
    [name] Current file name, without extension
    [ext] Current file suffix

summary

This section covers the Mode and Output properties in the basic webPack configuration, as well as the template strings in WebPack

  • Mode specifies the packaging mode, allocationdevelopment.productionandnoneThree kinds of
  • Output is to specify the output directory after packaging, introduced the common attributes of output
  • Webpack four classes of template strings for each template

This article is the second in a series of learning Webpack from Scratch. Additional chapters can be found at 👇 :

Learn webPackage 5.x from scratch (1) Learn webpackage 5.x from scratch (2) Learn Webpackage 5.x from scratch (3) Learn Webpackage 5.x from scratch (4) Learn WebPackage 5.x from scratch (5)