Giter Club home page Giter Club logo

Comments (10)

gowravshekar avatar gowravshekar commented on July 20, 2024

As per the log, graceful-fs/fs.js and test/extglob-ending-with-state-char.js contains require() statements which are unable to resolve by webpack.

@OEvgeny, you need to check why those files are parsed by webpack. Check the various require() statements you have added apart from the library code. Use webpack -c --display-error-details to get a verbose error output.

from font-awesome-webpack.

OEvgeny avatar OEvgeny commented on July 20, 2024

Thanks for response!
Oh, found mistake on my first message. Problem occurres when I add my font-awesome.config.js to entries like this:

entry: [
   "./src/js/main.js",
   "./src/font-awesome.config.js"
],

I found that when I comment lines aded to font-awesome.config.js from redme guide. I got build without errors, (and without font-awesome).

postStyleLoaders: [
    //require.resolve('extract-text-webpack-plugin/loader.js') + '?{"omit":1,"extract":true,"remove":true}'
],

from font-awesome-webpack.

gowravshekar avatar gowravshekar commented on July 20, 2024

Instead of directly adding the config file in entry, create a separate .js file and put the following line in the new file require('font-awesome-webpack!relative_path_to_your_font_awesome_config_js');. Then add the new .js file in your entry. Also, keep the postStyleLoaders in your config file. Let me know whether this resolve your issue.

from font-awesome-webpack.

OEvgeny avatar OEvgeny commented on July 20, 2024

Ok, got it to work.
Add new file in src/js folder fa.js. And write:

require('font-awesome-webpack!../font-awesome.config.js ');

Add font-awesome.config.js and .less to src/ folder.

And add fa.js to entries:

entry: [
   "./src/js/main.js",
   "./src/js/fa.js"
],

Also uncomment lines on font-awesome.config.js
Is it right?
Got this:

>webpack
Hash: 410ede7b3b376569f9a5                                                     
Version: webpack 1.7.2                                                         
Time: 4625ms                                                                   
                                 Asset    Size  Chunks             Chunk Names 
  f7c2b4b747b1a225eb8dee034134a1b0.eot   60767          [emitted]              
97493d3f11c0a3bd5cbd959f5d19b699.woff2   56780          [emitted]              
 d9ee23d59d0e0e727b51368b458a0bff.woff   71508          [emitted]              
  706450d7bba6374ca02fe167d86685cb.ttf  122092          [emitted]              
  2980083682e94d33a66eef2e7d612519.svg  313398          [emitted]              
                               main.js  143986       0  [emitted]  main        
                              main.css   47964       0  [emitted]  main        
   [0] multi main 40 {0} [built]                                               
   [1] ./src/js/main.js 3599 {0} [built]                                       
   [2] ./src/js/fa.js 58 {0} [built]                                           
   [3] ./src/js/slider.js 6873 {0} [built]                                     
    + 31 hidden modules                                                        
Child extract-text-webpack-plugin:                                             
        + 21 hidden modules                                                    
Child extract-text-webpack-plugin:                                             
        + 2 hidden modules

Thank you! It's better, but still no separate css file for font. Now it's not so necessary. Feel free to close it, but if you have an idea I can test it.

from font-awesome-webpack.

gowravshekar avatar gowravshekar commented on July 20, 2024

What are the css files generated from webpack?

As per the description mentioned in extract-text-webpack-plugin, It moves every require("css-file") in entry chunks into a separate css output file.

from font-awesome-webpack.

OEvgeny avatar OEvgeny commented on July 20, 2024

I have one file main.css that contains font-awesome and my style sheets.
You are right, I don't include font-awesome.less or anything else that can chunks into a separate css output file. Can't figure out how to do this with your great packege.

from font-awesome-webpack.

gowravshekar avatar gowravshekar commented on July 20, 2024

Few things to try:

Keep only fa.js in your entry file and check whether you are getting fa.css generated.
Try changing the loader options to extract-text-webpack-plugin in your config file, {"omit":1,"extract":true,"remove":true}

If things don't workout,

  1. Remove the styles from your current config
  2. Create a new less file and import required files from font-awesome styles
  3. Require the new less file in fa.js.

from font-awesome-webpack.

OEvgeny avatar OEvgeny commented on July 20, 2024

Can't build fa.js or fa.css. For some reason when I keep only one fa.js file in my config, it builds main.js and main.css instead...

from font-awesome-webpack.

OEvgeny avatar OEvgeny commented on July 20, 2024

My new config

var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
    entry: [
       //"./src/js/main.js",
       "./src/js/fa.js"
    ],
    output: {
        path: __dirname + '/webpack-build',
        filename: "[name].js",
        chunkFilename: "[id].js"
    },
    module: {
        loaders: [{
            test: /\.styl$/,
            loader: ExtractTextPlugin.extract('style-loader', 'css-loader!stylus-loader')
        },
        { 
            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" 
        },
        { 
            test: /\.jpe?g$|\.gif$|\.png$|\.wav$|\.mp3$/,
            loader: "file-loader" 
        }]
    },
    plugins: [
        new ExtractTextPlugin("[name].css", {"omit":1,"extract":true,"remove":true})
    ]
};

from font-awesome-webpack.

OEvgeny avatar OEvgeny commented on July 20, 2024

So, seems problem in my side. Thanks for help.

from font-awesome-webpack.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.