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() // 實例化內聯資源插件
    ]
  }
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM