Webpack(下)

loader VS plugin

用webpack生成JS
我们给它个js文件，这个js文件通过webpack得到了一个新的js文件。
内置了babel-loader(库),通过这个loader把js load到webpack里面，然后webpack就输出了另外一个js。
用webpack生成CSS
引入css(js import ‘./x.css’),通过'style-loader'和'css-loader'把css变成<style>标签
给我个css,通过插件MiniCssExtractPlugin,把css变成文件。把n个css变成1个文件。
加载器与插件的区别？
loader是加载器，plugin是插件。
loader永远是1对1，plugin是n对1。loader功能比较单一就是用来加载文件的，plugin功能丰富。
用webpack生成html
html是通过HtmlWebpackPlugin生成新的html，该html会自动引入css、js。

面试题(必考)
webpack loader与plugin的区别是什么？
1.webpack loader是用来加载文件的，webpack plugin是用来扩展webpack的功能的。
2.loader主要用来加载一个个的文件。比如说，它可以加载js文件把js文件转译成低版本浏览器可以支持的js。它也可以加载css文件，'style-loader'和'css-loader'把css变成页面上的<style>标签或其它的一些处理。它也可以加载图片文件，对图片进行一些优化。
3.plugin是用来加强webpack功能的。
比如说HtmlWebpackPlugin,它是用来生成html文件的，MiniCssExtractPlugin是用来抽取css代码把它变成一个css文件的。

目标五. webapck引入SCSS

要点
node-sass已经过时,请使用dart-sass。
dart-sass已被重命名为sass

步骤 🔍webpack scss loader

1.yarn add sass-loader sass --dev
2.新建文件x.scss,并写好样式。
//scss语法,还是最原始的css
3.x.js
  import "./x.scss";
  import "./y.scss";  
4.webpack.config.base.js添加
module: {
   
  rules: [{
   
      test: /\.scss$/i,
      use: [
        "style-loader",
        "css-loader",
        "sass-loader",
      ],},
     ],
    },
webpack.config.js添加
rules: [
  ...base.module.rules,//先抄过来再覆盖
  {
   
    test: /\.css$/i,
    use: ['style-loader', 'css-loader']
  }
]
webpack.config.prod.js添加
 rules: [
  ...base.module.rules, 
  {
   
    test: /\.