dait-service v1.0.12

dait-service

dait-service 是为 dait 提供服务的核心模块。

dait-service 做了什么

• 集成了 webpack 自动化构建及其不同的环境配置。
• 集成了 eslint 检验
• 封装 MarkedEssay 插件，用于显示 markdown 的内容
• 读写 articles.json 支撑主题对 markdown 文件数据的依赖
• 提供可配置文件 dait.config.js

MarkedEssay

dait-service 封装了 MarkedEssay 组件用于显示 markdown 的内容。 可以直接在主题入口文件中 main.js 引入

import MarkedEssay from 'dait-service/components/MarkedEssay'

Vue.use(MarkedEssay)

props

dait.config.js

dait.config.js 需要遵循 commonJs 规范向外导出一个对象

config.site

site：object。为当前博客的站点信息。

config.theme

theme：string。为网站选用的主题名称。

config.configureWebpack

configureWebpack：object。为 webpack 自动化构建的配置对象

dev

prod

config.configurePostcss

configurePostcss：object。为 postcss 的配置对象

dait-service 默认配置

module.exports = {
  site: {
    title: 'blog',
    author: '',
    subtitle: 'my new blog',
    description: '',
    keywords: 'dait, blog, vue, gitee',
    language: 'zh-CN'
  },
  theme: 'default',
  configureWebpack: {
    entry: path.join(themePath, 'main.js'),
    output: path.join(cwd, './dist'),
    alias: {
      '@': path.join(cwd, './'),
      '@theme': themePath
    },
    rules: [],
    plugins: [],
    defineData: {},
    dev: {
      devtool: 'cheap-module-eval-source-map',
      devServer: {
        open: false,
        hot: true,
        port: 6800,
        clientLogLevel: 'warning'
      },
      rules: [
        {
          test: /\.css$/,
          use: [
            'vue-style-loader',
            {
              loader: 'css-loader',
              options: {
                esModule: false
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                postcssOptions: {
                  config: path.join(__dirname, './postcss.config.js')
                }
              }
            }
          ]
        },
        {
          test: /\.less$/,
          use: [
            'vue-style-loader',
            {
              loader: 'css-loader',
              options: {
                esModule: false
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                postcssOptions: {
                  config: path.join(__dirname, './postcss.config.js')
                }
              }
            },
            'less-loader'
          ]
        },
        {
          test: /\.vue$/,
          enforce: 'pre',
          exclude: [
            path.join(cwd, './node_modules'),
            path.resolve('./node_modules')
          ],
          loader: 'eslint-loader'
        },
        {
          test: /\.js$/,
          enforce: 'pre',
          exclude: [
            path.join(cwd, './node_modules'),
            path.resolve('./node_modules')
          ],
          loader: 'eslint-loader'
        }
      ],
      plugins: [
        new webpack.HotModuleReplacementPlugin()
      ]
    },
    prod: {
      devtool: 'none',
      optimization: {
        minimize: true,
        minimizer: [
          new OptimizeCssPlugin(),
          new TerserWebpackPlugin()
        ],
        splitChunks: {
          chunks: 'all',
          cacheGroups: {
            libs: {
              name: 'depend/chunk-libs',
              test: /[\\/]node_modules[\\/]/,
              priority: 10,
              chunks: 'initial' // 只打包初始时依赖的第三方
            },
            elementUI: {
              name: 'depend/chunk-elementUI', // 单独将 elementUI 拆包
              priority: 20, // 权重
              test: /[\\/]node_modules[\\/]element-ui[\\/]/
            },
            vueLibs: {
              name: 'depend/chunk-vue', // 单独将 vue 开头的依赖 拆包
              priority: 15, // 权重
              test: /[\\/]node_modules[\\/]vue/
            }
          }
        },
        runtimeChunk: 'single'
      },
      rules: [
        {
          test: /\.css$/,
          use: [
            CssExtractPlugin.loader,
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                postcssOptions: {
                  config: path.join(__dirname, './postcss.config.js')
                }
              }
            }
          ]
        },
        {
          test: /\.less$/,
          use: [
            CssExtractPlugin.loader,
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                postcssOptions: {
                  config: path.join(__dirname, './postcss.config.js')
                }
              }
            },
            'less-loader'
          ]
        }
      ],
      plugins: [
        new CleanPlugin(),
        new CssExtractPlugin({
          filename: 'css/[name]-[contenthash:8].css'
        })
      ]
    }
  },
  configurePostcss: {
    plugins: [
      require('autoprefixer'),
    ]
  }
}