별도의 하위 폴더에 이미지 / 글꼴을 출력하도록 웹팩 구성

별도의 하위 폴더에 이미지 / 글꼴을 출력하도록 웹팩 구성

---

나는 CSS와 JS를 각각의 하위 디렉토리, 즉 public/asests/css및 public/assets/js. 그러나 이미지와 글꼴에 대해 동일한 작업을 수행하는 방법을 모릅니다.

즉, public/assets/images폴더에있는 이미지와 폴더에 글꼴 을 출력하고 싶습니다 public/assets/fonts.

내 webpack 구성 파일은 다음과 같습니다.

var path = require('path');
var ExtractCSS = require('extract-text-webpack-plugin');

module.exports = {
    context: path.resolve('private/js'),
    resolve: ['', '.js', '.jsx', '.es6', '.json'],
    entry: {
        homepage: './homepage'
    },
    output: {
        path: path.resolve('public/assets'),
        publicPath: '/public/assets/',
        filename: 'js/[name].js'
    },
    plugins: [
        new ExtractCSS('css/[name].css')
    ],
    devServer: {
        contentBase: 'public'
    },
    module: {
        loaders: [
            {
                test: /\.(es6|js|jsx)$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                loader: ExtractCSS.extract('style-loader', 'css-loader')
            },
            {
                test: /\.less$/,
                exclude: /node_modules/,
                loader: ExtractCSS.extract('style-loader', 'css-loader!less-loader')
            },
            {
                test: /\.(jpg|jpeg|gif|png|woff|woff2|eot|ttf|svg)$/,
                exclude: /node_modules/,
                loader: 'url-loader?limit=1024'
            }
        ]
    }
}

---

GitHub의 url-loader 및 파일 로더 문서를 참조하여이를 알아낼 수있었습니다 .

내가해야 할 일은 로더에 name query-string 매개 변수 를 추가하여 전체 경로를 지정하는 것입니다. 또한 출력 위치에서 파일 이름을 지정하는 방법을 지정할 수 있다는 것도 배웠습니다.

{
    test: /\.(jpg|jpeg|gif|png)$/,
    exclude: /node_modules/,
    loader:'url-loader?limit=1024&name=images/[name].[ext]'
},
{
    test: /\.(woff|woff2|eot|ttf|svg)$/,
    exclude: /node_modules/,
    loader: 'url-loader?limit=1024&name=fonts/[name].[ext]'
}

---

{ 
    test: /\.(ttf|eot|svg|woff2?)(\?v=[a-z0-9=\.]+)?$/i,
    include: folders.npm,
    loader: 'file?name=fonts/[name].[ext]'
},
{
    test: /\.(jpe?g|png|gif|svg|ico)$/i,
    include: folders.src,
    loaders: [
        'file?name=images/[sha512:hash:base64:7].[ext]',
        'image-webpack?progressive=true&optimizationLevel=7&interlaced=true'
    ]
}

This is what I use in production. I often come across situation where *.svg pictures are used and SVG fonts for IE fallback. Here I assume font are always inside node_modules. I have also seen devs doing test: /fonts\/[w+].(svg|eot ....).

---

I was able to solve this with file-loader If you're using the Webpack 4, you would use use instead of loader.

{
    test: /\.(woff|woff2|eot|ttf|otf)$/,
    use: ['file-loader?name=fonts/[name].[ext]']
}

ReferenceURL : https://stackoverflow.com/questions/33058964/configure-webpack-to-output-images-fonts-in-a-separate-subfolders