Module packaging tool

Why use the module packaging tool?

  • ES Modules has an environment compatibility problem
  • Too many module files and frequent network requests
  • All front-end resources need to be modular

    • New feature code compiled

    • Modular JavaScript packaging

    • Multi-type module support

Webpack

Module Loader

Code Splitting

Asset Module

Webpack is quick to get started

Initialize the project to generate package.json

  • yarn init –yes

Install webpack

  • yarn add webpack webpack-cli –dev

The WebPackage 4 installation fails. Procedure

  • In WebPack 3, WebPack itself and its CLI used to be in the same package, but in release 4 they have separated the two to better manage them.
  • Solution: Try global install NPM install -g webpack-cli
  • If webpack -v is successfully executed, webpack-CLI is no longer displayed

View the Webpack version

  • yarn webpack –version

Create the entry file main.js

  • Import multiple modules into this module

Package JS code

  • yarn webpack

Webpack configuration file (webpack.config.js)

Create a new webpack.config.js file in the project root directory

  • The default output: dist/main.js

Custom output and input

  • The code shown
// webpack.config.js file -----------------
const path = require('path');
module.exports = {
    // An entry file that needs to be packaged
    // You can write relative paths
    entry: './src/main.js'.// Specify the folder and file name to output
    output: {
        filename:"bundle.js".// Only absolute paths can be written
        path:path.join(__dirname,'output')}}Copy the code

Pay attention to

  • Packaged entry files that can use relative paths.
  • The exported path can only be an absolute path.

Webpack working mode (3 types)

Example yarn webpack –mode none

  • Pass in the –mode argument, which has three values
    • Production mode
    • In development mode, WePack automatically optimizes the speed of packaging.
    • None WebPack runs raw packaging without any optimization.
  • Differences in these three models, can be in webpack.js.org/configurati…

Set the working mode in the configuration file

const path = require('path');
module.exports = {
    // To add the working mode, enter YARN webpack in the command line
    mode:'development'.// An entry file that needs to be packaged
    // You can write relative paths
    entry: './src/main.js'.// Specify the folder and file name to output
    output: {
        filename:"bundle.js".// Only absolute paths can be written
        path:path.join(__dirname,'output')}}Copy the code

Webpack results run principle

  • Package into a file and keep each module in its own scope.
  • Package multiple files into one file and encrypt them

tip

  • CTRL + K -> CTRL +0 folds all code
  • Webpack-w listens in real time and packages new files

Webpack resource module loaded

  • Loader is a core feature of Webpack
  • Any type of resource can be loaded with Loader

Packing CSS files

  • Executing YARN webpack will report an error because it is considered a JS file by default
  • Different loaders handle different files

1. Install the Loader module loader

  • To process the CSS, run yarn add CSS-loader –dev

2. Modify module in the configuration file

  • Modify the Configuration file (Add Module)
const path = require('path');
module.exports = {
    // To add the working mode, enter YARN webpack in the command line
    mode:'development'.// An entry file that needs to be packaged
    // You can write relative paths
    entry: './src/main.css'.// Specify the folder and file name to output
    output: {
        filename:"bundle.css".// Only absolute paths can be written
        path:path.join(__dirname,'output')},// A new one
    module: {
        rules: [{// Specify what suffix to match files, using regular expressions
                test:/.css$/.// Specify the loader to use
                use:'css-loader'}}}]Copy the code

3. Install another Loader

  • Run the yarn webpack command, and the package succeeds. However, the page is not displayed in the browser
  • Yarn add style-loader –dev

4. Add the name of the loader to the configuration file

  • Modify the configuration file to add use in rules to module
// Note that the loader executes from back to front, so be sure to write CSS after
use: ['style-loader'.'css-loader'
]
Copy the code
  • Summary: Styles are run through the head style tag
  • Css-loader loads CSS into javascript
  • Style-loader is a way to make javascript aware of CSS

Webpack imports the resource module

  • Webpack entry files are generally JS files
  • In the entry file, import the resources you want to package (e.g. CSS, etc.)

Js drives the entire front-end application

  • Logically, JS does need these resource files.
  • It is necessary to ensure that there is no shortage of online resources.

Webpack file resource loader

  • Most loaders work like CSS-loaders, which convert resource modules into JS code.

File-loader

Step (07_file-loader)

  • 1. Install the file-loader. Run yarn add url-loader –dev
  • 2. Import resources into the entry function
  • 3. Run wepack
  • 4. View the effect in the browser
    • If nothing works, open the console to see the error
    • Found the path of the picture is wrong
  • The source code
//-----------main.js entry file -----------
// The address of the image is referenced
import icon from './ compile code.png ';

var img = new Image();
img.src = icon;

document.body.append(img);

// ---------webpack-config.js-----------
// Webpack configuration file
const path = require('path');

module.exports = {
    mode:'none'.entry:'./img/main.js'.output: {path:path.join(__dirname,'dist'),
        filename:'bundle.js'.publicPath:'dist/'
    },
    module: {rules:[
            {
                test:/.png$/,
                use:[
                    'file-loader'}]}}Copy the code

The picture path is incorrect

  • Webpack defaults to placing packaged files under the root directory of the project
  • But at this point, we changed the path path in the configuration file and put it in the dist directory, so we can’t find it
  • In this case, you only need to modify the configuration filepublicPath
    • Note: don’t forget the final **/**, because in the packaged JS file, the image path is directly concatenated in the back.
  • Run it again and it will display successfully.

Webpack URL loader

Webpack common loader classification

Compile the transformation loader

  • Css-loader: Converts CSS code into a module in bundle.js to run CSS through JS.

File action type loader

  • File-loader: copies the loaded resource module to the output directory and exports the file path.

Code checks the type loader

  • Objective: To unify code style and improve code quality.
  • eslint-loader