webpackで複数ファイルをしたいです。
現在以下のような感じでひとつのファイルを出力しています。
(といってもあり物をそのまま利用しているだけですが・・・)
const path = require('path'); const webpack = require('webpack'); const settings = { entry: { bundle: [ "react-hot-loader/patch", "./src/frontend/index.js" ] }, output: { filename: "[name].js", publicPath: "/", path: path.resolve("build") }, resolve: { extensions: [".js", ".json", ".css"] }, devtool: "eval-source-map", module: { rules: [ { test: /.js?$/, loader: 'babel-loader', options: { presets: [ ["es2015", { modules: false }], "stage-2", "react" ], plugins: [ "transform-node-env-inline" ], env: { development: { plugins: ["react-hot-loader/babel"] } } } }, { test: /.css$/, use: [ "style-loader", { loader: "css-loader", options: { modules: true, sourceMap: true, importLoaders: 1, localIdentName: "[name]--[local]--[hash:base64:8]" } }, "postcss-loader" // has separate config, see postcss.config.js nearby ] }, ] }, devServer: { contentBase: path.resolve("src/www"), publicPath: "http://localhost:8080/", // full URL is necessary for Hot Module Replacement if additional path will be added. quiet: false, hot: true, historyApiFallback: true, inline: true }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NamedModulesPlugin(), new webpack.LoaderOptionsPlugin({ debug: true }), ], }; module.exports = settings;
こちらを
/src/www/index.html
で読み込んで確認しているのですが、
ページが3ページありまして現在は、
./src/frontend/index.js
の内容をいちいち変更して書き出しを(npm run build)
3回行っています。これを一度にしたく、
下記のように変更しました。
entry: { bundle1: [ "react-hot-loader/patch", "./src/frontend/index1.js" ], bundle2: [ "react-hot-loader/patch", "./src/frontend/index2.js" ], bundle3: [ "react-hot-loader/patch", "./src/frontend/index3.js" ] },
ファイルはbundle1.js,bundle2.js,bundle3.jsが
出力されて下記にそれぞれ読み込んでアクセスしてみるのですが、
真っ白で何も表示されません・・・
/src/www/index1.html
/src/www/index2.html
/src/www/index3.html
他にどこか変更が必要な部分などありますでしょうか?
あなたの回答
tips
プレビュー