Webpack installation

  • Install the local Webpack
  • webpack webpack-cli -D

Webpack can be configured to 0

  • Package tools – “output results (” default support” js module)
  • Type NPX webpcak and you can pack it

But what exactly does he do with NPX webpcka

  • It goes to node_modules/.bin/webpack.cmd
  1. This is what’s inside
  2. If not, go to webpack bin webpack.js and execute it
  3. Webpack bin webpack.js webpack-CLI is introduced 
    @IF EXIST "%~dp0\node.exe" ( "%~dp0\node.exe" "%~dp0\.. \webpack\bin\webpack.js" %* ) ELSE ( @SETLOCAL @SET PATHEXT=%PATHEXT:; .JS; =; % node "%~dp0\.. \webpack\bin\webpack.js" %* )Copy the code
  • Webpack. Js code 
    /** @type {CliOption} */ 
const cli = {
  name: "webpack-cli", package: "webpack-cli",
 binName: "webpack-cli", installed: isInstalled("webpack-cli"), url: "https://github.com/webpack/webpack-cli"
 };
Copy the code

Why is packaged JS a lot of things

  1. He reduced volume by compressing
  2. Because we support modularity by default, it supports this a lot

Manually configure webpack webpack.config.js

  • NPX webpack When executing NPX webpack it will default to webpack.config.js but I want to change the name to NPX webpack –config + name
  • But if the name is too long and it’s hard to write we’ll put it in the SCRPT of ‘package.json’
{" devDependencies ": {" webpack" : "^ 5.24.2", "webpack - cli" : "^ 4.5.0"}, "script" : {" dev ":" webpack -- config webpack. Js} ", "name" : "webpack", "version" : "1.0.0", "main" : "index.js", "author": "xyz", "license": "MIT" }Copy the code

Why is there no NPX here

  • Because script goes to the.bin directory by default
  • Once this is done, we can “NPM run dev” to execute it, but someone thought –config webpack.js is written here again
  • “NPM run dev — –config webpack.js”
  • The “–” is passed in as an argument

webpack-dev-server

  • It is a development server installation commandyarn add webpack-dev-server -D
  • It can be executed using NPX or in script configuration which defaults to the current folder port 8080
  1. We can not configure it in webpack.config.js configuration
DevServer :{port:3000, progress:true, // contentBase:"./dist" //Copy the code

What is a HtmlWebpackPlugin

  1. Zip the HTML file into the JS CSS
  2. There is a bug in webpack5 which is currently causing problems and I have to reduce it by one version to 4 but HtmlWebpackPlugin also needs to be reduced to 4npm i --save-dev html-webpack-plugin@4
  3. use
New HtmlWebpackPlugin({template:'./ SRC /index.html', // filename:"index.html", // Parse the name hash:true, // generate the file with hash})],Copy the code

What is the mini – CSS – extract – the plugin

  1. The installationyarn add mini-css-extract-plugin -D
  2. Function To remove the CSS
  3. use
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};
Copy the code

What are Autoprefixer and PostCSS-Loader

  1. Function Prefixes the CSS
  2. The installationyarn add postcss-loader autoprefixer -D
  3. Use always add a postcss.config.js configuration file
Module. exports = {plugins:[require('autoprefixer')]}Copy the code