1. Initialize a project with a package.json file

A package.json file is automatically created after NPM init -y is executed in the directory file

{" name ":" demo ", "version" : "1.0.0", "description" : ""," main ":" index. Js ", "scripts" : {" test ", "echo \" Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }Copy the code

2. Install Webpack and webpack-CLI

npm install webpack webpack-cli -D
Copy the code

3. Create a SRC /index.js file in the directory and pack it with webpack

The package command NPX webpack webpack will automatically find SRC /index.js files as the entry point for the package output to the dist/ index.js directory. Without configuration, SRC /index.js and dist are webpack defaultCopy the code

Here because there is no HTML file, so after packaging, you need to manually create an HTML file, and then introduce JS to view the effect in the browser

4. If you need to define a configuration file by yourself, you can call it webpack.config.js. NPX webpack will also find this file

“dev”: “webpack –config prod.config.js –mode development”

Dev is the command that can be executed: NPM run dev the name dev can be replaced by the webpack configuration file that you want to execute

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --config prod.config.js --mode development",
    "build": "webpack"
  },
Copy the code

–mode is specified. If you do not specify –mode, the compiler will fail to compile it. You can also specify it in the configuration file:

module.exports = {
  mode:'development'
}
Copy the code

The detailed configuration of WENpack begins

5. Core concepts of WebPack

Module. Exports = {entry: '. / SRC/index. Js' / / string | object webpack perform building entrance to the default: Resolve (__dirname, 'dist')}, // Configure the output location and name of the resource to be absolute paths such as path.resolve(__dirname, 'dist'). 'dist') mode:"", // The development mode and production mode are different: Module :{},// module, webpack is based on Node and has the concept of everything module. There are some rules to configure, such as loaders plugins:[],// Webpack function extension}.Copy the code

6. Webpack can only pack JS and JSON by default. If CSS is encountered,img and other static resources need to be preprocessed by Loader, such as writing a CSS

In the SRC/assets/common CSS

body{
  background:red
}
Copy the code

Import/SRC/index. Js

  import from "./assets/common.css"
Copy the code

The reason is that Webpack cannot pack CSS files, so you need to add loader to process CSS -loader and style-loader

The loading sequence of the loader must be correct because it is loaded from left to right

Style-loader creates a style tag, inserts the CSS content, and then inserts the style tag into the head tag of the body, and then the packaging will take effect

prod.config.js

module.exports = {
  module: {
    rules: [{
        test: /\.css/,
        use: ["style-loader", "css-loader"]
      }
  ]
  },
}
Copy the code

7. In a real project we would need to create the HTML file manually because there are plugins in WebPack that specify the template and then generate a template in the dist directory

NPM install html-webpack-plugin -d

You need to create an HTML file in the directory and use it as the generation template. In this way, the HTML file will be available after packaging. You do not need to manually create the HTML file, and the generated JS file will be imported automatically

const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { plugins: [new HtmlWebpackPlugin({ title: 'Test ', template: 'public/index.html' // use the specified file as a template to generate HTML}), new CleanWebpackPlugin(), // Remove dist file new MiniCssExtractPlugin({// remove CSS file from filename: 'assets/[name].css'})]}Copy the code