webpack5 简单打包

创建index.js作为入口文件（webpack打包会根据这个入口开始寻找依赖）

配置入口文件和输出目录

module.exports = {
    mode: 'development',
    entry: path.join(__dirname, './index.js'),//入口index.js开始
    output: {
        filename: 'built.js',//打包后的js名字
        path: resolve(__dirname, './build')//输出的目录地址
    },
};

配置一些基本的 loader，loader在webpack中类似于一个翻译官，因为webpack只认识js代码 下载css-loader、style-loader

module.exports = {
    mode: 'development',
    entry: path.join(__dirname, './index.js'),//入口index.js开始
    output: {
        filename: 'built.js',//打包后的js名字
        path: resolve(__dirname, './build')//输出的目录地址
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                //配置loader 默认是从右往左执行（也可以修改执行顺序），css-loader先解析index.js依赖的css文件 
                //之后style-loader把css-loader解析的代码生成到index.html的style中
                use: ['style-loader', 'css-loader']
            },
        ]
    },
};

配置一些plugins ，plugins在webpack中的作用主要是在webpack打包的某些阶段做一些事情。
下载html-webpack-plugin 和 clean-webpack-plugin
完整代码

module.exports = {
    mode: 'development',
    entry: path.join(__dirname, './index.js'),
    output: {
        filename: 'built.js',
        path: resolve(__dirname, './build')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
        ]
    },
    plugins: [
    	//打包后生成index.html , 也可以指定自己的 template
        new HtmlWebpackPlugin({
            template: './index.html',
        }),
        //每次打包的时候先清空之前打包的内容
        new CleanWebpackPlugin(),
    ],
};