webpack - grouper/copier tous les assets pour créer ou dist un dossier

Question

J'essaye d'utiliser webpack pour gérer la construction d'une application électronique. Je voudrais avoir un index.html qui utilise des balises de script pour importer/exiger un fichier de réaction client.js, et avoir ce fichier client.js et ses fichiers requis nécessitent l'application entière.

Ma structure de dossier ressemble à ceci:

Project 
    | 
    | --/app 
    | 
    | ----/gui 
    | ------/flux 
    | ------/fonts 
    | ------/html 
    | ------/images 
    | ------/react 
    | 
    | ----/lib 
    | ------ /custom-modules ... 
    | ----package.json (application) 
    | 
    | 
    | --/dist 
    | .babelrc 
    | webpack.config.js 
    | package.json (dev) 

Je voudrais développer l'application dans ./app, exécutez webpack ou webpack-dev-serveur et une copie complète et fonctionnelle de l'application et transpiled minifié en ./dist.

morceau pertinent de Webpack.config.js:

module.exports = { 
    context: path.join(__dirname, '/app'), 
    devtool: debug ? 'inline-sourcemap' : null, 
    entry: { 
    main: './webpack-hook.js' 
    }, 
    output: { 
    publicPath: '/assets/', 
    path: path.join(__dirname, '/dist/'), 
    filename: 'js/gui.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js?$/, 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['react', 'es2015', 'stage-0'], 
      plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'] 
     } 
     }, 
     { 
     test: /\.html$/, 
     loader: 'file-loader?name=[name].[ext]' 
     }, 
     { 
     test: /\.css$/, 
     loader: 'file-loader?name=css/[name].[ext]' 
     }, 
     { 
     test: /\.(png|jpg|gif|svg)$/, 
     loader: 'file-loader?name=images/[name].[ext]' 
     }, 
     { 
     test: /\.(ttf)$/, 
     loader: 'file-loader?name=fonts/[name].[ext]' 
     } 
    ] 
    } 
} 

Dans webpack-hook.js j'ai une seule ligne: require('./gui/html/index.html');

Ce que je veux/expect est d'avoir toutes les dépendances trouvés par webpack et empaqueté dans dist/images, dist/fonts, et ainsi de suite. En ce moment, je viens d'obtenir un fichier index.html copié dans dist.

Answer 1

Webpack est un bundler JavaScript; Tous les autres chargeurs et plugins sophistiqués essaient d'en faire plus qu'un simple outil de groupage, mais il n'a pas été conçu pour faire autre chose que des bundles. C'est pourquoi il est si perplexe si vous essayez de le traiter comme un outil de construction à part entière.

Sa magie a à voir avec la traversée des dépendances d'un module JavaScript. Chaque dépendance passe ensuite par un chargeur. Alors:

webpack-hook.js → "main" JS bundle 
↓ 
./gui/html/index.html → file-loader → dist folder 

Il n'y a pas d'autres dépendances, car webpack-hook n'a pas d'autres dépendances. À moins qu'il y ait un autre plugin/chargeur magique qui peut analyser le HTML pour ses dépendances, c'est tout ce que webpack sera capable de faire.

Personnellement, je pense que vous allez avoir un mauvais moment si vous essayez de créer la construction de cette façon. Il s'agit d'un outil centré sur JavaScript pour la création de paquets JavaScript qui permet d'avoir un peu de magie comme JavaScript "nécessitant" des fichiers non-JS. Ce que j'essaierais plutôt, c'est que votre fichier JS principal inclue toujours le code HTML, mais aussi qu'il tienne dans vos styles & d'autres modules JS. De cette façon, WebPack pourra découvrir toutes vos dépendances.

Mise à jour:

Il semble qu'il y ait un html-loader; peut-être que vous pouvez vous en tenir à votre approche et utiliser ce chargeur, et il semble qu'il puisse découvrir des dépendances au sein de HTML.