2025/12/18 学习总结

webpack 环境

我们在开发软件时，常常需要区分环境，在 webpack 的module.exports 下的 mode: development 可以指定环境

复制代码

const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');

 module.exports = {
  mode: 'development',
   entry: {
     index: './src/index.js',
     print: './src/print.js',
   },
   plugins: [
     new HtmlWebpackPlugin({
      title: 'Output Management',
      title: 'Development',
     }),
   ],
   output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
     clean: true,
   },
 };

如果想要在一个 HTML 页面上使用多个入口起点，需要设置 optimization.runtimeChunk: 'single'，并在 entry 中写入 another 的对应其他路径

由于获取服务器资源是比较耗费时间的操作，因此浏览器使用了一种缓存的技术，可以降低网络流量，使网站加载速度更快，我们可以通过配置 webpack 编译生成的文件被客户端缓存。

在 output 输出的文件名，可以通过带括号字符串来模板文件名，[contenthash] 将根据资源内容创建唯一的哈希值，当资源内容发生变化时，[contenthash] 也会发生变化

optimization.runtimeChunk 选项将 runtime 代码拆分为一个单独的 chunk ，将起设置为 single 以便为所有的 chunk 创建一个 runtime bundle

复制代码

 const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: './src/index.js',
    plugins: [
      new HtmlWebpackPlugin({
      title: 'Caching',
      }),
    ],
    output: {
      filename: '[name].[contenthash].js',
      path: path.resolve(__dirname, 'dist'),
      clean: true,
    },
   optimization: {
     runtimeChunk: 'single',
   },
  };

环境变量

在 webpack 命令行环境配置的 --env 参数，可以运行传入任意数量得环境变量，在webpack 中，要使用 env 变量，必须将 module.exports 转换成一个函数（可以理解为，这样才能把环境变量等参数传递进来）

复制代码

const path = require('path');

module.exports = (env) => {
  // Use env.<YOUR VARIABLE> here:
  console.log('Goal: ', env.goal); // 'local'
  console.log('Production: ', env.production); // true

  return {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
  };
};

CSP 内容安全策略，主要是为了防止恶意内容注入和执行

工作原理是，白名单策略，只允许从这些地方加载，其他禁止，例如

复制代码

Content-Security-Policy: script-src 'self'

默认情况下不启用 CSP，webpack 为起加载的所有脚步添加 nonce，即一次性随机数。在入口文件中设置一个 __webpack_nonce__ 变量以激活此功能。然后为每个唯一的页面视图生成和提供一个唯一的基于哈希的 nonce。这就是为什么应该在入口文件中指定 __webpack_nonce__ 而非在配置中指定的原因。请注意，__webpack_nonce__ 应该是一个 base64 编码的字符串。

在启动 webpack 时，我们经常可以注意到有 websocket 字眼，这是因为，webpack-dev-server 会在包中引入一个脚本，此脚本链接到 websocket 这样可以在任何文件修改时，触发重新加载应用程序

默认只允许 localhost 访问服务器，1如果要允许别人在我们的宿主 PC 上访问需要添加 --host 0.0.0.0 参数，这样可以被其他人访问到