Is there a complete example config for Webpack 2?

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. @dschissler – My suggestion would be to start here https://github.com/gdi2290/angular2-webpack2-starter

   @gdi2290‘s Webpack2 example has a pretty complete dev config.

4. 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.

5. The webpack team just released new documentation for Webpack 2, which has some good examples of the config file

6. I created template for simple JS apps where I using Webpack 2, Webpack-dev-server and Babel.
   Maybe it could be useful to someone who is looking for basic config..

   https://github.com/bultas/minimal

Comments are closed.