美文网首页
Webpack 的MiniCssExtractPlugin的使用

Webpack 的MiniCssExtractPlugin的使用

作者: JohnYuCN | 来源:发表于2021-02-09 13:14 被阅读0次

1. 一直难理解的style-loader

象这样:

    module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader"
                ],
            },
...

其目的是在目标html中加入<style>,并css代码进行复制,这样可能会生成庞大的html...

2. mini-css-extract-plugin

有了这个插件,会生成css文件,并在html中以<link>方式进行引入,使用方法如下:

  • 安装:
yarn add mini-css-extract-plugin
  • 编辑webpack.config.js
//引入及配置
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

 plugins: [new HtmlWebpackPlugin(htmlPluginOptions),
        new MiniCssExtractPlugin({ filename: 'app.css' })]

// 配合相应的loader
rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader"
                ],
            },
...
  • 构建生成的html部分如下:
<link href="app.css" rel="stylesheet"></head>

相关文章

网友评论

      本文标题:Webpack 的MiniCssExtractPlugin的使用

      本文链接:https://www.haomeiwen.com/subject/poaqxltx.html