Webpack çıkışı istenen dizinlerde değil

Question

Burada çok basit bir uygulama. Demo ile başladı here bulundu ve Babel 6 kullanmak için değiştirildi. Benim sorunum, webpack'in çıktısı benim HTML dosyalarını çıktı Dist dizininin bir alt dizinine koyuyor olmasıdır.

bu dosya yapısı ile başlayan:

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

ne WebPack çalıştırdıktan sonra ile bitirmek benim dist dizininde şudur:

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

bana tuhaf görünüyor. İşte

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

webpack.config.js dosyasıdır: İstediğim budur

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" 
    } 
} 

nerede elimden bu almak üzereyim Bir sonraki adıma geçin. Çıkışı istediğim gibi paketlemek için web paketini nasıl alabilirim?

Answer 1

Ben WebPack yeniyim, bu nedenle bu en iyi çözüm olup olmadığını bilmiyorum, ama bu (output.path ve dosya yükleyici değiştirildi) çalışması gerekir:

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]", 
     } 
    ], 
    } 
}; 

göre Belgeleme, bağlamı seçeneği yalnızca giriş noktasını çözmek için kullanılır.

Answer 2

Bunu yapmanın bir yolu, htmlwepackplugin değerini alır ve aşağıdaki gibi yapılandırmanızı değiştirir.

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]", 
     } 
    ], 
    } 
}