webpack文档基础设置

webpack码云地址：

https://gitee.com/wang_yu5201314/webpackconfigjs-basic-settings

npm i 插件名称 —S 为项目开发和上线阶段都要使用的时候
npm i 插件名称 —D 为项目开发阶段使用的时候

webpack.config.js 为webpack插件构建js文档

webpack 基础包
webpack-cli 运行包
webpack-dev-server 每次代码修改保存后自动打包程序
html-webpack-plugin 讲指定的页面复制一份放在根目录文件下
clean-webpack-plugin 刷新重新打包后的文件数据

style-loader css-loader // 处理 .css 后缀文件
less-loader less // 处理 .less 后缀文件
url-loader file-loader // 处理图片文件

在根目录下创建babel.config.js文件 需要在webpack.config.js和 babel.config.js 文件下进行定义配置
babel-loader @babel/core @babel/plugin-proposal-decorators //处理自己添加的高级js文件
@babel/preset-env core-js

webpack.config.js 文档配置

const path = require("path");

// 1. 导入 html-webpack-plugin 这个插件，得到插件的构造函数
const HtmlPlugin = require("html-webpack-plugin");
// 2. new 构造函数，创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
  // 指定要复制哪个页面(主页面)
  template: "./src/index.html",
  // 指定复制出来的文件名和存放路径
  filename: "./index.html",
});
// 注意：左侧的 { } 是解构赋值
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
   // 可以了解到开发时出错的具体位置
    // 在开发调试阶段，建议大家都把 devtool 的值设置为 eval-source-map
  devtool: 'eval-source-map',
  // 在实际发布的时候，建议大家把 devtool 的值设置为 nosources-source-map 或直接关闭 SourceMap
  // devtool: 'nosources-source-map',
  // mode 代表 webpack 运行的模式，可选值有两个 开发中 development 和 上线中 production
  mode: "development",
  // entry: '指定要处理哪个文件' __dirname 当前文档的存放路径
  entry: path.join(__dirname, "./src/index.js"),
  // 指定生成的文件要存放到哪里
  output: {
    // 存放的目录
    path: path.join(__dirname, "dist"),
    // 生成的文件名
    filename: "js/bundle.js",
  },
  // 3. 插件的数组，将来 webpack 在运行时，会加载并调用这些插件
  plugins: [htmlPlugin, new CleanWebpackPlugin()],
  devServer: {
    // 首次打包成功后，自动打开浏览器
    open: true,
    // 在 http 协议中，如果端口号是 80，则可以被省略
    port: 80,
    // 指定运行的主机地址
    host: "127.0.0.1",
  },
  module: {
    rules: [
      // 定义了不同模块对应的 loader
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      // 处理 .less 文件的 loader
      { test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] },
      // 处理图片文件的 loader
      // 如果需要调用的 loader 只有一个，则只传递一个字符串也行，如果有多个loader，则必须指定数组
      // 在配置 url-loader 的时候，多个参数之间，使用 & 符号进行分隔
      // 通过limit 通知 webpack 图片的大小 <= limit的大小则 进行base64文件的转化
      // 通过 outputPath 通知 webpack 图片打包后所保存的文件夹名称
      //   多个参数用 & 符号进行分割
      {
        test: /\.jpg|png|gif$/,
        use: "url-loader?limit=470&outputPath=images",
      },
      // 使用 babel-loader 处理高级的 JS 语法
      // 在配置 babel-loader 的时候，程序员只需要把自己的代码进行转换即可；一定要排除 node_modules 目录中的 JS 文件
      // 用 exclude 进行排除第三方的js文件
      // 因为第三方包中的 JS 兼容性，不需要程序员关心
      { test: /\.js$/, use: "babel-loader", exclude: /node_modules/ },
    ],
  },
  resolve: {
    alias: {
      // 告诉 webpack，程序员写的代码中，@ 符号表示 src 这一层目录
      "@": path.join(__dirname, "./src/"),
    },
  },
};

babel.config.js 文档配置

module.exports = {
  // 声明 babel 可用的插件
  // 将来，webpack 在调用 babel-loader 的时候，会先加载 plugins 插件来使用
  plugins: [["@babel/plugin-proposal-decorators", { legacy: true }]],
};

package.json 文档配置

{
  "name": "study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack serve",  // 启动设置
    "build": "webpack --mode production" //打包设置
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.6.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.5",
    "@babel/plugin-proposal-decorators": "^7.20.5",
    "babel-loader": "^9.1.0",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.7.3",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "less": "^4.1.3",
    "less-loader": "^11.1.0",
    "style-loader": "^3.3.1",
    "url-loader": "^4.1.1",
    "webpack": "^5.42.1",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^3.11.2"
  }
}