2016-05-10 86 views
0

我有以下的WebPack腳本:的WebPack和文件加載不加載字體

const PATHS = { 
    app: path.join(__dirname, 'app'), 
    build: path.join(__dirname, 'build'), 
    fonts: path.join(__dirname, 'app/assets/fonts') 
}; 

我的文件被捆綁,並輸出到構建目錄,這一切工作正常。但是,我現在添加了一個字體加載器。在我的應用程序目錄中,我在以下文件夾中有字體文件:app/assets/fonts(目前只有TTF,但是這會改變)。

const common = { 
    entry: { 
    app: PATHS.app 
    }, 
    output: { 
    path: PATHS.build, 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     loaders: ['react-hot', 'babel-loader?presets[]=es2015,presets[]=stage-2,presets[]=react,plugins[]=transform-runtime'], 
     exclude: /node_modules/ 
     }, 
     { 


    test: /\.scss$/, 
    loaders: ["style", "css?sourceMap", "sass?sourceMap"] 
    }, 
    { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" }, 
    { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }, 
] 
    ] 
    } 
}; 

上面我的字體劇本也絕對沒有什麼,我都跑我的默認腳本:

"build": "webpack", 
"start": "webpack-dev-server" 

沒有東西放在公共目錄中。這是我必須單獨設置的東西嗎?我如何告訴加載程序使用我的字體文件在公用文件夾內創建一個相同的目錄(應用程序內部)?

+0

我現在已經通過不同的方式組合了我的字體並將它們加載到styles文件夾中來解決了這個問題,但是,所有的字體文件都會在public /目錄中不加區分地加載。有沒有一種方法可以告訴webpack究竟在哪裏傳輸它們? – HGB

回答

0
{ 
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
    exclude: /node_modules/, 
    loader: 'file-loader?limit=1024&name=fonts/[name].[ext]' 
    }, 
    { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
    exclude: /node_modules/, 
    loader: "file-loader?limit=1024&name=fonts/[name].[ext]" 
    } 

字體現在正在按照預期方式將公共/字體目錄編譯爲insode。

但現在我想從app/assets/images在獲得這些文件,並將它們裏面public/images/但下面的代碼甚至沒有得到webpack命令撿起來達到相同的結果:

{ 
     test: /\.(jpg|jpeg|gif|png|svg)$/, 
     exclude: /node_modules/, 
     loader: "file-loader?limit=1024&name=images/[name].[ext]" 
    } 

什麼是錯的它?它與字體腳本相同。