# Webpack 常用的插件

# JSON 合并

merge-jsons-webpack-plugin (opens new window)

# 全局样式

style-resources-loader (opens new window)

# 依赖分析

webpack-bundle-analyzer (opens new window)1

# 条件编译

安装相关依赖

npm i js-conditional-compile-loader -D
npm i cross-env -D

修改打包配置

// webpack.base.conf.js
const conditionalCompiler = {
  loader: "js-conditional-compile-loader",
  options: {
    primary: process.env.version == "primary",
    senior: process.env.version == "senior",
    normal: process.env.oem == "", // undefined
  }
};
// webpack.base.conf.js
rules: [
  {
    test: /\.vue$/,
    // loader: "vue-loader",
    // options: vueLoaderConfig
    use: [
      {
        loader: "vue-loader",
        options: vueLoaderConfig
      },
      conditionalCompiler
    ]
  },
  {
    test: /\.js$/,
    // loader: "babel-loader",
    use: ["babel-loader", conditionalCompiler],
    include: [resolve("src"), resolve("test"), resolve("node_modules/webpack-dev-server/client")]
  }
];

package.json

通过命令行传入参数

{
  "dev:primary": "cross-env version=primary npm run dev",
  "dev:senior": "cross-env version=senior npm run dev"
}

在 JS 和 Vue 文件中使用

<template>
  <div id="app">
    <!-- /* IFTRUE_normal */ -->
    <img src="./assets/logo.png" />
    <!-- /* FIDEBUG_normal */ -->
    <!-- /* IFTRUE_youku */ -->
    <img src="./assets/logo_senior.png" />
    <!-- /* FITRUE_youku */ -->
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
  created() {
    /* IFTRUE_primary */
    console.log("primary");
    /* FITRUE_primary */
  }
};
</script>