3. 模块-CSDN博客

本文链接：https://blog.csdn.net/Xiaoyc7/article/details/124655601

三、模块

1.概念

一个大的程序往往由多个离散的模块构成，像js、css、less、vue、图片、音频、字体这些不同类型的文件，都可以统一都处理为模块存在，从而webpack可以处理各种类型模块之间的依赖关系，并打包。对于不同类型的模块的处理规则统一在module字段配置即可

2.Loader

Loader可以对不同类型文件进行预编译,统一转化成模块，即 “万物皆模块”的前端工程化思想，从而可以根据ESModule或者CommonJS模块化规范引入任何类型的文件

3.配置

首先先安装用到的loader

npm i -D
style-loader
css-loader
vue-loader

module.exports={
  module:{
    rules:[ // 定义模块处理规则,即定义遇到什么类型的文件用什么loader处理为模块
      // 遇到以 .css 结尾的文件使用css-loader和style-loader处理为模块
      { 
        test:/\.css$/, 
        use: [
		  { loader:'style-loader', options:{} },
          { loader:'css-loader', options:{} }
        ]
      },
      // 对vue文件使用vue-loader处理为模块（实际上转化为js、css）
      {
        test:/\.vue$/,
        use:['vue-loader']      
      }
      // 其他类型的还有很多，后续讲到常用loader再作补充...
    ]
  },
    
  entry:'./src/index.js', 
  output:{
    path:path.resolve(__dirname,'dist'), 
    filename:'bundle.js' 
  },
}

4.演示

src/style.css

.box{
  color:red
}

src/index.js

@import './style.css' // 将css文件作为模块导入，@import 'xx'属于模块导入语句（当然了，浏览器识别不出这种语法，故需要webpack处理打包后浏览器才能识别）,在打包处理时，webpack遇到这个语句，从配置文件module字段可以得知遇到 .css结尾的文件使用css-loader和style-loader处理

let box = document.createElement('div')
box.innerText = 'ONE'
document.body.appendChild(box)