build: webpack 新增 mini-css-extract-plugin 分離套件 css

Signed-off-by: wyttime04 <vanessa80332@gmail.com>
iq-service-inc · May 13, 2024 · b568409 · b568409
1 parent 9537ae3
commit b568409
Show file tree

Hide file tree

Showing 6 changed files with 145 additions and 113 deletions.
diff --git a/README.md b/README.md
@@ -68,6 +68,7 @@ npm i @iqs/react-summernote --save
 import React from 'react'
 import { render } from 'react-dom'
 import SummerNote from 'react-summernote'
+import 'react-summernote/dist/main.css'
 
 // 自動載入必要套件
 SummerNote.ImportCode()

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -47,6 +47,7 @@
     "file-loader": "^4.3.0",
     "html-webpack-plugin": "^3.2.0",
     "jquery": "^3.6.1",
+    "mini-css-extract-plugin": "^1.6.2",
     "popper.js": "^1.16.1",
     "postcss-loader": "^3.0.0",
     "prop-types": "^15.8.1",

diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,5 @@
 import SummerNote from './components/SummerNote'
+import './components/SummerNote.css'
 import * as SummernotePlugin from './components/SummernotePlugin'
 export { SummernotePlugin }
 export default SummerNote
diff --git a/src/test.js b/src/test.js
@@ -1,10 +1,9 @@
 import React from 'react'
 import { render } from 'react-dom'
 import SummerNote from '../dist/main'
+import '../dist/main.css'
 
 SummerNote.ImportCode()
-import 'summernote/dist/lang/summernote-zh-TW'
-import 'summernote/dist/lang/summernote-ko-KR'
 
 render(
     <SummerNote value="Default value"
@@ -13,13 +12,19 @@ render(
             height: 350,
             dialogsInBody: true,
             toolbar: [
-                ['style', ['style']],
-                ['font', ['bold', 'underline', 'clear']],
-                ['fontname', ['fontname']],
-                ['para', ['ul', 'ol', 'paragraph']],
-                ['table', ['table']],
-                ['insert', ['link', 'picture', 'video']],
-                ['view', ['fullscreen', 'codeview']]
+                ["style", ["style", "customStyle", "copyFormatting"]],
+                ["font", ["bold", "italic", "underline", "strikethrough", "superscript", "subscript", "clear", "customCleaner"]],
+                ["fontname", ["fontname", "customFont"]],
+                ["fontsize", ["fontsizeInput"]],
+                ['color', ['forecolor', 'backcolor']],
+                ["para", ["ul", "ol", "listStyles", "paragraph"]],
+                ["table", ["jTable"]],
+                ["tableRow", ["jRowHeight"]],
+                ["tableCol", ["jColWidth"]],
+                ["insert", ["pasteHTML", "link", "unlink", "picture", "imageMap", "video", "customSpecialChar"]],
+                ["anchor",["anchor", "toc", "markAnchor", "editAnchor"]],
+                ["comment", ["editPopover", "removePopover"]],
+                ["view", ["fullscreen", "codeview", "help"]],
             ]
         }}
         onChange={e => console.log(e)}

diff --git a/webpack.prod.js b/webpack.prod.js
@@ -1,7 +1,8 @@
 const merge = require('webpack-merge'),
     common = require('./webpack.common.js'),
     webpack = require('webpack'),
-    CleanWebpackPlugin = require('clean-webpack-plugin')
+    CleanWebpackPlugin = require('clean-webpack-plugin'),
+    MiniCssExtractPlugin = require("mini-css-extract-plugin");
 //TerserPlugin = require('terser-webpack-plugin')
 
 module.exports = merge(common, {
@@ -24,7 +25,44 @@ module.exports = merge(common, {
         /bootstrap/,
         /summernote/
     ],
+    module: {
+        rules: [
+            {
+                test: /\.styl?/,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    // 'style-loader',
+                    'css-loader',
+                    {
+                        loader: 'postcss-loader',
+                        options: {
+                            ident: 'postcss',
+                            plugins: [
+                                require('autoprefixer')(),
+                                require('cssnano')()
+                            ]
+                        }
+                    },
+                    {
+                        loader: 'stylus-loader', options: { sourceMap: false }
+                    }
+                ]
+            },
+            {
+                test: /\.css$/, // 針對所有.css 的檔案作預處理，這邊是用 regular express 的格式
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    // 'style-loader',  // 這個會後執行 (順序很重要)
+                    'css-loader' // 這個會先執行
+                ]
+            }
+        ]
+    },
     plugins: [
+        new MiniCssExtractPlugin({
+            filename: '[name].css',
+            chunkFilename: '[id].[hash].css',
+        }),
         new CleanWebpackPlugin(),
         new webpack.DefinePlugin({
             'process.env': {