npm - How to use font files emitted by webpack? -
summary:
webpack issues, in addition bundle.js, font files font-awesome. these files not referenced in bundle.js.
details:
i have entry.js file outputs subdirectory (webpack) of subdirectory (dist). dist standalone, cdn distribuable directory. structure such reasons specific site generator (which not matter question).
(root folder site dev) │ entry.js │ webpack.config.js │ └───dist │ index.html │ └───webpack 674f50d287a8c48dc19ba404d20fe713.eot 912ec66d7572ff821749319396470bde.svg af7ae505a9eed503f8b8e6982036873e.woff2 b06871f281fee6b241d60582ae9369b9.ttf bundle.js fee66e712a8a08eef5805a46892932ad.woff index.html loads webpack/bundle.js , attempts use font awesome:
<!doctype html> <html lang="en"> <head> </head> <body> hello world <i class="fa fa-shower"></i> <script src="webpack/bundle.js"></script> </body> </html> the font files not correctly referenced, bundle.js looks them in root of site while in webpack, output bundle.js. in other words bundle.js not aware webpack.config.js instructed go subdirectory. output on console (console output):
index.html:1 file:///d:/megasync/dev/webpack/testoffonts/dist/af7ae505a9eed503f8b8e6982036873e.woff2 net::err_file_not_found index.html:1 file:///d:/megasync/dev/webpack/testoffonts/dist/fee66e712a8a08eef5805a46892932ad.woff net::err_file_not_found index.html:1 file:///d:/megasync/dev/webpack/testoffonts/dist/b06871f281fee6b241d60582ae9369b9.ttf net::err_file_not_found how raise awareness bundle.js references output-generated peers @ same level (/webpack/... in case)?
the component files:
entry.js:
import 'font-awesome/css/font-awesome.css' webpack.config.js:
module.exports = { entry: "./entry.js", output: { path: __dirname + '/dist/webpack', // should use path module filename: "bundle.js" }, module: { loaders: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" } ] } }; note: problem not appear fonts imported in css file, of case have font awesome used module
all credit solution goes jiggneshh gohel , detailed post on webpack githhub
adding publicpath solves problem:
output: { path: __dirname + '/dist/webpack', // should use path module filename: "bundle.js", publicpath: "/webpack/", }, the path should 1 bundle , other emitted files output to, relative root of exposed site (http://example.com/).
Comments
Post a Comment