Question

我创建一个具有以下结构的项目：

Webpack 4配置：

const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  output: {
path: __dirname + '/web'
  },
  module: {
    rules: [
  {
    test: /\.js$/,
    exclude: /node_modules/,
    use: ['babel-loader', 'eslint-loader']
  },
  {
    test: /\.html$/,
    use: [
      {
        loader: 'html-loader',
        options: { minimize: true }
      }
    ]
  },
  {
    test: /\.css$/,
    use: [MiniCssExtractPlugin.loader, 'css-loader']
  },
  {
    test: /\.scss$/,
    exclude: /node_modules/,
    use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
  },
  {
    test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
    use: [{
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        outputPath: __dirname + '/fonts'
      }
    }]
  },
  {
    test: /\.(jpg|png)$/,
    use: {
      loader: "file-loader",
      options: {
        name(file) {
          if (env === 'development') {
            return './images/[name].[ext]'
          }

          return '[hash].[ext]'
        }
      }
    }
  }
]
  },
  plugins: [
    new HtmlWebPackPlugin({
  template: './src/index.html',
  filename: './index.html'
}),
new MiniCssExtractPlugin({
  filename: '[name].css',
  chunkFilename: '[id].css'
})
  ]
};

编译后，将the main.js，main.css和index.html放在web文件夹中。如何将项目中的所有图片复制到Web /图像中，并将字体复制到Web /字体中？

在项目中，我将其引用如下：

1）src \ Interface \ Header \ Index.js

<img src="img/logo.png" srcSet="img/logo@2x.png 2x, img/logo@3x.png 3x" className="header-logo" alt=""/>

2）src \ Pages \ App \ style.css

@font-face {
font-family: 'HelveticaNeueCyr';
src: url('/fonts/HelveticaNeueCyr.woff2') format('woff2'),
    url('/fonts/HelveticaNeueCyr.woff') format('woff');
font-weight: normal;
font-style: normal;

}

Answer 1

module.exports = {
  output: {
path: __dirname + '/web'
  },
  module: {
    rules: [
  {
    test: /\.js$/,
    exclude: /node_modules/,
    use: ['babel-loader', 'eslint-loader']
  },
  {
    test: /\.html$/,
    use: [
      {
        loader: 'html-loader',
        options: { minimize: true }
      }
    ]
  },
  {
    test: /\.css$/,
    use: [MiniCssExtractPlugin.loader, 'css-loader']
  },
  {
    test: /\.scss$/,
    exclude: /node_modules/,
    use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
  },
  {
    test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
    use: [{
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        outputPath: 'fonts'
      }
    }]
  },
  {
    test: /\.(jpg|png)$/,
    use: {
      loader: "file-loader",
      options: {
        name: 'images/[name].[ext]',
        outputPath: 'images'
      }
    }
  }
]
  },
  plugins: [
    new HtmlWebPackPlugin({
  template: './src/index.html',
  filename: './index.html'
}),
new MiniCssExtractPlugin({
  filename: '[name].css',
  chunkFilename: '[id].css'
})
  ]
};

Webpack 4：复制图片和字体

1 个答案: