MiniCssExtractPlugin

Posted on Edited on In Views: Disqus:

 

MiniCssExtractPlugin 是用來將每個由 webpack 產生內含有 css 的 js 檔案轉成 css 檔。

以下為 SASS 轉 CSS 檔範例。

 

一、新增一個名為 webpack-demo 資料夾

 

二、專案初始化

$ npm init -y

 

在 webpack-demo 資料夾新增 src、dist 資料夾

src 資料夾放入 myStyle.scss 檔，內容如下

$color: blue;
span {
    color: $color;
}

 

dist 資料夾放入 index.html 檔，內容如下

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="./myStyle.css">
  </link>
</head>

<body>
  <p>ppp</p>
  <span>span</span>
</body>

</html>

 

在 webpack-demo 資料夾底下新增 webpack.config.js 檔，內容如下

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: {
        'myStyle': './src/myStyle.scss'
    },
    // output: {
    //     filename: 'main.js',
    //     path: path.resolve(__dirname, 'dist')
    // },
    plugins: [
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: '[name].css',
            chunkFilename: '[id].css',
        }),
    ],
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            // sourceMap: true
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            // sourceMap: true
                        }
                    }
                ]
            },
        ],
    },
};

說明：

1、MiniCssExtractPlugin 的 filename、chunkFilename 屬性是非必要的，

當沒有指定時，css 檔名的產生, 預設是根據 entry 底下各個的 key 產生相對應的檔名；

當 MiniCssExtractPlugin 指定 filename、chunkFilename 屬性值時，

plugins: [
    new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: '[name].css',
        chunkFilename: '[id].css',
    }),
],

css 檔名的產生就會按照該 filename、chunkFilename 屬性值的規則走。

 

2、entry 的入口不一定就只能轉譯 *.js，也可處理 *.scss 等檔案。

 

以上前置作業準備完成後，接下來安裝相關套件

$ npm install webpack webpack-cli --save-dev

$ npm install css-loader --save-dev

$ npm install sass-loader node-sass --save-dev

$ npm install --save-dev mini-css-extract-plugin

 

裝完後執行

$ npx webpack

 

之後會在 dist 資料夾產生 mystyle.css、myStyle.js 兩的檔案

myStyle.js 沒有作用，我們只要引用 mystyle.css 到 index.html 裡就好。

 

執行結果

 

參考資料：

MiniCssExtractPlugin

mini-css-extract-plugin