webpack 4.x基本使用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_37615202/article/details/88640975

const webpack = require("webpack");
const os = require("os");
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const glob = require('glob');

//获取本地ip
let IPv4 = "0.0.0.0";
function getIPAdress() {
    let network = os.networkInterfaces();
    for (let devName in network) {
        let iface = network[devName];
        for (let i = 0; i < iface.length; i++) {
            let alias = iface[i];
            if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
                return alias.address;
            }
        }
    }
}
try {
    IPv4 = getIPAdress();
} catch (e) {
    IPv4 = 'localhost';
}

//这儿开始配置
module.exports = {
    //入口文件  单独一个可以写成直接字符串写入路径，如果有多个启动入口建议调用函数的类型
    entry: getEntry(),
    //打包文件名称及路径
    output: {
        filename: 'js/[name].js',
        path: path.resolve(__dirname, 'dist'),
    },
    //扩展webpack功能
    plugins: [
        //复制目标路径的文件
        new CopyWebpackPlugin([{
            from: './src/templates/old/*.html',
            to: './',
            flatten: true
        },{
			from: './src/css',
			to: './css'
		}]),
        //打包之前先清除 之前dist目录下的文件
        new CleanWebpackPlugin(['dist']),
        //webpack 模块热更新 实时预览
        new webpack.HotModuleReplacementPlugin()
    ],
    //配置加载和转换规则
    module: {
        rules: [
            {
                test: /\.(scss|css)$/,
                exclude: /node_modules/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    //可以添加参数 对编译后的css进行压缩
                    use: ['css-loader?mincss', "sass-loader"]
                })
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                exclude: /node_modules/,
                use: [{
                    loader: 'url-loader',
                }]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['webpack-replace-loader']
            }
        ]
    },
	//webpack4.x 代码分离、共用代码及第三方插件(模块)
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    chunks: "initial",
                    name: "common",
                    minChunks: 2,
                    minSize: 0
                },
                vendor: {
                    test: /node_modules/,
                    chunks: 'initial',
                    name: 'vendor',
                    priority: 10
                },
            }
        }
    },
    //本地启服务 ip || localhost 配置
    devServer: { //配置此静态文件服务器，可以用来预览打包后项目
        inline: true, //打包后加入一个websocket客户端
        hot: true, //热加载
        contentBase: path.resolve(__dirname, 'dist'), //开发服务运行时的文件根目录
		host: IPv4, //本机局域网ip
		openPage: `apply.html`,
        port: 9090, //端口号
        compress: true //开发服务器是否启动gzip等压缩
    }
};
function getEntry() {
    var entry = {};
    glob.sync('./src/templates/old/js/**/*.js').forEach(function (name) {
        var start = name.indexOf('js/') + 3
        var end = name.length - 3;
        var eArr = [];
        var n = name.slice(start, end);
        eArr.push(name);
        entry[n] = eArr;
    })
    return entry;
}