Geek Answers Handbook

Unable to download using webpack

I am working with webpack-dev-server and I am trying to enable download.

I have this project structure:

 ── css │  └── bootstrap.min.css │── js | └── bootstrap.min.js ├── dist ├── index.html ├── package.json ├── server.js ├── src │  ├── actions.js │  ├── App.js │  ├── components │  ├── constants │  ├── index.js │  └── reducers.js └── webpack.config.js

This is index.html :

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <div id='root'></div> <script src="/static/bundle.js"></script> </body> </html>

Whenever I start the server, I get an error like:

 Cannot GET /css/bootstrap.min.css

Here is webpack.config.js:

 var path = require('path'); var webpack = require('webpack'); module.exports = { devtool: 'eval', entry: [ 'webpack-dev-server/client?http://localhost:3000', 'webpack/hot/only-dev-server', './src/index' ], output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js', publicPath: '/static/' }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() ], module: { loaders: [{ test: /\.js$/, loaders: ['react-hot', 'babel'], include: path.join(__dirname, 'src') }, { test: /\.css$/, loader: 'style!css' }] }, resolve: { extensions: ['', '.js', '.jsx', '.json'] } };

Everything else works fine, the problem is that it's just a bootstrap. I tried many different configuration options, but I can't get it to work.

I also tried it directly from javascript on index.js :

 import '../css/bootstrap.min.css';

And I get this error:

 ERROR in ./~/css-loader!./css/bootstrap.min.css Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/glyphicons-halflings-regular.eot in /home/lhahn/dev/javascript/sha/css @ ./~/css-loader!./css/bootstrap.min.css 6:3278-3330 6:3348-3400

Edit

From what I understood, webpack is trying to find the font file inside my project when trying to import Bootstrap.min.css.

+7
javascript twitter-bootstrap webpack webpack-dev-server
source share
4 answers

It seems that webpack cannot load font files.

  • Add file-loader via npm to your project and save it as devDependencies.

     npm install file-loader --save-dev

  • And change the configuration of the module loaders in the webpack.config.js file

     { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, loader: 'file-loader', }

Try installing the download via npm , remember also jquery, its dependency

+11
source share

This is what I have for Bootstrap to work with Webpack :

 {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'}, {test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000'}, {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'}, {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}

and

 import 'bootstrap/dist/css/bootstrap.css';

Also, if you are using Bootstrap locally, you need to have a fonts folder containing Bootstrap fonts at the same level as the css folder. It is best to use npm to avoid all these problems.

+4
source share

compared to @krl's answer. this is what i put under the rules modules in https://github.com/AngularClass/angular2-webpack-starter/blob/master/config/webpack.common.js

after $ npm install style-loader css-loader url-loader --save-dev

 {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, use: 'file-loader'}, {test: /\.(woff|woff2)$/, use: 'url-loader?prefix=font/&limit=5000'}, {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader?limit=10000&mimetype=application/octet-stream'}, {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader?limit=10000&mimetype=image/svg+xml'}
+1
source share

Bootstrap has several different files / fonts / images that require specific downloaders. Check if all the loaders are in the following list, if there is no npm, set them as devDependencies and add to webpack.config.js as:

 loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }, { test: /\.html$/, loader: "html" }, { test: /\.css$/, loader: "style-loader!css-loader" }, { test: /\.json$/, loader: 'json-loader' }, { test: /\.txt$/, loader: 'raw-loader' }, { test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/, loader: 'url-loader?limit=10000' }, { test: /\.(eot|ttf|wav|mp3)$/, loader: 'file-loader' } ]

And in your main / entry ie index.js / app.js file includes bootstrap css like:

 import 'bootstrap/dist/css/bootstrap.css'

This configuration is for use only with bootstrap css with ReactJS.

0
source share

More articles:


All Articles