webpack packs css y menos archivos

1. Introducción

Webpack no puede procesar directamente recursos como css, less, imágenes, etc., es necesario utilizar los correspondientes loader. Para la introducción de loader, consulte el loader en este blog webpack

2. Empaquete el archivo css

Estructura de directorio (el código de demostración en este caso tiene un enlace de descarga en la parte inferior de la página)
Inserte la descripción de la imagen aquí
(1) Durante el proceso de desarrollo del proyecto, debemos agregar muchos estilos y, a menudo, escribimos estilos en un archivo separado. En el directorio src, cree una carpeta css, que crea un archivo.css normal.

body {
    
    
  /*normal.css中的代码非常简单，就是将body设置为blue*/
  background-color: blue;
}

Sin embargo, ¿los estilos de normal.css entrarán en vigor en este momento?

no lo hará. Porque no lo citamos.
Es imposible que webpack lo encuentre, porque solo tenemos una entrada, y webpack comenzará a buscar otros archivos dependientes de la entrada.

Al empaquetar, solo se empaquetarán los archivos de los que depende el archivo de entrada del paquete. Si el archivo dependiente depende de otros archivos, webpack lo manejará automáticamente. Si se crea un archivo nuevo, como un archivo css, pero ningún otro archivo depende del archivo recién creado, este archivo no se empaquetará.

(2) A continuación, importamos el archivo normal.css en el archivo de entrada mian.js

// 依赖css文件，css文件也可以被当做一个模块来处理。
// 由于我们只要依赖css文件就可以了，并不需要用一个变量来接收
require('./css/normal.css')

Reempaquetado, se encontró que se informó un error, lo que nos solicitó instalar un cargador adecuado:

Inserte la descripción de la imagen aquí
(3) Consulte el sitio web oficial de webpack https://www.webpackjs.com/loaders/css-loader/ , descubrió que necesitábamos instalar css-loadery style-loaderusar el comando npm install --save-dev xxx(xxx se reemplaza con el nombre del cargador correspondiente)

Entonces necesitas webpack.config.jscrear algunos archivos de configuración

let path = require('path');

module.exports = {
    
    
  entry: './src/main.js',              //打包入口
  output: {
    
                                //出口
    path: path.join(__dirname,'dist'),
    filename: 'bundle.js'
  },
  module:{
    
    
    rules:[
      {
    
    
        test:/\.css$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中，要放在css-loader的前面
        // webpack在使用多个loader时，是按照从右向左（或者说从下到上）的顺序使用
        use:['style-loader','css-loader']
      }
    ]
  }
}

A continuación, vuelva a empaquetar y compruebe que el paquete se ha realizado correctamente. Hay un archivo bundle.js adicional en la carpeta dist. Solo necesitamos introducir este archivo bundle.js en el archivo html.

3. Empaque el archivo menos

(1) Primero cree un archivo special.less y aún así colóquelo en la carpeta css

@fontSize:50px;
@fontColor:orange;

body {
    
    
  font-size:@fontSize;
  color: @fontColor;
}

(2) Introducir en el archivo de entrada archivo main.js

require('./css/special.less')

(3) Consulte el sitio web oficial https://www.webpackjs.com/loaders/less-loader/ para empaquetar el archivo menos e instalar el cargador correspondiente,less-loader

npm install --save-dev less-loader less

(4) Modifique el archivo de configuración webpack.config.js y agregue la configuración del correspondiente less-loader

module:{
    
    
    rules:[
      {
    
    
        test:/\.css$/,
        use:['style-loader','css-loader']
      },
      {
    
    
        test: /\.less$/,
        use: [{
    
    
          loader: "style-loader" // creates style nodes from JS strings
        }, {
    
    
          loader: "css-loader" // translates CSS into CommonJS
        }, {
    
    
          loader: "less-loader" // compiles Less to CSS
        }]
      }
    ]
  }

4. Información

El enlace de descarga del código de demostración de este blog es https://webchang.lanzous.com/i6bFtkflaef Contraseña: 2h4i
paquete web 中文网 -loader
Introducción de loader en blog webpack
Sugerencia: Puede encontrar problemas de versión al usar el cargador de paquetes web. Preste atención a este blog. Https://blog.csdn.net/weixin_43974265/article/details/112667927