记录一次webpack打包本地HTML-CSS-JS

1.新建文件夹 然后npm init - y

2.新建src文件,该文件夹下存放你要打包的文件

3.在项目根目录下安装webpack (npm i -D webpack webpack-cli)

4.项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件

5.webpack.config.js文件内容

var path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: path.join(__dirname, "./src/js/main.js"), //打包入口文件路径
  output: {
    path: path.resolve(__dirname, "./dist"), // 输出文件路径
    filename: "bundle.js", // 输出文件
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        use: ["html-loader"],
      },
      {
        test: /\.(png|jpg|jpeg|gif|webp)$/i,
        type: "asset/resource", // 使用asset module来处理图片文件
        generator: {
          filename: "img/[name][ext]", // 图片文件打包后存放的目录
        },
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            // 预设：知识babel做怎样的兼容性处理
            presets: [
              [
                "@babel/preset-env",
                {
                  // 按需加载
                  useBuiltIns: "usage",
                  // 指定core-js版本
                  corejs: 3,
                  // 指定浏览兼容性版本
                  targets: {
                    chrome: "60",
                    firefox: "60",
                    ie: "9",
                    safari: "10",
                    edge: "17",
                  },
                },
              ],
            ],
          },
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader", "postcss-loader"],
      },
    ],
  },
  plugins: [
    new htmlWebpackPlugin({
      template: "./src/index.html",
      filename: "index.html",
    }),
  ],
  devServer: {
    static: "./src",
    open: true,
    host: "local-ip",
    proxy: {
      "/shop": "请求地址", //转发请求到3000端口号
    },
  },
  // watch: true, // 监听改动,打包
};

6.package.json文件内容

{
  "name": "shopping",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "serve": "webpack serve --mode=development",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:dev": "webpack --mode development",
    "build:prod": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.20.12",
    "@babel/preset-env": "^7.20.2",
    "autoprefixer": "^10.4.14",
    "babel-loader": "^9.1.2",
    "browserlist": "^1.0.1",
    "core-js": "^3.27.2",
    "css-loader": "^6.8.1",
    "html-webpack-plugin": "^5.5.0",
    "node-sass": "^6.0.1",
    "postcss-loader": "^7.3.3",
    "sass-loader": "^10.0.0",
    "style-loader": "^3.3.3",
    "terser-webpack-plugin": "^5.3.6",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  },
  "dependencies": {
    "file-loader": "^6.2.0",
    "html-loader": "^4.2.0"
  },
  "broserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}