17_webpack配置文件的分离

当我们实际项目的开发过程中，某些配置文件只是在开发环境中有依赖，并不想让其打包到生产环境中去，那么怎么办呢？

配置文件的分离

首先我们可以在项目根路径中创建一个config文件夹，并且在文件夹中创建webpack.common.js、webpack.dev.js、webpack.prod.js

 

 

commmon中放公共的配置

dev中放开发环境下的配置

prod中放生产环境下的配置

 

webpack区分开发环境和生产环境

在package.json的scripts中修改脚本

 

 

 指定配置文件

webpack导出配置文件中的函数，并且执行的时候会把env传入进去

webpack.common.js

const path = require("path");
module.exports = function (env) {
  console.log("---------", env);
  return {
    //这里的路径要写./ 
    entry: "./src/main.js",
    output: {
      path: path.resolve(__dirname, "../build"),
    },
  };
};

执行npm run serve的时候会打印

执行npm run build的时候会打印

 

 

 这样子我们就已经把开发环境和生产环境分开来了

 

为什么我们的entry不写../而要写./呢?
最终入口目录的生成不仅仅和entry有关系，还和context有关系

./并不是相对于当前文件所在的路径，而是相对于context路径的，所以我们可以配置context

{
    // 绝对路径
    context: path.resolve(__dirname, "./"),
    // entry写上相对路径时，并不是相对于文件所在的路径，而是相对于context配置的路径
    entry: "../src/main.js",
    output: {
      path: path.resolve(__dirname, "../build"),
    },
  };

对于context，webpack的解释：基础目录，一个绝对路径，用于从配置中解析入口点(entry)和加载程序(loader)。

context的默认值：webpack 配置之 入口起点 entry 和上下文 context (tensweets.com)

 

怎么判断区分开发环境和生产环境？

我们在配置文件中设置了mode属性是development或者是production
当我们设置过后会webpack将DefinePlugin中process.env.NODE_ENV的值设置为mode对应的值

process.env.NODE_ENV：当你处于开发环境时值为development，当你处于生产环境时值为production

 

babel.config.js中如何区分环境？

babel.config.js
webpack加载js文件的时候它会使用bable-loader,babel-loader去使用babel.config.js，
bable.config.js是属于bable-loader会加载的文件，bable-loader并没有设置过process.env.NODE_ENV，所以在判断的时候取出来的值为undefined

我们在webpack.common.js可以设置node的进程对象中的env属性，然后再在bable.config.js中读取

module.exports = function (env) {

　　　const isProduction = env.production;

  　　process.env.NODE_ENV = isProduction ? "production" : "development";

}

bable.config.js

const plugins = [];

const presets = [];

const isProduction = process.env.NODE_ENV === "production";

if (!isProduction) {

  plugins.push(["开发环境下的plugin"]);

} else {

  presets.push(["生产环境下使用的preset"]);

}

module.exports = {};

 

对配置文件进行合并

npm i webpack-merge -D

在webpack.common.js中的代码

const resolveApp = require("./path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");

const { merge } = require("webpack-merge");

const prodConfig = require("./webpack.prod");
const devConfig = require("./webpack.dev");

const commonConfig = {
  // 绝对路径
  // context: path.resolve(__dirname, "./"),
  // entry写上相对路径时，并不是相对于文件所在的路径，而是相对于context配置的路径
  entry: "./src/main.js",
  output: {
    path: resolveApp("./build"),
  },
  plugins: [
    //开发生产都需要
    new HtmlWebpackPlugin({
      template: "./index.html",
    }),
    new VueLoaderPlugin(),
  ],
  resolve: {
    extensions: [".vue", ".js"],
    alias: {
      "@": resolveApp("./src"),
      pages: resolveApp("./src/pages"),
    },
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: "babel-loader",
      },
      {
        test: /\.vue$/,
        use: "vue-loader",
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

module.exports = function (env) {
  const isProduction = env.production;
  process.env.NODE_ENV = isProduction ? "production" : "development";
  return isProduction
    ? merge(commonConfig, prodConfig)
    : merge(commonConfig, devConfig);
};

webpack.dev.js

const resolveApp = require("./path");
module.exports = {
  mode: "development",
  devServer: {
    compress: true,
    port: "8080",
    open: true,
    hot: "only",
    host: "127.0.0.1",
    static: {
      directory: resolveApp("./abc"),
      watch: false,
    },
    proxy: {
      "/api": {
        target: "http://localhost:8000",
        //路径重写
        pathRewrite: {
          "^/api": "",
        },
        secure: false,
        changeOrigin: true,
      },
    },
    historyApiFallback: {
      //因为我设置了publicPath所以这里要加上publicPath才能映射到index.html
      index: "/index.html",
      // rewrites: [{ from: /\/a\//, to: "/index.html" }],
    },
  },
  plugins: [],
};

webpack.prod.js

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
  mode: "production",
  plugins: [new CleanWebpackPlugin()],
};

这样子就可以完成合并了，在不同的环境使用不同的配置