美文网首页
2021-01-06

2021-01-06

作者: ZhiPengTu | 来源:发表于2021-01-06 15:04 被阅读0次

    index.html 模板修改 新增 htmlWebpackPlugin

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <!-- 启用360浏览器的极速模式(webkit) -->
        <meta name="renderer" content="webkit" />
        <!-- 避免IE使用兼容模式 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
        <title>  </title>
    
        <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
        <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
        <% } %>
      </head>
      <body>
        <noscript>
          <strong
            >We're sorry but dz-print doesn't work properly without JavaScript enabled. Please enable it
            to continue.</strong
          >
        </noscript>
        <div id="app"></div>
      </body>
    </html>
    
    
    
    
    
    var path = require("path");
    function resolve(dir) {
      return path.join(__dirname, dir);
    }
    
    const cdn = {
      // 忽略打包的第三方库
      externals: {
        // vue: "Vue",
        // vuex: "Vuex",
        // "vue-router": "VueRouter",
        // axios: "axios",
        // moment: "moment",
        // "element-ui": "Element",
        echarts: "echarts",
      },
    
      // 通过cdn方式使用
      js: [
         "https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.runtime.min.js",
          "https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js",
          "https://cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js",
        "https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js",
         "https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/locale/af.js",
        "https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js",
        "https://lib.baomitu.com/echarts/4.0.0/echarts-en.common.js",
      ],
      // css: ["https://cdn.jsdelivr.net/npm/element-ui@2.9.2/lib/theme-chalk/index.css"],
    };
    
    module.exports = {
      publicPath: "./",
      devServer: {
        open: true,
        port: 8098, // 端口
      },
      // 生产环境是否生成 sourceMap 文件
      productionSourceMap: false,
      // drop_console: process.env.NODE_ENV === "production", //清除 console 语句
      // drop_debugger: process.env.NODE_ENV === "production", //清除 debugger 语句
      configureWebpack: (config) => {
        if (process.env.NODE_ENV === "production") {
          config.externals = cdn.externals;
        }
    
        Object.assign(config.resolve, {
          alias: {
            "@": resolve("./src"),
            assets: resolve("./src/assets"),
            common: resolve("./src/common"),
            components: resolve("./src/components"),
            styles: resolve("./src/styles"),
            views: resolve("./src/views"),
            plugins: resolve("./src/plugins"),
            "@business": resolve("./src"),
          },
        });
      },
      chainWebpack: (config) => {
        // 移除 prefetch 插件
        config.plugins.delete("prefetch");
        // 移除 preload 插件
        config.plugins.delete("preload");
    
        if (process.env.NODE_ENV === "production") {
          // 配置cdn引入
          config.plugin("html").tap((args) => {
            args[0].cdn = cdn;
            return args;
          });
        }
      },
    };
    
    
    

    相关文章

      网友评论

          本文标题:2021-01-06

          本文链接:https://www.haomeiwen.com/subject/nhgnoktx.html