The target

  • Create a new webpack5 project
  • Local auto refresh
  • Compile and package different content based on HTML templates

Knowledge point brain map

The esLint part of the brain map, Babel, plus. Other points are detailed below:

The code used in the project

Github.com/joychenke/w…

Create a new WebPack project

  • Yarn init Initializes the Webpack project webpack-demos, and a package.json file is generated in the folder
  • Added webPack Webpack-CLI dependency. yarn add webpack webpack-cli -D
  • The SRC directory is added under the root directory, and the packaged entry files index.js and name.js are added under SRC
  • Write the following code in index.js and name.js
const myName = require('./name.js')
console.log(myName)
Copy the code
module.exports = "xiaokekeke"
Copy the code
  • Package the project using the NPX webpack command. A dist directory is added to the root directory with a main.js file. Open main.js and you’ll see that this is a packed and compressed JS file
  • Add an index. HTML file to the root directory. This file imports main.js under dist
  • Access the index.html file in your browser. You’ll find that the console has name.js printed

Modify the default configuration of WebPack

  • Add a new webpack.config.js file to the root directory
  • Modify the mode, entry, output properties in webpack.config.js as follows
const path = require('path')

module.exports = {
    // Production mode packaging
    mode: 'production'.// The entry file is index.js under SRC
    entry: './src/index.js'.// The generated file is index.js, which is placed under the adviser directory of the current directory
    output: {
        filename: 'index.js'.// Path is an absolute path
        path: path.resolve(__dirname, 'adviser')}}Copy the code

Specify the WebPack configuration file

  • Create a new webpack.config.joy.js file in the root directory
  • NPX webpack –config webpack.config.joy. Js specifies that the current configuration file for webpack is webpack.config.joy

Custom script command

  • Add custom scripts in package.json
  • Add the scripts property as follows:
"scripts": {
    "build": "webpack --config webpack.config.joy.js"
  },
Copy the code

Webpack – dev – server installation

  • The role of the development server
  • Add the development server YARN add webpack-dev-server -d
  • Configure the development server in Scripts
  "scripts": {
    "dev": "webpack-dev-server"."build": "webpack --config webpack.config.joy.js"
  },
Copy the code
  • Configure development server ports, auto open, hot update, start compression, and so on. Webpack5 deServer support which attributes, you can write an attribute, and then look at the terminal error message
    devServer: {
        port: 3000.open: true.hot: true.compress: true
    }
Copy the code

HTML – webpack – the plugin installation

  • Install yarn add html-webpack-plugin -d
  • Config plugin: Configures the TEMPLATE of the HTML displayed in the DEV environment
    const HtmlWebpackPlugin = require('html-webpack-plugin')

    plugins: [new HtmlWebpackPlugin({
        template: './src/index.html'.// Template file
        filename: 'index.html'.minify: {
            removeAttributeQuotes: true.collapseWhitespace: true
        },
        hash: true
    })]
Copy the code
  • Webpack-dev-server will package and compile the current project, import the generated JS file into the template index.html, put the index.html into memory, and then create a local service. Develop the index.html file that is accessed locally, which is the index.html in this memory.

That’s all for webpack5 today, and we’ll continue to update webpack5 to compile and package CSS files.