Question

我正在从gulp转换到webpack，我在static/img文件夹中有图像，我想用image-webpack-loader处理，然后复制到build/public/img文件夹。 file-loader我想要用于此吗？问题是图像没有被复制。事实上，在构建过程中似乎忽略了这个加载器。

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');

module.exports = {
  context: path.resolve(__dirname, 'static'),
  entry: ['./js/frontend.js','./sass/app.scss'],
  output: {
    path: path.join(__dirname, 'build/public'),
    filename: 'js/frontend.js'
  },
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        loader: [
            'file-loader?name=img/[name].[ext]',
            'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
      },
      {
        test: /\.(sass|scss)$/,
        loader: ExtractTextPlugin.extract({
          use: [{
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }]
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({ 
      filename: 'css/styles.css',
      allChunks: true
    })
  ],
  devtool: 'source-map'
};

Answer 1

如果您不需要某处图像，Webpack不知道它们存在且不会处理它们。

将以下代码放在./js/frontend.js中以强制Webpack要求static/img文件夹中的每个资源：

// load assets
function requireAll(r) { r.keys().forEach(r); }
requireAll(require.context('img/', true));

Answer 2

我不确定这是解决方案还是解决方法，但我所做的是将<div class="back"><img src="https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg" width="500" height="200" alt=""/></div> <div class="topcenter"><a href="register.html" target="_self"><img src="http://pngimg.com/uploads/buttons/buttons_PNG44.png?i=1" alt="" width="10%" title="register"/></a></div> <div class="green"> <div class="row row1"> <div class="col-md-6"> <div><p> i dont want it be overlap </p> <button type="button" class="btn btn-default">Content for New Div Tag Goes Here</button> </div> </div> <div class="col-md-6"> <div><img src="images/book.png" width="413" height="461" alt=""/></div> </div> </div> </div>与SELECT CASE WHEN DP_ART_HEAD.KPP_KAT_ART_COD = 'M1' THEN ROUND(DP_ART_LINES.XONDRIKH - DP_ART_LINES.XONDRIKH * DP_ART_LINES.POSOSTO_EKP_PROT / 100, 2) ELSE DP_ART_LINES.TIM_MON end AS 'NIKOS' , DP_ART_HEAD.KPP_KAT_ART_COD, DP_ART_LINES.EID_CODE AS 'Κωδικός', AP_APO_HEAD.EID_PERIGR AS 'Είδος', DP_ART_LINES.POSOT AS 'Ποσότης', DP_ART_LINES.XONDRIKH AS 'Τιμή Χονδρικής', DP_ART_LINES.POSOSTO_EKP_PROT AS 'Έκπτωση', DP_ART_LINES.FL_DORO AS 'Δώρο' FROM DP_ART_LINES JOIN AP_APO_HEAD ON DP_ART_LINES.EID_CODE = AP_APO_HEAD.EID_CODE AND DP_ART_LINES.KPP_APO_CODE = AP_APO_HEAD.KPP_APO_CODE JOIN DP_ART_HEAD ON DP_ART_LINES.RN_DP_ART_HEAD = DP_ART_HEAD.RN_DP_ART_HEAD一起使用：

CopyWebpackPlugin

文件加载器不处理图像

2 个答案: