Initial experience with Webpackage 5

This is the sixth day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

At the beginning of WebPack5 experience

1, the preface

Webpack can package different types of resources according to module processing, and finally produce static resources. Webpack supports modular development of different specifications

2. Environment construction

In case the environment is different, everything that follows can be done based on my version.

1. If your webpack version is different from mine, you can uninstall it first and then specify the version to install

npm uninstall webpack webpack-cli -g
Copy the code

Version 2,

Node – v: v14.16.1

Webpack –version: Webpack 5.29.0/ webpack- CLI 4.6.0

Version specific installation

npm install webpack@5.29. 0 -g
Copy the code

The problem with global installation is that when your project is run by someone else, their WebPack version may not be the same as yours, and you need to install a copy of Webpack in your project

npm install webpack@5.29. 0 --save-dev
Copy the code

3. Introduction to Webpack

Webpack is a front-end resource construction tool, a static module packer. In Webpack’s view, all resource files of the front-end will be treated as modules. It will carry out static analysis according to the dependency of modules and generate corresponding static resources by packaging.

(1) Initialize package.json

npm init
Copy the code

(2) Install jquery

npm i jquery
Copy the code

import $ from 'jquery'
$('#title').click(() => {
    $('body').css('backgroundColor', 'deeppink')
})
Copy the code

From the simple demonstration above, we can find that simple JS project to introduce ES syntax, and less files, will be wrong, this time, we need webpack to help us.

4. The five cores of Webpack

(1) Entry

Entry refers to the file from which webPack starts to pack, analyze and build internal dependency diagrams

(2) Output

Output refers to: where and how to name the output of resource bundles packaged by Webpack

(3) Loader

Loader allows Webpack to handle non-javascript files

(4) Plugins

Plugins can be used to perform a wider range of tasks, from packaging optimization and compression to redefining variables in the environment

(5) Mode

Mode means that the webpack uses the configuration of the corresponding Mode

5. Initial experience of Webpack

Error: Error when executing webapck command alone

Error: Cannot find module 'webpack-cli/package.json'

Solution: Install WebPack – CLI globally

npm i -g webpack-cli
Copy the code

(1) the new SRC/index. Js

** Development operation instruction: **

 webpack ./src/index.js -o ./build/build.js --mode=development
Copy the code

** instruction parsing: **

Webpack will start packing with a./ SRC /index.js entry file and output it to:./build/build.jsCopy the code

Generate run instruction

webpack ./src/index.js -o ./build/build.js --mode=production
Copy the code

Hint: There was an error incident

Conclusion:

1. By default, Webpack can handle JS/JSON files, not CSS /img, etc.

2. Production and development environments compile ES6 modularity into modularity that browsers recognize

The production environment has one more compressed JS code than the development environment

6. Package style resources

Note: In my project, to avoid having to install these plug-ins every time, I used a feature of WebPack that defaults to going back to its parent directory to find the corresponding package if the plug-in is not found in the current directory

Before you start, you need to create the webpack.config.js file, because all webpack loaders and plugins need to be done in the configuration file. Also: when you run the webpack command, the first thing you find is the entire webpack.config.js file, and then load the configuration inside. Webpack runs on the Node platform, using the common.js specification for modularity, and using the ES6 specification for coding.

(1) Install the CSS-Loader in the outermost layer

 npm i css-loader style-loader -D
Copy the code

(2) Install the less-Loader in the outermost layer

 npm i less less-loader -D
Copy the code

(3) Detailed webpack.config.js configuration

Before looking at the following configuration:

Packaged output path files: They are generally absolute paths. Through the path module in Nodejs, __dirname: represents the absolute path of the current file directory, and then build folder on the splice.

Less-loader, CSS-loader, and style-loader must be loaded in sequence.

Once: less-loader > CSS-loader > style-loader

Less-loader: compiles less files into CSS files

Css-loader: Converts CSS files into CommonJS modules to load js files

Style -laoder: Create a style tag, insert the style resource from JS into the head

/** * webpack.config.js webpack configuration file * Tell webpack what to do. When you run webpack, first find the configuration file and load the configuration in it * * All build tools run on nodeJS platform, modularity is commonJS * and our code is stored in SRC, ES6 modular */ is used
const { resolve } = require('path')
module.exports = {
   // The core configuration of WebPack
   // The entry point
   entry: './index.js'./ / output
   output: {
   // The output file name
   filename: 'bundle.js'.// Output path: __dirname is a nodejs variable that represents the absolute directory path of the current file
   path: resolve(__dirname, 'build')},/ / a loader configuration
   module: {
     rules: [
       // Loader configuration details
       {
         // Which files to match
         test: /\.css$/.// Which loaders are used for processing
         use: [
           // The sequence of loader execution in the use array, from right to left and bottom to top, is executed once
           // Create a style tag and insert the JS style resource into the head
           'style-loader'.// Change the CSS file into a commonJS module and load the js file with the style string
           'css-loader'] {},test: /\.less$/,
         use: [
           'style-loader'.'css-loader'.// Compile less files into CSS files
           'less-loader']]}},// Plug-in configuration
   plugins: [
     // Detailed plugins configuration].mode: 'development' // production mode
};

Copy the code

7. Project address

Webpack5 learning source code