| body { | |
| margin-top: 10px; | |
| } | |
| import css from './index.css'; | |
| import mdSrc from './source.md'; | |
| import showdown from 'showdown'; | |
| (() => { | |
| const body = document.body; | |
| const container = document.createElement("div"); | |
| container.setAttribute("id", "container"); | |
| const cnv = new showdown.Converter(); | |
| const mdHtml = cnv.makeHtml(mdSrc); | |
| container.innerHTML = mdHtml; | |
| body.appendChild(container); | |
| })(); | |
| #!/bin/bash | |
| test -d src || mkdir src | |
| cp -v index.css index.js source.md template.html src | |
| { | |
| "name": "webpack-showdown-example-1", | |
| "version": "1.0.0", | |
| "description": "Example of webpack with showdown", | |
| "main": "index.js", | |
| "scripts": { | |
| "webpack": "webpack", | |
| "start:dev": "webpack-serve ./webpack.config.js --no-reload", | |
| "test": "echo \"Error: no test specified\" && exit 1" | |
| }, | |
| "author": "[email protected]", | |
| "license": "ISC", | |
| "devDependencies": { | |
| "@babel/core": "^7.0.0", | |
| "babel-loader": "^8.0.2", | |
| "babel-preset-env": "^1.7.0", | |
| "css-loader": "^1.0.0", | |
| "html-webpack-plugin": "^3.2.0", | |
| "raw-loader": "^0.5.1", | |
| "style-loader": "^0.23.0", | |
| "webpack": "^4.17.2", | |
| "webpack-cli": "^3.1.0", | |
| "webpack-serve": "^2.0.2" | |
| }, | |
| "dependencies": { | |
| "showdown": "^1.8.6" | |
| } | |
| } |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Math Symbols Example</title> | |
| </head> | |
| <body> | |
| <script type="text/javascript" async | |
| src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML"> | |
| </script> | |
| </body> | |
| </html> | |
| const HtmlWebpackPlugin = require('html-webpack-plugin'); // Installed via npm | |
| const webpack = require('webpack'); // To access built-in plugins | |
| const path = require('path'); | |
| const paths = { | |
| src: path.join(__dirname, 'src'), | |
| dist: path.join(__dirname, 'dist'), | |
| public: path.join(__dirname, 'public') | |
| }; | |
| const HOST = process.env.HOST; | |
| module.exports = { | |
| mode: process.env.WEBPACK_SERVE ? 'development' : 'production', | |
| // Or pass it as a CLI argument: webpack --mode=production | |
| target: 'web', // Default | |
| entry: { | |
| main: path.join(paths.src, 'index.js') | |
| }, | |
| output: { | |
| path: path.resolve(paths.dist), | |
| filename: '[name].js', | |
| pathinfo: true | |
| }, | |
| module: { | |
| rules: [ | |
| { | |
| test: /\.(txt|md)$/, | |
| use: 'raw-loader' | |
| }, | |
| { // webpack --module-bind 'css=style-loader!css-loader' | |
| test: /\.css$/, | |
| use: [ | |
| { loader: 'style-loader' }, | |
| { | |
| loader: 'css-loader', | |
| options: { | |
| modules: true // Enable CSS Modules | |
| } | |
| } | |
| ] | |
| }, | |
| { | |
| test: /\.(js|jsx)$/, | |
| include: paths.src, | |
| loader: require.resolve('babel-loader'), | |
| options: { | |
| babelrc: false, | |
| presets: ["env"], | |
| // This is a feature of `babel-loader` for webpack (not Babel itself). | |
| // It enables caching results in ./node_modules/.cache/babel-loader/ | |
| // directory for faster rebuilds. | |
| cacheDirectory: false | |
| }, | |
| } | |
| ] | |
| }, | |
| performance: { | |
| hints: "warning", | |
| maxEntrypointSize: 1000000, | |
| maxAssetSize: 1000000 | |
| }, | |
| devtool: "source-map", | |
| serve: { | |
| host: HOST, | |
| port: 3000, | |
| content: paths.dist, | |
| logLevel: 'debug' | |
| }, | |
| stats: "verbose", | |
| plugins: [ | |
| new HtmlWebpackPlugin({ | |
| filename: 'index.html', | |
| template: path.join(paths.src, 'template.html') | |
| }) | |
| ] | |
| }; | |