webpack.config.js文件解读

一、配置文件介绍

 webpack.common.js:(公共配置文件)

module.exports = {
    entry: {
        SuperRenderGPU: "./main.js"
    },
    output: {
        libraryTarget: 'umd',
        umdNamedDefine: true
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: [/node_modules/],
                use: {
                    loader: 'babel-loader?cacheDirectory=true'
                }
            }
        ]
    }
};

 webpack.dev.js:(研发环境配置文件)

const path = require('path');
const { merge } = require('webpack-merge');

const common = require('./webpack.common');
const vs = require('../package.json').version;

module.exports = merge(common, {
    mode: 'development',
    devtool: "source-map",
    output: {
        path: path.resolve(__dirname, "../dist"),
        filename: `[name].js`,
    }
});

webpack.prod.js:(生成环境配置文件)

const path = require('path');
const { merge } = require('webpack-merge');

const common = require('./webpack.common');

module.exports = merge(common, {
    mode: 'production',
    output: {
        path: path.resolve(__dirname, "../dist"),
        filename: `[name].js`
    }
});

二、文件内容介绍

1、首先引入path

2、entry:为入口文件;

3、output:打包出口。

  • filename:打包好的名字。
  • path:打包好的路径(若无output路径,则会自动创建path.resolve(__dirname, "../dist"))

4、mode

  • mode:production为发布模式,development为开发模式

开发dev环境生成的.js是没有经过压缩的,可以看见大部分源代码;

生产pro环境生成的.js是经过压缩的,基本看不到源代码;

你可能感兴趣的