Day04-Webpack打包js、css文件

以下是一个简单的webpack配置示例，用于打包JavaScript和CSS文件：

1. 安装webpack和webpack-cli作为项目依赖：

npm install --save-dev webpack webpack-cli

2. 创建一个webpack.config.js文件，并配置入口和输出：

const path = require('path');
 
module.exports = {
  entry: './src/index.js', // 入口文件路径
  output: {
    filename: 'bundle.js', // 打包后的文件名
    path: path.resolve(__dirname, 'dist'), // 打包后的目录
  },
  module: {
    rules: [
      {
        test: /\.css$/, // 正则表达式，匹配.css文件
        use: [
          'style-loader', // 将CSS添加到DOM中
          'css-loader' // 将CSS文件转换成commonjs模块
        ]
      },
      {
        test: /\.js$/, // 正则表达式，匹配.js文件
        exclude: /node_modules/, // 排除node_modules目录
        use: {
          loader: 'babel-loader', // 使用babel转换ES6
          options: {
            presets: ['@babel/preset-env'] // 转换ES6的规则
          }
        }
      }
    ]
  }
};

3. 安装必要的webpack加载器：

npm install --save-dev style-loader css-loader babel-loader @babel/preset-env

4. 创建一个简单的项目结构和文件：

project
│
├── package.json
├── src
│   ├── index.js
│   └── style.css
│
└── webpack.config.js

5. 在index.js和style.css中编写简单的代码。
6. 运行webpack打包：

npx webpack

这将会在dist目录下生成一个打包后的bundle.js文件，同时所有的CSS会被添加到页面中。