webpack之css sass file url图片加载

1､安装

npm i css-loader --save-dev

npm i style-loader --save-dev

npm i sass-loader --save-dev

npm i file-loader --save-dev

npm i url-loader --save-dev

2、配置

module:{
    rules:[
      {
        test:/\.css$/,
        use:["style-loader","css-loader"]
        // css-loader是转化成字串，style-loader是放到页面变成样式,应用到网页上去
      },
      {
        test:/\.scss$/,
        use:["style-loader","css-loader","sass-loader"]
        // 从后往前，先转成css,再转成字符串，最后再应用到网页上去。
      },
      {
        test:/\.(png|jpg|gif)$/,
        // use:["file-loader"]
        //dist下会生成文件的名，用于网页程序的开发
        use:["url-loader"]
        // 找到文件路径所在，生成base64数据直接渲染
      }
    ]

  }

3､文件

main.js

import "./style.css";
import "./style2.scss";
import img1 from "./img1.png";
import img2 from "./img2.jpg";
console.log(img1);


document.body.innerHTML = `
  <h1>天天开心</h1>
  <div class="main">
    <div class="sub">


    </div>
  </div>


  <img src="${img1}">
  <img src="${img2}">

`;

4､style.css

5､style2.scss