Is there a complete example config for Webpack 2?

I’m having trouble getting my first loader to work while converting to Webpack 2. I cannot find a simple webpack 2 config for setting up Babel and few common plugins and loaders. I’ve followed the whats new gist post and I’ve made many changes. The rules say not to post here about questions and tech support but its July and I can’t get a response anywhere else in two days now.

Author: Fantashit

6 thoughts on “Is there a complete example config for Webpack 2?

  1. I’m using 2.1.0-beta.19.

    Here is my resolve:

      resolve: {
        modules: [appModulesRoot, nodeModulesRoot, bowerRoot, themeRoot],
        descriptionFiles: ['package.json', 'bower.json'],
        mainFields: ['main', 'browser'],
        mainFiles: ['index'],
        extensions: [
          '',
          '.js', '.coffee',
          '.html', '.njk',
          '.css', '.scss', '.less',
          '.json', '.yml'
        ],
        enforceExtension: false,
        moduleExtensions: ['-loader'],
        enforceModuleExtension: false,
        alias: {
          underscore: 'lodash',
          handlebars: 'handlebars/dist/handlebars',
          highlight: 'highlight.js/lib/highlight'
        },
      },

    I’m still using Babel 5 on this project and I’m planning to upgrade to 6 once I get Webpack 2 working to some degree:

          {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader',
            query: {
              optional: ['runtime'],
              stage: 0,
              cacheDirectory: '/tmp'
            }
          }, {

    I’m getting a lot of messages like this: ERROR in Entry module not found: Error: Can't resolve 'babel-loader?{"optional":["runtime"],"stage":0,"cacheDirectory":"/tmp"}' in '/opt/project/app/webpack'

  2. Sorry the the snap weak reply. I thought about it and then realized that I need resolveLoader as that was commented out. Then to start with I copied all of the settings from resolve into resolveLoader and I’ll clean it up after its [all 100%%] working.

    Now it seems I need to get the exports and expose working. I’m maintaining a test bed for Phalcon and Webpack integration and it uses some old JS tech that is funky.

    This does’t seem to work.

          {
            test: /[\/]angular\.js$/,
            loader: 'exports',
            query: {
              angular: true
            }
          }, {
            test: /jquery\.js$/,
            loader: 'expose',
            query: {
              jQuery: true,
              $: true
            }
          }, {
    
  3. I am also switching over to webpack 2. I have a complete starter project with React and Redux over here: https://github.com/sapientglobalmarkets/react-redux-seed. However, like everyone else, I am struggling through the issues list to piece together the concepts. It would be great if someone from the webpack team would review my config and comment on my use of webpack 2. I promise to maintain this example in accordance with your feedback.

    To illustrate the importance of good examples, let me describe the latest issue that I am running into. It’s the use of resolve.modules. In webpack-common.config.js, I have:

    resolve: {
        modules: [SRC_PATH, 'node_modules'],
        ...
    },
    

    This allows me to specify all my imports relative to the src folder, instead of paths like ../../../xyz.js. This is working great of JavaScript files, but I am running into a snag with css files. While url() and composes are picking up the correct modules starting from the src folder:

    background: url(assets/images/github-icon.png);
    composes: flexRowContainer from 'assets/styles/layout.css';
    

    @import is not working as expected. I have to specify the full relative path:

    @import '../../../assets/styles/colors.css';
    

    I don’t even know if this is an issue with webpack, or css-loader or something else.

    In summary, I think it is important to maintain some good quality examples as webpack 2 development proceeds. In absence of docs, this would be a great resource for people to continue working with webpack 2, minimizing the time wasted on trial and error.

Comments are closed.