├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── postcss.config.js ├── src ├── index.html └── index.js └── webpack.config.dev.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.swp 3 | public 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # summernote-webpack-example 2 | 3 | Feel free to send a pull request. 4 | 5 | ## versions 6 | * @babel/core: ^7.8.7, 7 | * bootstrap: ^4.4.1, 8 | * codemirror: "^5.52.0, 9 | * jquery: ^3.4.1, 10 | * popper.js: ^1.16.1, 11 | * summernote: ^0.8.16 12 | 13 | ## installation 14 | 15 | ``` 16 | # install modules 17 | npm install 18 | 19 | # start webpack dev server 20 | npm run dev 21 | ``` 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "summernote-webpack-example", 3 | "version": "2.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "webpack-dev-server --config=webpack.config.dev.js", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "author": "summernote", 11 | "license": "MIT", 12 | "dependencies": { 13 | "@babel/core": "^7.8.7", 14 | "bootstrap": "^4.4.1", 15 | "codemirror": "^5.58.2", 16 | "jquery": "^3.5.0", 17 | "popper.js": "^1.16.1", 18 | "summernote": "^0.8.16" 19 | }, 20 | "devDependencies": { 21 | "autoprefixer": "^9.7.4", 22 | "babel-loader": "^8.0.6", 23 | "css-loader": "^3.4.2", 24 | "file-loader": "^5.1.0", 25 | "html-loader": "^0.5.5", 26 | "html-webpack-plugin": "^3.2.0", 27 | "mini-css-extract-plugin": "^0.9.0", 28 | "postcss-loader": "^3.0.0", 29 | "sass": "^1.26.2", 30 | "sass-loader": "^8.0.2", 31 | "webpack": "^4.42.0", 32 | "webpack-cli": "^3.3.11", 33 | "webpack-dev-server": "^3.10.3" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = {} -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Summernote webpack test 6 | 7 | 8 |

9 |

summernote webpack test

10 |

11 |

12 | 13 | 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import $ from 'jquery'; 2 | import 'popper.js'; 3 | import 'bootstrap'; 4 | import 'bootstrap/dist/css/bootstrap.min.css'; 5 | 6 | import CodeMirror from 'codemirror/lib/codemirror'; 7 | import 'codemirror/lib/codemirror.css'; 8 | import 'codemirror/mode/xml/xml'; 9 | import 'codemirror/theme/monokai.css' 10 | 11 | import 'summernote/dist/summernote-bs4'; 12 | import 'summernote/dist/summernote-bs4.css'; 13 | 14 | $(".summernote").summernote({ 15 | height: 150, //set editable area's height 16 | codemirror: { // codemirror options 17 | CodeMirrorConstructor: CodeMirror, 18 | theme: 'monokai' 19 | } 20 | }); 21 | -------------------------------------------------------------------------------- /webpack.config.dev.js: -------------------------------------------------------------------------------- 1 | const HtmlWebPackPlugin = require('html-webpack-plugin'); 2 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 3 | const webpack = require('webpack'); 4 | const path = require('path'); 5 | 6 | module.exports = { 7 | entry: { 8 | app: path.join(__dirname, 'src/index.js') 9 | }, 10 | output: { 11 | path: path.join(__dirname, 'dist'), 12 | }, 13 | devServer: { 14 | port: 3000, 15 | contentBase: ['./dist'], 16 | }, 17 | target: "node", 18 | module: { 19 | rules: [ 20 | { 21 | test: /\.js$/, 22 | exclude: /node_modules/, 23 | use: [ 24 | { 25 | loader: 'babel-loader', 26 | }, 27 | ], 28 | }, 29 | { 30 | test: /\.html$/, 31 | use: [ 32 | { 33 | loader: 'html-loader', 34 | options: { 35 | minimize: false, 36 | }, 37 | }, 38 | ], 39 | }, 40 | { 41 | test: /\.(sa|sc|c)ss$/, 42 | use: [ 43 | { 44 | loader: MiniCssExtractPlugin.loader, 45 | }, 46 | { 47 | loader: 'css-loader', 48 | }, 49 | { 50 | loader: 'postcss-loader', 51 | }, 52 | { 53 | loader: 'sass-loader', 54 | options: { 55 | implementation: require('sass'), 56 | }, 57 | }, 58 | ] 59 | }, 60 | { 61 | test: /\.(png|jpe?g|gif|svg)$/, 62 | use: [ 63 | { 64 | loader: 'file-loader', 65 | options: { 66 | name: '[name].[ext]', 67 | outputPath: 'images', 68 | }, 69 | }, 70 | ], 71 | }, 72 | { 73 | test: /\.(woff|woff2|ttf|otf|eot)$/, 74 | use: [ 75 | { 76 | loader: 'file-loader', 77 | options: { 78 | name: '[name].[ext]', 79 | outputPath: 'font', 80 | }, 81 | }, 82 | ], 83 | }, 84 | ], 85 | }, 86 | plugins: [ 87 | new webpack.ProvidePlugin({ 88 | $: 'jquery', 89 | jQuery: 'jquery', 90 | CodeMirror: 'codemirror', 91 | }), 92 | new MiniCssExtractPlugin({ 93 | filename: '[name].css', 94 | }), 95 | new HtmlWebPackPlugin({ 96 | inject: true, 97 | template: `./src/index.html`, 98 | filename: 'index.html', 99 | }), 100 | ], 101 | }; 102 | --------------------------------------------------------------------------------