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() // 实例化内联资源插件
    ]
  }
}

 

posted @ 2020-04-02 20:16  lcosima  阅读(1434)  评论(0编辑  收藏