标签 webpack 下的文章

解决bug: webpack ＜ 5 used to include polyfills for node.js core modules by default 的报错

System

2024-08-15

所有,nodejs

这个报错信息表明你正在使用的webpack版本低于5，而webpack 5之前的版本会自动为Node.js核心模块（例如process、buffer等）提供polyfills。这有助于在浏览器中运行这些Node.js特有的模块。

报错信息可能是webpack打包时提示的一个警告，而不是一个真正的错误。这意味着webpack没有为这些核心模块自动注入polyfills。

解决方法：

升级webpack到5.x版本。这是最直接的解决方法，因为webpack 5已经不再自动为Node.js核心模块注入polyfills，而是通过其他方式来支持这些模块的运行，例如使用nodePolyfillPlugin插件。
如果你选择不升级webpack，可以手动安装并配置nodePolyfillPlugin或其他类似的插件，以便在webpack打包时为这些核心模块注入polyfills。
检查你的代码，确保不依赖于webpack提供的这些自动polyfills，而是显式地引入需要的Node.js核心模块。例如，如果你的代码中使用了process.env.NODE_ENV，你可以改为显式地引入process模块并使用process.env.NODE_ENV。

以下是使用nodePolyfillPlugin的示例配置：




// webpack.config.js
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
 
module.exports = {
  // ... 其他webpack配置
  plugins: [
    // ... 其他插件
    new NodePolyfillPlugin()
  ]
};

请根据你的项目具体情况选择合适的解决方案。如果你的项目依赖于这些自动polyfills，那么升级到webpack 5可能会导致构建失败，这时你需要对代码进行适当的修改。

System

2024-08-15

所有,html

报错解释：

这个错误表明在尝试使用webpack打包项目时，webpack无法找到名为html-webpack-plugin的模块。这通常是因为该模块没有正确安装到项目中，或者node_modules文件夹不存在。

解决方法：

确认是否已经初始化了npm（查看是否有package.json文件）。
如果没有，请运行npm init来创建一个。
安装html-webpack-plugin模块，运行命令：npm install html-webpack-plugin --save-dev。
确认webpack.config.js文件中是否正确引入了html-webpack-plugin，例如：const HtmlWebpackPlugin = require('html-webpack-plugin')。
如果以上步骤都正确无误，尝试删除node_modules文件夹和package-lock.json文件，然后运行npm install重新安装所有依赖。

System

2024-08-15

所有,html

在Vue 3项目中，如果你使用了html-webpack-plugin来设置页面的标题，并且想要在运行时动态修改这个标题，你可以通过访问document.title来实现。

首先，确保你在vue.config.js中正确配置了html-webpack-plugin，例如：




// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new HtmlWebpackPlugin({
        title: 'My App',
        // 其他配置...
      }),
    ],
  },
};

然后，你可以在Vue组件中使用mounted钩子函数来修改标题：




<script>
export default {
  mounted() {
    document.title = 'New Title';
  },
};
</script>

每当这个组件被挂载时，浏览器的标题就会被设置为'New Title'。如果你需要在多个组件之间共享设置标题的逻辑，可以考虑使用Vuex或者提供一个全局的函数来更改标题。

如果你想要在多个页面上使用不同的标题，你可以使用Vue Router的导航守卫来在路由切换时设置标题：




const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: HomeComponent,
      meta: { title: 'Home Page' },
    },
    // 其他路由...
  ],
});
 
router.beforeEach((to, from, next) => {
  if (to.meta && to.meta.title) {
    document.title = to.meta.title;
  }
  next();
});

在这个例子中，我们通过Vue Router的beforeEach导航守卫在每次路由切换之前设置页面标题。这样，你可以在路由的定义中为每个页面设置不同的标题。

- 阅读更多 -

Day04-Webpack打包js、css文件

System

2024-08-15

所有,css

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

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




npm install --save-dev webpack webpack-cli

创建一个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的规则
          }
        }
      }
    ]
  }
};

安装必要的webpack加载器：




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

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




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

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




npx webpack

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

System

2024-08-15

所有,ajax

AJAX 是 Asynchronous JavaScript and XML 的缩写，是一种创建交互式网页的技术。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Webpack 是一个模块打包工具，它能把各种资源，例如 JavaScript、CSS、图片等都作为模块来处理和利用。Git 是一个分布式版本控制系统，用于跟踪计算机文件的变化并协调不同用户之间的工作。

以下是使用 AJAX、Node.js、Webpack 和 Git 的一个基本示例：

创建一个简单的 HTML 页面，用于发送 AJAX 请求：




<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX Example</title>
</head>
<body>
    <button id="sendRequest">Send Request</button>
    <script src="bundle.js"></script>
</body>
</html>

创建一个 JavaScript 文件，用于初始化 AJAX 请求：




// app.js
document.getElementById('sendRequest').addEventListener('click', function() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://localhost:3000/api/data", true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            alert(xhr.responseText);
        }
    };
    xhr.send();
});

创建一个 Node.js 服务器，用于响应 AJAX 请求：




// server.js
const express = require('express');
const app = express();
 
app.get('/api/data', (req, res) => {
    res.send('Hello from server!');
});
 
app.listen(3000, () => {
    console.log('Server running on port 3000');
});

使用 Webpack 来打包你的 JavaScript 文件：




// webpack.config.js
module.exports = {
    entry: './app.js',
    output: {
        filename: 'bundle.js'
    }
};

使用 Git 来管理你的代码版本。

确保你已经安装了 Node.js 和 npm，然后通过 npm 安装 express：




npm install express

同时，确保安装了 webpack 和 webpack-cli：




npm install webpack webpack-cli

运行 Node.js 服务器：




node server.js

运行 Webpack 打包：




webpack --mode development

这样，你就可以通过 AJAX 向本地的 Node.js 服务器发送请求，并获取响应。使用 Git 来管理你的代码版本。

- 阅读更多 -

【渗透测试】Webpack源码泄露（js.map泄露）

System

2024-08-15

所有,javascript

解释：

Webpack 是一个模块打包工具，它可以分析项目的依赖关系，将这些模块打包在一起。在打包过程中，如果配置不当，可能会生成 source map 文件（.js.map），这些文件用于将打包后的代码映射回原始源代码，便于开发者调试。然而，如果这些 .js.map 文件被错误地或者无意中暴露在公共目录下，那么攻击者就可以获取到源代码的相关信息，这可能导致源代码泄露，从而影响应用的安全性。

解决方法：

生产环境不要开启 source map。可以在 webpack 配置文件中将 devtool 设置为 false，或者更改为更加严格的配置，例如 'source-map' 改为 'hidden-source-map'。
确保 .js.map 文件不会被直接访问。可以通过服务器配置（如 Apache 的 .htaccess 文件，Nginx 配置）来禁止 .map 文件的访问。
使用 webpack-bundle-analyzer 插件分析打包体积和依赖，避免将敏感信息打包进 bundle。
定期更新源代码和依赖，并及时修补漏洞。

示例配置（在 webpack.config.js 中）：




// 关闭 source map
devtool: false,

或者更改 source map 的模式：




// 使用更安全的 source map 模式
devtool: 'hidden-source-map',

以上方法可以有效减少源代码泄露的风险。

System

2024-08-15

所有,vue.js

前端开发中常用的命令行工具和操作命令包括但不限于：

Node.js 和 npm:
- 安装Node.js和npm: 访问Node.js官网安装。
- 更新npm: npm install -g npm@latest
- 安装项目依赖: npm install
- 运行项目: npm start
- 构建项目: npm run build
Yarn:
- 安装Yarn: npm install -g yarn
- 安装项目依赖: yarn install
- 运行项目: yarn start
- 构建项目: yarn build
Vue CLI:
- 安装Vue CLI: npm install -g @vue/cli
- 创建新项目: vue create my-project
- 运行项目: cd my-project 然后 npm run serve
React CLI:
- 创建新项目: npx create-react-app my-app
- 运行项目: cd my-app 然后 npm start
Git:
- 安装Git: 访问Git官网下载安装。
- 初始化新仓库: git init
- 克隆仓库: git clone <repository_url>
- 提交更改: git add . 然后 git commit -m "Commit message"
- 推送到远程仓库: git push
WebP:
- 通常不作为命令行工具，而是通过图片处理软件或在线工具转换图片格式为WebP。

以上命令提供了一个基本的概念，实际使用时可能需要根据项目配置和具体需求进行调整。

System

2024-08-14

所有,elasticsearch

在Webpack中，ProvidePlugin 插件用于自动加载模块，即无需在每个文件中显式 require 或 import 模块。

以下是如何在 webpack.config.js 中配置 ProvidePlugin 的示例：




const webpack = require('webpack');
 
module.exports = {
  // ... 其他webpack配置
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
    }),
  ],
};

在这个例子中，jquery 会自动被加载，并且可以在你的应用代码中通过 $, jQuery, 或 window.jQuery 来访问。

关于ESLint配置，你需要在项目根目录下创建一个 .eslintrc.js 文件（或者JSON/YAML等格式的配置文件），并在其中配置环境共享模块（env）、全局变量（globals）、插件（plugins）等。

以下是一个简单的 .eslintrc.js 配置示例，它使用了之前提到的 ProvidePlugin 插件中定义的全局变量：




module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: [
    'react',
  ],
  rules: {
    // 在这里定义你的规则覆盖
  },
  globals: {
    jQuery: 'readonly',
    $: 'readonly',
  },
};

在这个配置中，jQuery 和 $ 被定义为只读，意味着它们可以被使用，但不能被重新赋值。这与 ProvidePlugin 插件中定义的一致，确保了 ESLint 能正确识别这些全局变量。

System

2024-08-14

所有,react native

为了在React Native项目中启用Web支持并自定义Web端的webpack配置，你需要按照以下步骤操作：

安装必要的依赖项：




npm install --save react-native-web
npm install --save-dev customize-cra

在项目根目录下创建一个webpack.config.js文件，并配置自定义webpack设置。
修改package.json中的脚本部分，以便使用自定义的webpack配置：




"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "web-start": "react-app-rewired start",
  "web-build": "react-app-rewired build"
}

安装react-app-rewired：




npm install --save-dev react-app-rewired

在项目根目录下创建一个config-overrides.js文件，并导出自定义配置：




const { override, addWebpackAlias } = require('customize-cra');
 
const path = require('path');
 
module.exports = override(
  // 添加别名，例如将'@'指向src目录
  addWebpackAlias({
    '@': path.resolve(__dirname, 'src'),
  }),
  // 添加其他自定义webpack配置规则
);

使用npm run web-start和npm run web-build来启动开发服务器或构建Web应用。

以下是一个简单的webpack.config.js示例，它添加了对CSS模块的支持并配置了图片加载器：




const path = require('path');
const webpack = require('webpack');
 
module.exports = function(webpackEnv) {
  return {
    // 省略其他配置...
    module: {
      rules: [
        // 支持CSS模块
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
        // 配置图片加载器
        {
          test: /\.(gif|jpe?g|png|svg)$/,
          use: {
            loader: 'url-loader',
            options: {
              name: 'images/[name].[ext]',
            },
          },
        },
      ],
    },
    // 配置别名
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
      },
    },
    // 插件配置
    plugins: [
      // 例如使用DefinePlugin定义环境变量
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(webpackEnv)
      }),
    ],
  };
};

确保你的项目中已经有了react-scripts，它通常是通过create-react-app创建的应用时自动安装的。如果没有，你可以通过运行npx create-react-app my-app来创建一个新的React应用，或者手动安装它：npm install --save react-scripts。

- 阅读更多 -

webpack（13）处理样式兼容问题和压缩css文件

System

2024-08-14

所有,css




var ExtractTextPlugin = require("extract-text-webpack-plugin");
 
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [
            {
              loader: "css-loader",
              options: {
                minimize: true,
                // 添加autoprefixer插件
                importLoaders: 2,
                sourceMap: true
              }
            },
            {
              loader: "postcss-loader",
              options: {
                plugins: function() {
                  return [
                    require("autoprefixer")({
                      browsers: ["last 2 versions"]
                    })
                  ];
                }
              }
            },
            "sass-loader"
          ]
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({
      filename: "[name].min.css"
    })
  ]
};

这段代码使用了extract-text-webpack-plugin来提取出SCSS文件并使用css-loader、postcss-loader和sass-loader进行处理，并通过autoprefixer插件来添加浏览器兼容性。最后，使用ExtractTextPlugin插件将处理后的CSS输出到一个压缩过的文件中。

- 阅读更多 -