WDSはバック

Question

ディレクトリ

では動作しませんHtmlWebpackPlugin：

/dist 
--some.html 
--some.css 
--some.js 
--another.html 
--another.css 
--another.js 
/src 
--... 
webpack.config.babel.js 

すべてがOKですが、構造がある場合：htmlファイルで

/dist 
--/public 
----some.css 
----some.js 
----another.css 
----another.js 
--some.html 
--another.html 
/src 
--... 
webpack.config.babel.js 

変更は、後に手動でも反映されていませんページをリロードします。

最初のディレクトリ構造のケースのための私の堅牢な設定：

... 

module.exports = { 
    entry: { 
     index: './src/index/index', 
     contacts: './src/contacts/contacts', 
     about: './src/about/about', 
    }, 
    output: { 
     path: path.join(__dirname, "dist"), 
     publicPath: "/", 
     filename: "[name].js", 
     library: "[name]" 
    }, 

    resolve: { 
     extensions: ['.js', '.css', '.scss'], 
    }, 
    resolveLoader: { 
     modules: ['node_modules'], 
     extensions: ['.js'] 
    }, 

    module: { 
     rules: [ 
      { test: /\.html$/, loader: "html-loader" }, 
      { test: /\.js$/, loader: "babel-loader", exclude: /node_modules/}, 
      { test: /\.css$/, loader: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) }, 
    }, 
    plugins: [ 
     new webpack.DefinePlugin({ 
      NODE_ENV: JSON.stringify(NODE_ENV), 
     }), 
     new ExtractTextPlugin("[name].css"), 
    ] 
}; 

if (NODE_ENV == 'development') { 
    let htmlPlugins = []; 
    for(let entry in module.exports.entry) { 
     htmlPlugins.push(
      new HtmlWebpackPlugin({ 
       chunks: [`${entry}`], 
       filename: `${entry}.html`, 
       template: `${module.exports.entry[entry]}.html`, 
      }) 
     ); 
    } 
    module.exports.plugins = (module.exports.plugins || []).concat(htmlPlugins); 
} 

そして最後のケースのための設定：あなたが最後のケースのHtmlWebpackPluginファイル名に見ることができるように

... 

module.exports = { 
    entry: { 
     index: './src/index/index', 
     contacts: './src/contacts/contacts', 
     about: './src/about/about', 
    }, 
    output: { 
     path: path.join(__dirname, "dist/public/"), 
     publicPath: "/public/", 
     filename: "[name].js", 
     library: "[name]" 
    }, 

    resolve: { 
     extensions: ['.js', '.css', '.scss'], 
    }, 
    resolveLoader: { 
     modules: ['node_modules'], 
     extensions: ['.js'] 
    }, 

    module: { 
     rules: [ 
      { test: /\.html$/, loader: "html-loader" }, 
      { test: /\.js$/, loader: "babel-loader", exclude: /node_modules/}, 
      { test: /\.css$/, loader: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) }, 
    }, 
    plugins: [ 
     new webpack.DefinePlugin({ 
      NODE_ENV: JSON.stringify(NODE_ENV), 
     }), 
     new ExtractTextPlugin("[name].css"), 
    ] 
}; 

if (NODE_ENV == 'development') { 
    let htmlPlugins = []; 
    for(let entry in module.exports.entry) { 
     htmlPlugins.push(
      new HtmlWebpackPlugin({ 
       chunks: [`${entry}`], 
       filename: `../${entry}.html`, 
       template: `${module.exports.entry[entry]}.html`, 
      }) 
     ); 
    } 
    module.exports.plugins = (module.exports.plugins || []).concat(htmlPlugins); 
} 

ディレクトリback（../${entry}.html、）を含む。

Answer 1

Webpackでは、output.pathフォルダからトラバースバックできません。ご使用のケースのために働く必要があります設定がある -

module.exports = { 
    entry: { 
     "public/index": './src/index/index', 
     "public/contacts": './src/contacts/contacts', 
     "public/about": './src/about/about', 
    }, 
    output: { 
     path: path.join(__dirname, "dist"), 
     publicPath: "/", 
     filename: "[name].js", 
     library: "[name]" 
    }, 

    resolve: { 
     extensions: ['.js', '.css', '.scss'], 
    }, 
    resolveLoader: { 
     modules: ['node_modules'], 
     extensions: ['.js'] 
    }, 

    module: { 
     rules: [ 
      { test: /\.html$/, loader: "html-loader" }, 
      { test: /\.js$/, loader: "babel-loader", exclude: /node_modules/}, 
      { test: /\.css$/, loader: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) }, 
    }, 
    plugins: [ 
     new webpack.DefinePlugin({ 
      NODE_ENV: JSON.stringify(NODE_ENV), 
     }), 
     new ExtractTextPlugin("public/[name].css"), 
    ] 
}; 

if (NODE_ENV == 'development') { 
    let htmlPlugins = []; 
    for(let entry in module.exports.entry) { 
     htmlPlugins.push(
      new HtmlWebpackPlugin({ 
       chunks: [`${entry}`], 
       filename: `${entry}.html`, 
       template: `${module.exports.entry[entry]}.html`, 
      }) 
     ); 
    } 
    module.exports.plugins = (module.exports.plugins || []).concat(htmlPlugins); 
} 

我々がここでやっていることは、我々は、エントリ名自体にサブパス情報を提供しているということです。したがって、webpackが出力ファイルを生成するとき、出力ファイルはそれらのサブパスの中に置かれます。 htmlの場合は、サブパスを与えないので、ルート出力フォルダに生成されます。 これは絶対確実ではありませんが、webpack-dev-serverや動的インポート（例えばrequire.ensure）などの問題が発生する可能性があります。詳細は、https://github.com/webpack/webpack/issues/1189を参照してください。