WebPACK pliki wyjściowe do różnych katalogów

Question

Po budowania projektu, mam index.html, bundle.js i niektóre pliki .css, chciałbym, żeby być umieszczone w strukturze dir tak:

dist/ 
    - css/all.my.css 
    - js/bundle.js 
    - index.html 

Oto co zrobiłem dla .js i .css:

entry: { 
    app: path.resolve(__dirname, 'app/src/index.js'), 
}, 
output: { 
    path: path.resolve(__dirname, 'dist', 'css'), 
    filename: '../js/[name].js' 
}, 

Oto odpowiedni moduł konfiguracyjny:

module: { 
    loaders: [{ 
     test: /\.jsx?$/, 
     loaders: ['react-hot', 'babel-loader'], 
     exclude: /node_modules/ 
    }, 
    { 
     test: /\.css$/, 
     loader: ExtractTextPlugin.extract("style-loader", "css-loader") 
    }, 
    { 
     test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     loader: "url-loader?limit=10000&mimetype=application/font-woff" 
    }, 
    { 
     test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     loader: "file-loader" 
    }] 
}, 

i ha Nie mam pojęcia, jak skopiować index.html z folderu i umieścić go pod dist /. Wiem, że potrzebne jest file-loader, ale co powinienem napisać pod entry i output?

Dzięki!

---

wyobraziłem go i tu jest rozwiązanie:

output: { 
     path: path.resolve(__dirname, '../dist'), // this is the output directory, everything will be placed under here 
     filename: 'js/bundle.js', // move the bundle.js file under the js/ folder, the dir structure will be like this /dist/js/bundle.js 
} 

Aby przenieść plik css pod dist/css/:

module: { 
    loaders: [{ 
     test: /\.css$/, 
      loader: ExtractTextPlugin.extract('style-loader', 'css-loader!cssnext-loader') 
    }] 
} 

użyłem ExtractTextPlugin, więc config ścieżkę wyjściową pliku css, musiałem zdefiniować go w sekcji plugins:

plugins: [ 
    new ExtractTextPlugin('./css/bundle.css'), // bundle.css will be put under /dist/css/ 
] 

Aby przenieść obrazy i czcionki do własnego folderu:

module: { 
    loaders: [{ 
     test: /\.(png|jpg|svg)$/, 
     loader: 'url-loader?limit=8192&name=img/[name].[ext]' 
    }, { 
     test: /\.(woff|woff2|eot|ttf)$/, 
     loader: 'url-loader?limit=8192&name=fonts/[name].[ext]' 
    }] 
} 

zwrócić uwagę na sposób ciąg loader jest zdefiniowana: &name=img/[name].[ext] oznacza używanie nazwy oryginalnego pliku i rozszerzenie i umieścić go pod img/folderu. To samo dotyczy plików czcionek.

Oto pełna plik konfiguracyjny:

var webpack = require('webpack'), 
    path = require('path'), 
    ExtractTextPlugin = require('extract-text-webpack-plugin'), 
    Clean = require('clean-webpack-plugin') 

module.exports = { 
    devtool: 'cheap-module-source-map', 
    entry: { 
     app: path.resolve(__dirname, '../app/index.js'), 
    }, 
    output: { 
     path: path.resolve(__dirname, '../dist'), 
     filename: 'js/bundle.js', 
     publicPath: '/static/' 
    }, 
    module: { 
     loaders: [{ 
      test: /\.js$/, 
      loaders: ['babel?presets[]=react,presets[]=es2015,presets[]=stage-0,plugins[]=transform-decorators-legacy'], 
      include: path.join(__dirname, '../app'), 
     },{ 
      test: /\.css$/, 
      loader: ExtractTextPlugin.extract('style-loader', 'css-loader!cssnext-loader') 
     },{ 
      test: /\.(woff|woff2|eot|ttf)$/, 
      loader: 'url-loader?limit=8192&name=fonts/[name].[ext]' 
     },{ 
      test: /\.(png|jpg|svg)$/, 
      loader: 'url-loader?limit=8192&name=img/[name].[ext]' 
     }] 
    }, 
    cssnext: { 
     browsers: 'last 2 versions' 
    }, 
    resolve: { 
     extensions: ['', '.js', '.jsx'] 
    }, 
    plugins: [ 
     new Clean([path.join(__dirname, '../dist')], { 
      root: path.join(__dirname, '..'), 
      verbose: true 
     }), 
     new ExtractTextPlugin('./css/bundle.css', {allChunks: true}), 
     new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]), //ignore locale files from moment.js, saves 300k 
     new webpack.DefinePlugin({ 
      'process.env': { 
       'NODE_ENV': JSON.stringify('production') 
      }, 
      '__DEVTOOLS__': false 
     }), 
     new webpack.optimize.UglifyJsPlugin({ 
      compressor: { 
       warnings: false 
      }, 
      mangle: false 
     }) 
    ] 
} 

Nie trzeba będzie wszystkie rzeczy tam, po prostu chcę pokazać duży obraz jak to wygląda wszystko w miejscu. Płacisz tylko uwagę na output, loaders i plugins

Answer 1

Sprawdź HTML-WebPACK-plugin dla WebPacka będzie dynamicznie zbudować plik index.html dla Ciebie i umieścić go w danym folderze.