vue脚手架使用 html-webpack-plugin插件

vue脚手架使用 html-webpack-plugin插件

插件的作用

1、会在内存中生成一个html，也是在根目录
2、自动引入内存中的打包的js文件

在根目录创建config.vue.js文件

module.exports = {
  chainWebpack: config => {
  // 判断为 发布阶段 设置入口文件为 main-prod.js
    // config.when() 类似于 if()
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')

      //使用externals设置排除项
      config.set('externals',{
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor'
      })
        // 使用配置 html-webpack-plugin 插件 生成发布html入口
        config.plugin('html').tap(args => {
          // 添加参数isProd
          args[0].isProd = true
          return args
        })
    })

    // 判断为 开发阶段 设置入口文件为 main-dev.js
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
      // 生成开发html入口
      config.plugin('html').tap(args => {
        // 添加参数isProd
        // 开发阶段也添加一个标识，为flase
        args[0].isProd = false
        return args
      })
    })
  }
}

配置public/index.html文件

发布上线和开发阶段下的html 标题

在页面通过htmlWebpackPlugin获取到标识，判断该标识为true还是false，如果是true代表发布阶段，应该添加cdn资源，如果是false不需要添加

<% if(htmlWebpackPlugin.options.isProd){ %>
cdn资源文件
<% } %>