webpack配置排除打包-整体分析

3,987 阅读2分钟

进行webpack优化的时候,我们首先得知道webpack的打包流程是啥样的 请添加图片描述

一、webpack打包流程

首先webpack打包会有默认的出口跟入口,还要一个入口跟出口的配置文件

    默认入口: ./src/index.js
    默认出口: ./dist/main.js
    webpack配置 - webpack.config.js(默认)

1. 新建src并列处, webpack.config.js

2. 填入配置项

    const path = require("path")
    
    module.exports = {
        entry: "./src/main.js", // 入口
        output: { 
            path: path.join(__dirname, "dist"), // 出口路径
            filename: "bundle.js" // 出口文件名
        }
    }

这个入口跟出口文件名可以自己进行定义

3. 修改package.json, 自定义打包命令 - 让webpack使用配置文件

    "scripts": {
        "build": "webpack"
    },

重点: 所有要被打包的资源都要跟入口产生直接/间接的引用关系

4. 打包流程

请添加图片描述

二、webpack配置排除打包-打包瘦身

通过配置vue-cli把一些平常不需要用的包排除在打包文件之外。

例如:我们使用了vue xlsx 和 element ,但是打包的时候我们不让 webpack 不打包 vue xlsx 和 element
先找到 vue.config.js, 添加 externals 项,具体如下:

    configureWebpack: {
      // 配置单页应用程序的页面的标题
      // 省略其他....
      externals: {
         /**
          * externals 对象属性解析。
          *  基本格式:
          *     '包名' : '在项目中引入的名字'
          *  
        */
        'vue': 'Vue',
        'element-ui': 'ElementUI',
        'xlsx': 'XLSX'
      },
      resolve: {
        alias: {
          '@': resolve('src')
        }
      }
    }

再次运行打包,我们会发现包的体积已经大幅减小:上面的三个包已经不在打包的目标文件中了。

做相关配置:通过公共网络资源方式把除在外的包引入在index.html

注意,在开发项目时,文件资源还是可以从本地node_modules中取出,而只有项目上线了,才需要去使用外部资源。此时我们可以使用环境变量来进行区分。具体如下:

在vue.config.js文件中:

let externals = {}
let cdn = { css: [], js: [] }
const isProduction = process.env.NODE_ENV === 'production' // 判断是否是生产环境
if (isProduction) {
  externals = {
      /**
      * externals 对象属性解析:
      * '包名' : '在项目中引入的名字'
    */
      'vue': 'Vue',
      'element-ui': 'ELEMENT',
      'xlsx': 'XLSX'
  }
  cdn = {
    css: [
      'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // element-ui css 样式表
    ],
    js: [
      // vue must at first!
      'https://unpkg.com/vue@2.6.12/dist/vue.js', // vuejs
      'https://unpkg.com/element-ui/lib/index.js', // element-ui js
      'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/xlsx.full.min.js', // xlsx
    ]
  }
}

webpack配置externals配置项

configureWebpack: {
  // 配置单页应用程序的页面的标题
  name: name,
+ externals: externals,
  resolve: {
    alias: {
      '@': resolve('src')
    }
  }
}

注入CDN配置到html模板

之后通过 html-webpack-plugin注入到 index.html之中:

在vue.config.js中,设置

  chainWebpack(config) {
  // 注入cdn变量 (打包时会执行)
  config.plugin('html').tap(args => {
   args[0].cdn = cdn // 配置cdn给插件
    return args
  })
  // 省略其他...
  }

找到 public/index.html 通过配置CDN Config 依次注入 css 和 js。

修改head的内容如下:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
      <!-- 引入样式 -->
      <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
        <link rel="stylesheet" href="<%=css%>">
       <% } %>

    <!-- 引入JS -->
    <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
      <script src="<%=js%>"></script>
   <% } %>
</head>

最后就可以进行打包 ,检查效果了

检查生成的index.html中是否有css引入和js引入

publicPath: './',

再次打开,就可以双击dist/index.html查看效果了

总体思路

请添加图片描述