vue項目將css,js全部打包到html文件配置

module.exports={
  publicPath: './',//使用相對路徑
  productionSourceMap: false,
  // publicPath:"./",  // 可以設置成相對路徑，這樣所有的資源都會被鏈接為相對路徑，打出來的包可以被部署在任意路徑
  outputDir:"dist",  //打包時生成的生產環境構建文件的目錄
  chainWebpack: config => {
    config.plugin('preload')
      .tap(args => {
        args[0].fileBlacklist.push(/\.css/, /\.js/)
        return args
      })
    config.plugin('inline-source')
      .use(require('html-webpack-inline-source-plugin'))
    config
      .plugin('html')
      .tap(args => {
        args[0].title = 'JSON和PHP Array 互轉'
        args[0].inlineSource = '(\.css|\.js$)'
        return args
      })
  }
}



2.第二種

const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')

module.exports = {
  // publicPath: './',
  outputDir: './html/dist',
  productionSourceMap: false,
  runtimeCompiler: true,
  configureWebpack: {
    plugins: [
      new HtmlWebpackPlugin({
        inlineSource: '.(js|css)$',
        template: './public/index.html'
      }),
      new HtmlWebpackInlineSourcePlugin() // 實例化內聯資源插件
    ]
  }
}