webpack 打包图片

最新推荐文章于 2025-08-18 17:38:50 发布

weixin_33757911

最新推荐文章于 2025-08-18 17:38:50 发布

阅读量109

点赞数

CC 4.0 BY-SA版权

文章标签： webpack python ViewUI

原文链接：https://my.oschina.net/u/3522874/blog/1821982

2019独角兽企业重金招聘Python工程师标准>>>

安装依赖：

npm install --save-dev file-loader

配置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$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
+       {
+         test: /\.(png|svg|jpg|gif)$/,
+         use: [
+           'file-loader'
+         ]
+       }
      ]
    }
  };

当你打包图片结束时，如果index.html在根目录下则会无法直接加载打包后的图片，解决方法就是把index.html放到dist目录中，但是不合适

安装一个插件HtmlWebpackPlugin 打包index.html到bundle.js文件所属目录中

bundle.js在哪里index.html就在哪里解决了资源路径问题

也自动注入了打包好的bundle.js链接

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

配置webpack.config.js

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

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

转载于:https://my.oschina.net/u/3522874/blog/1821982