把JS打包成单个文件

const path = require("path");

module.exports = {
    entry: "./app/index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    }
}

打包成多个JS文件

const path = require('path');

module.exports = {

    entry: {
        home: './app/home.js',
        about: './app/about.js'
    },

    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].js" 
    }
}

CSS和JS打包成一个文件

const path = require("path");

module.exports = {
    entry: {
        home: "./app/home.js"
    },

    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].js"
    },

    module: {
        rules: [
            {
                test: /\.css$/, 
                use: [
                    //经过查阅资料和自己对css-loader和style-loader的配置才发现，其实css-loader和style-loader在配置文件中的书写顺序是有问题的，我们都知道css-loader会遍历所有的css文件，找到所有的url（...）并进行处理，style-loader则是把所有的样式插入到页面的style标签里面，因此，这个顺序是先加载css-loader再加载style-loader，但是在webpack.config.js文件里面，loader的解析是逆序的，因此要把style-loader写在css-loader的前面；
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
}

图片和JS打包成一个文件

const path = require("path");

module.exports = {
    entry: {
        home:"./app/home.js"
    },

    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].js", 
    },

    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    }
}

const path = require("path");

module.exports = {
    entry: {
        home:"./app/home.js"
    },

    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].js",
        publicPath:"./dist/"
    },

    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.css$/, 
                use: [
                    //经过查阅资料和自己对css-loader和style-loader的配置才发现，其实css-loader和style-loader在配置文件中的书写顺序是有问题的，我们都知道css-loader会遍历所有的css文件，找到所有的url（...）并进行处理，style-loader则是把所有的样式插入到页面的style标签里面，因此，这个顺序是先加载css-loader再加载style-loader，但是在webpack.config.js文件里面，loader的解析是逆序的，因此要把style-loader写在css-loader的前面；
                    'style-loader',
                    'css-loader'
                ]
            }

        ]
    }
}

const path = require("path");
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: {
        home: "./app/home.js"
    },

    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].js"
    },

    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    use:"css-loader"
                })
            }

        ]
    },

    plugins:[
        new ExtractTextPlugin("home.css")
    ]
}