使用webpack打包js，css文件

首先环境要搭好

npm install -g webpack webpack-cli 
npm install --save-dev style-loader css-loader   # 打包css的插件

1.进入文件终端

执行

npm init -y   # -y表示全盘默认

2. 在根目录下创建配置文件webpack.config.js

const path = require("path"); //Node.js内置模块
module.exports = {
    entry: './src/main.js', //配置入口文件
    output: {
        path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
        filename: 'bundle.js' //输出文件
    },
    module: {
        rules: [
            {
                test: /\.css$/, //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }
        ]
    }
}

需要修改入口entry，可以修改存放路径。

3.执行打包

webpack --mode=development #没有警告

查看结果：