Webpack (一) 选项和配置

使用环境变量 --env.customVar 或 --env.customVar=value

当配置导出的对象是一个函数时,webpack命令中的--env.VARIABLE参数将合并为一个变量传入该函数,并使用该函数返回的对象作为配置.

module.exports = (env, argv) => config: WebpackConfig;
// env: 如果显式设置--env.VARIABLE=value,那么value根据具体情况可以解析为一个数字或者字符串,否则默认是布尔值true
{ VARIABLE: true, ... }
// argv: webpack打包信息,包含了env字段
{
  _: [],
  cache: null,
  bail: null,
  profile: null,
  color: { level: 1, hasBasic: true, has256: false, has16m: false },
  colors: { level: 1, hasBasic: true, has256: false, has16m: false },
  config: 'webpack.config.js',
  env: { production: true, rebuild: true },
  'info-verbosity': 'info',
  infoVerbosity: 'info',
  '$0': 'node_modules\\_webpack@4.43.0@webpack\\bin\\webpack.js'
}

更新：webpack5.0不再支持这种方式定义env变量，需要使用空格隔开：

webpack --env production

config.target

target指定目标环境,比如在electron环境中,require('electron')返回运行时原生模块,而不需要webpack打包npm下的electron模块,因此需要指定该目标为electron-renderer.

const CONFGI = {
      ...
      target: 'electron-renderer',
      ...
};
// 如此一来,在入口中
import 'electron';
// 不会被webpack处理,而是被替换成原生代码
require('electron');

config.externals

externals指定webpack不处理的模块,该模块由某个全局变量提供.

const CONFGI = {
      ...
      externals: {
            'jquery': '$', // 'jquery'模块将被全局变量$替换,而不是打包该npm模块 -- 更新: jquery的默认导出从全局变量$赋值
      },
      ...
};
// 再次重命名
import my$ from 'jquery';
// 相当于
const my$ = window.$;

eg

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

const DIR_PROJECT = path.resolve(__dirname, 'electron-demo');
const DIR_SRC = path.resolve(DIR_PROJECT, 'src');
const DIR_DIST = path.resolve(DIR_PROJECT,'dist');

const CONFIG = {
    entry: {
        index: path.resolve(DIR_SRC, 'index.js'),
        exlib: path.resolve(DIR_SRC, 'exlib.js'),
    },
    output: {
        filename: '[name].js',
        path: DIR_DIST,
    },
    module: {
        rules: [
            { test: /\.vue$/, use: 'vue-loader' },
            { test: /\.css$/, use: ['vue-style-loader', 'css-loader'] },
            { test: /\.(html|png|jpg|ico)$/, use: 'file-loader?name=[name].[ext]' },
        ],
    },
    plugins: [new VueLoaderPlugin()],
    mode: 'development',
    devtool: 'inline-source-map',
    devServer: {
        contentBase: DIR_DIST,
        https: false,
    },
    // target: 'electron-renderer',
    // externals: ['jquery'],
};

function config(env = {}, argv) {
    if (env.production) {
        console.log('Build production');
        CONFIG.mode = 'production';
        delete CONFIG.devtool;
        delete CONFIG.devServer;
    }
    if (env.rebuild) {
        console.log('Rebuild production');
        if (process.platform.match(/^win.*/)) {
            // Implement this on Windows OS
            const child_process = require('child_process');
            try {
                child_process.execSync(`rmdir /S /Q ${DIR_DIST}`);
            } catch(error) { }
        }
    }
    return CONFIG;
}
module.exports = config;

查找别名

    resolve: {
        extensions: ['.js', '.json'],
        alias: {
            '@': DIR_SRC, // 相对于src目录查找依赖 import '@/index';
        },
    },

END