webpack 打包图片放到images文件夹

要把 webpack 打包的图片放到 images 文件夹，你可以通过配置 webpack 的 `output` 属性来实现。具体步骤如下：

1. 在 webpack 配置文件中添加 `output` 属性，指定打包后的图片输出路径为 `images/`：

module.exports = {
  // 其他配置项
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
    // 图片输出路径
    assetModuleFilename: 'images/[hash][ext][query]'
  }
}

其中，`assetModuleFilename` 属性的设置可以让 webpack 将图片文件输出到指定的路径。

2. 在你的代码中使用图片时，需要使用 `import` 或 `require` 导入图片文件，如下所示：

import myImage from './path/to/image.png';

const img = document.createElement('img');
img.src = myImage;
document.body.appendChild(img);

这样，webpack 就会将图片文件打包到 `images/` 目录下，并在代码中使用打包后的文件路径。

相关问题

webpack打包没有输出css文件夹

如果Webpack打包时没有输出CSS文件夹，可能是因为没有正确配置Webpack的CSS loader和Plugin。可以尝试以下几种方法：

1. 确认webpack.config.js中的module.rules中是否有针对CSS文件的loader配置。例如：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
        ],
      },
    ],
  },
};

2. 确认CSS文件是否正确引入。可以尝试在代码中引入一个CSS文件，例如：

import './style.css';

// 在代码中使用该CSS
const div = document.createElement('div');
div.classList.add('my-class');
document.body.appendChild(div);

3. 确认是否正确安装并配置了相关的插件，例如MiniCssExtractPlugin等。

4. 确认Webpack的output配置是否正确，例如：

module.exports = {
  // ...其他配置
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

如果以上方法都无法解决问题，可以尝试使用其他loader或工具来处理CSS文件，例如sass-loader或者less-loader。

webpack打包的资源放到body里

可以通过在 webpack 配置中使用 html-webpack-plugin 插件来实现将打包生成的资源文件自动插入到 HTML 文件的 body 中。

首先需要安装 html-webpack-plugin：

npm install html-webpack-plugin --save-dev

然后在 webpack 配置文件中添加以下代码：

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

module.exports = {
  //...其他配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      inject: 'body'
    })
  ]
};

其中，template 指定了 HTML 文件模板路径，inject 设置为 'body' 表示将打包生成的资源文件插入到 body 标签中。这样，在运行 webpack 打包后，生成的 HTML 文件中就会自动引入打包生成的 js 和 css 文件，并放在 body 标签中。