1、目录

image.png

2、js/index.js

  1. import createElement from '../components/header/createHeader.js';
  3. let header = document.getElementById('header');
  4. // 创建header模块
  5. const heading = createElement();
  6. header.append(heading);
  8. // 导入所有文件中的内容
  9. const mdFiles = require.context('../markdown', true, /\.md$/);
  10. const modules = mdFiles.keys().reduce((modules, modulePath) => {
  11.   const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');
  12.   const value = mdFiles(modulePath);
  13.   modules[moduleName] = value.default;
  14.   return modules;
  15. }, {});
  16. console.log(modules, 'modules>>>');

3、page/index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Rock</title>
  7.   </head>
  8.   <style>
  9.     * {
  10.       margin: 0;
  11.       padding: 0;
  12.     }
  13.     #wrapper {
  14.       width: 100%;
  15.       height: 100vh;
  16.     }
  17.     #header {
  18.       width: 100%;
  19.       height: 100px;
  20.       line-height: 100px;
  21.       border-bottom: 1px solid #aaa;
  22.     }
  24.     .nav {
  25.       width: 20%;
  26.       height: 100px;
  27.       line-height: 100px;
  28.       display: flex;
  29.       justify-content: space-around;
  30.     }
  32.     #iframe {
  33.       width: 100%;
  34.       height: 100%;
  35.       display: none;
  36.     }
  37.   </style>
  38.   <body>
  39.     <div id="wrapper">
  40.       <div id="header"></div>
  41.       <iframe id="iframe" name="box" src="#" frameborder="none"></iframe>
  42.     </div>
  43.   </body>
  44.   <script src="index.js"></script>
  45. </html>

3、config.js

  1. export default {
  2.   mk1: '/dist/markdown/mk1.html',
  3.   mk2: '/dist/markdown/mk2.html',
  4.   mk3: '/dist/markdown/mk3.html',
  5.   mk4: '/dist/markdown/mk4.html',
  6.   mk5: '/dist/markdown/mk5.html',
  7. };

4、markdown-loader.js

  1. const marked = require('marked');
  2. const fs = require('fs');
  3. const path = require('path');
  4. const light = require('highlight.js');
  6. marked.setOptions({
  7.   highlight: function (code) {
  8.     let res;
  9.     res = light.highlightAuto(code).value;
  10.     return res;
  11.   },
  12. });
  14. // solarized-light
  15. module.exports = async function (source) {
  16.   // 返回的必须是处理后的js字符串
  17.   let html = marked(source);
  18.   var str = `
  19.   <!DOCTYPE html>
  20.     <html lang="en">
  21.     <head>
  22.       <meta charset="UTF-8">
  23.       <meta name="viewport" content="width=device-width, initial-scale=1.0">
  24.       <title>Document111</title>
  25.       <link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">
  26.     </head>
  27.       <body>
  28.       <pre>
  29.         <code class="language-html">
  30.           ${html}
  31.         </code>
  32.       </pre>
  33.       </body>
  34.    </html>
  35.   `;
  36.   const code = `export default ${JSON.stringify(str)}`;
  37.   let resPath = path.parse(this.resourcePath);
  38.   try {
  39.     await fs.mkdirSync('dist/markdown');
  40.   } catch (error) {}
  41.   await fs.writeFileSync(`dist/markdown/${resPath.name}.html`, str);
  42.   return code;
  43. };

6、package.json

  1. {
  2.   "name": "webpack",
  3.   "version": "1.0.0",
  4.   "main": "index.js",
  5.   "scripts": {
  6.     "test": "echo \"Error: no test specified\" && exit 1",
  7.     "build": "npx webpack",
  8.     "start": "webpack-dev-server --open"
  9.   },
  10.   "author": "",
  11.   "license": "ISC",
  12.   "description": "",
  13.   "dependencies": {},
  14.   "devDependencies": {
  15.     "clean-webpack-plugin": "^3.0.0",
  16.     "copy-webpack-plugin": "^6.0.3",
  17.     "css-loader": "^4.2.1",
  18.     "file-loader": "^6.0.0",
  19.     "highlight.js": "^10.1.2",
  20.     "html-webpack-plugin": "^4.3.0",
  21.     "loader-utils": "^2.0.0",
  22.     "marked": "^1.1.1",
  23.     "style-loader": "^1.2.1",
  24.     "webpack": "^4.44.1",
  25.     "webpack-cli": "^3.3.12",
  26.     "webpack-dev-server": "^3.11.0"
  27.   }
  28. }

7、README.md

  1. # webpack
  3. ### 介绍
  5. - [链接](https://webpack.js.org/configuration/mode/)
  6.   a bundler for javascript and friends
  8. ---
  10. ![webpack](https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3483345719,214526697&fm=26&gp=0.jpg)
  12. ### 简单配置使用技巧
  14. ### loader 机制
  16. 真正解决了 html 中文件的引入，实现了万物皆模块，实现 javascript 驱动
  18. ### plugin 插件机制
  20. 常见应用场景
  22. - 打包前清楚 dist 目录（clean-webpack-plugin）
  23. - 生成所需要的 HTML 文件 （html-webpack-plugin）
  24. - 根据环境动态注入变化的部分(如 API 地址等)
  25. - 拷贝不需要打包的资源文件到输出目录
  26. - 压缩 Webpack 打包后输出的文件
  27. - 自动发布打包结果到服务器实现自动部署

8、webpack.config.js

  1. const path = require('path');
  2. const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  3. const HtmlWebpackPlugin = require('html-webpack-plugin');
  4. const CopyWebpackPlugin = require('copy-webpack-plugin');
  5. /**;
  6.  * @author rockshang
  7.  * @type {import('webpack').Configuration}
  8.  * @time 20-08-12
  9.  */
  10. module.exports = {
  11.   entry: {
  12.     index: './pages/js/index.js',
  13.     about: './pages/js/about.js',
  14.   },
  15.   output: {
  16.     filename: '[name].js',
  17.     path: __dirname + '/dist',
  18.   },
  19.   devServer: {
  20.     contentBase: path.join(__dirname, 'dist'),
  21.     compress: true,
  22.     port: 8000,
  23.     hot: true,
  24.     hotOnly: true,
  25.   },
  26.   mode: 'development',
  27.   module: {
  28.     rules: [
  29.       {
  30.         test: /\.css$/,
  31.         use: ['style-loader', 'css-loader'],
  32.       },
  33.       {
  34.         test: /\.md$/,
  35.         use: {
  36.           loader: './markdown-loader',
  37.           options: {
  38.             name: 'name',
  39.           },
  40.         },
  41.       },
  42.       {
  43.         test: /\.(png|svg|jpg|gif|mp4)$/,
  44.         use: [
  45.           {
  46.             loader: 'file-loader',
  47.             options: {
  48.               outputPath: './img',
  49.               publicPath: './img',
  50.             },
  51.           },
  52.         ],
  53.       },
  54.     ],
  55.   },
  56.   plugins: [
  57.     new CleanWebpackPlugin({
  58.       cleanOnceBeforeBuildPatterns: ['!markdown/**/*'],
  59.     }),
  60.     new HtmlWebpackPlugin({
  61.       template: './pages/index.html',
  62.       meta: {
  63.         viewport: 'width = device-width',
  64.       },
  65.       chunks: ['index.js'],
  66.       hash: true,
  67.     }),
  68.     new HtmlWebpackPlugin({
  69.       filename: 'about.html',
  70.       template: './pages/about.html',
  71.       chunks: ['about.js'],
  72.       hash: true,
  73.     }),
  74.   ],
  75. };

9、预览

image.png