之前的css都是直接插入到head头部, 如果过长可能会阻塞, 所以希望可以抽离出来, 以link标签形式使用

    此时需要一个插件 mini-css-extract-plugin https://webpack.js.org/plugins/mini-css-extract-plugin/#root

    • 安装插件 yarn add mini-css-extract-plugin -D
    • 在webpack配置文件中引入
    • image.png
    • 初始化插件并用在对应的loader中, 这里是css的例子, 若是less, 可以再次引入和初始化插件, 如 const MiniLessExtractPlugin = require('mini-css-extract-plugin')
    • image.png
    • 重新运行查看结果
    • image.png
    • 打包 npm run build 确实生成了 main.css
    • image.png