Webpack output not in desired directories

Question

Very simple app here. Started with the demo found here, and modified it to use Babel 6. The problem I have is that the output of webpack puts my HTML files in a subdirectory of the output Dist directory.

Starting with this file structure:

Test|
    |package.json
    |webpack.config.js
    |app|
        |index.html
        |js|
           |app.js
           |greeting.js

What I end up with after running webpack is this in my dist directory:

dist|
    |app.js
    |app|
        |index.html

Seems odd to me. What I want is this:

dist|
    |index.html
    |app|
        |app.js

Here's the webpack.config.js file:

module.exports = {
  context: __dirname + "/app",
  entry: {
    javascript: "./js/app.js",
    html: "./index.html",
  },
  output: {
    filename: "app.js",
    path: __dirname + "/dist",
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query:
        {
          cacheDirectory: true,
          presets: [ 'react', 'es2015' ]
        }
      },
      {
        test: /\.html$/,
        loader: "file?name=[name].[ext]",
      }
    ],
  }
}

package.json:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.7.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "file-loader": "^0.8.5",
    "react-dom": "^0.14.8",
    "webpack": "^1.12.14"
  },
  "dependencies": {
    "react": "^0.14.8"
  }
}

I'm close to getting this where I can get to the next step. How do I get webpack to pack the output like I want?

Solve my problem by following this first solution http://stackoverflow.com/questions/32155154/webpack-config-how-to-just-copy-the-index-html-to-the-dist-folder — MonkeyWrench, Apr 21 '16 at 19:25

score 0 · Answer 1 · answered Mar 30 '16 at 19:39

0

I'm new to webpack, so I don't know if this is the best solution, but this should work (output.path and file loader have been modified) :

module.exports = {
  context: __dirname + "/app",
  entry: {
    javascript: "./js/app.js",
    html: "./index.html",
  },
  output: {
    filename: "app.js",
    path: __dirname + "/dist/app",
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query:
        {
          cacheDirectory: true,
          presets: [ 'react', 'es2015' ]
        }
      },
      {
        test: /\.html$/,
        loader: "file?name=../[name].[ext]",
      }
    ],
  }
};

According to the documentation, the context option is only used to resolve the entry point.

answered Mar 30 '16 at 19:39

Fab313

2,268
2
25
28

Close. It puts both output files in the dist/app directory. – MonkeyWrench Mar 30 '16 at 19:42
Strange. I just tested it (on linux) and it seems to work just fine – Fab313 Mar 30 '16 at 20:04
You can also try using HtmlWebpackPlugin, you might need it if you decide to include the hash in the filename. – Fab313 Mar 30 '16 at 20:08
Yeah, I'm blessed with working on windows systems. I'll take a look into using HtmlWebpackPlugin, as my HTML files are pretty basic for right now, and I can use a custom template for them all. That's another thing I'm working on, including multiple HTML files in the webpack output. – MonkeyWrench Mar 30 '16 at 20:10

score 0 · Answer 2 · answered Mar 30 '16 at 23:51

One way to do it, is get the htmlwepackplugin, and adjust your config as below. this would also inject the script build, so you dont have to have it on your index.html ;)

module.exports = {
  context: __dirname + "/app",
  entry: {
    javascript: "./js/app.js",
    html: "./index.html",
  },
  output: {
    filename: "app.js",
    path: __dirname + "/dist/app",
  },
  module: {
    plugins: [
        new HtmlWebpackPlugin({filename: '../index.html', template: './test/app/index.html', chunksSortMode: 'none'}),
    ],
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query:
        {
          cacheDirectory: true,
          presets: [ 'react', 'es2015' ]
        }
      },
      {
        test: /\.html$/,
        loader: "file?name=[name].[ext]",
      }
    ],
  }
}

Well, that does something different. It creates two nested app directories in the dist directory. — MonkeyWrench, Mar 31 '16 at 14:12

Webpack output not in desired directories

2 Answers2