Introduction:

Webpack is a static module bundler for modern JavaScript applications. When WebPack works with an application, it recursively builds a Dependency graph containing every module the application needs, and then packages all of those modules into one or more bundles.

Use:

webpack.config.js

Entry represents the packaged entry file, output represents the location of the packaged output file, but the path of output is to write the absolute path, so the path module needs to be introduced

const path =require('path')
module.exports={
    entry:'./main.js'.output:'bundle.js'.// Must be an absolute path
    path:path.resolve(__dirname,'./build)'
    // represents the bundle.js file in the build folder of the current directory
}
Copy the code

loader

Loader enables Webpack to handle non-javascript files (WebPack itself only understands JavaScript). Loader can convert all types of files into valid modules that WebPack can handle, and then you can take advantage of WebPack’s packaging capabilities to process them. In essence, WebPack Loader converts all types of files into modules that the application’s dependency diagram (and ultimately its bundle) can reference directly.

1. Parse CSS files (CSS-loader, style-loader)

We write a lot of CSS code, when loading the code webPack does not know how to load it, must use the corresponding loader to complete this function, the most commonly used loader is CSS-loader

NPM install CSS-loader -d

Css-loader can be used in three modes, including inline mode, CLI mode (webpack5 is not supported), and configuration mode. The configuration mode is the most commonly used mode

const path =require('path')
module.exports={
    entry:'./main.js'.output: {'bundle.js'.// Must be an absolute path
    path:path.resolve(__dirname,'./build)'
    // represents the bundle.js file in the build folder of the current directory},module: {rules:[
            {
            test:/\.css$/,
            use:[{loader:"css-loader"}]}}Copy the code

Laoder :[‘ CSS-loader ‘] laoder :[‘ CSS-loader ‘]

Cs-loader does not work because it is only responsible for parsing CSS files and does not insert the parsed CSS into the page. If we want to complete the operation of inserting style, we need another loader, which is style-loader, since we want to use it. Install style-loader: NPM install style-loader: NPM install style-loader: NPM install style-loader: NPM install style-loader: NPM install style-loader: NPM install style-loader: NPM install style-loader: NPM install style-loader: NPM install style-loader: Use :[‘style-loader’,’css-loader’] Note that webpack parses loader from back to front, so css-loader must be written after style-loader

2. Parse less files (less-loader, CSS-loader, style-loader)

We all know that browsers don’t recognize less files, and in order for less to work you have to make it a CSS file, so we use less to convert less files to CSS files, / SRC/CSS /component.less > component. CSS to convert less to CSS. Less loader: NPM install less loader -d: NPM install less loader -d

The configuration of less files can be written as follows:

const path =require('path')
module.exports={
    entry:'./main.js'.output: {'bundle.js'.// Must be an absolute path
    path:path.resolve(__dirname,'./build)'
    // represents the bundle.js file in the build folder of the current directory},module: {rules:[
            {
            test:/\.less$/,
            use:["style-loader"."css-loader"."less-loader"}]}}Copy the code

Sass files packaged as less are similar, so I won’t go into details here