Vue CLIでjavascript/cssをひとつのhtmlに埋め込む

May 28, 2020 by Chachay
, ,

クラウドストレージなどでHTMLプレビュー機能が強化され、Vueで作ったSingle Page Applicationもホストしたりできそうという期待から、 JavascriptやCSSの全てをひとつのHTMLファイルに埋め込む方法を試しました。

環境

VueのVersion等

いわゆるデフォルトのプロジェクトを使います。

html-webbpack-inline-source-pluginの導入

javascriptとcssの展開・埋め込みにhtml-webpack-inline-source-plugin - npmを使います。

yarn add --dev html-webpack-inline-source-plugin

Buildの設定(vue.config.js)

プロジェクトのルートにvue.config.jsを作成します。

// vue.config.js
module.exports = {
  css: {
    extract: false
  },
  chainWebpack: config => {
    config.plugin('inline-source')
      .use(require('html-webpack-inline-source-plugin'))

    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => Object.assign(options, { limit: 10240 }))

    config
      .plugin('html')
      .tap(args => {
        args[0].inlineSource = '.(js|css)$'
        return args
      })
  }
}

あとはいつもどおり

yarn build

で/dist以下にindex.htmlが作成されます。

参考

at

No comments:

Post a Comment