时间戳

首页 > 解决方案 > 如何使用 webpack 创建子目录？

javascript - 如何使用 webpack 创建子目录？

问题描述

我正在尝试使用 webpack 将多个 HTML 文件捆绑在不同的目录中，但无法使其正常工作。

文件夹结构为：

app
 /25off
   **-index.html**
 /assets
    /fonts
    /images
    /scripts
      -App.js
    /styles
 **- index.html**

我想将两个 index.html 文件捆绑在一起。一个将是根目录，然后另一个将位于名为“25off”的子目录中

Webpack 配置为：

const currentTask = process.env.npm_lifecycle_event
const HtmlWebpackPlugin = require('html-webpack-plugin')

let cssConfig = {
    test:/\.css$/i, 
    use: ['css-loader?url=false', 
    {loader: "postcss-loader", options: {postcssOptions: {plugins: postCSSPlugins}}}

    ]
}

let config = {
    entry: './app/assets/scripts/App.js',
    plugins: [
        new HtmlWebpackPlugin({filename: 'index.html', template: './app/index.html'}),
        new HtmlWebpackPlugin({filename: 'index.html', template: './app/25off/index.html'})
        
    ],
    module: {
        rules: [
            cssConfig
        ]
    }
}

if(currentTask == 'dev'){
    cssConfig.use.unshift('style-loader')
    config.output = {
        filename: 'bundled.js',
        path: path.resolve(__dirname, 'app')
    }
    config.devServer = {
        before: function(app,server){
            server._watch('./app/**/*.html')

        },
        contentBase: path.join(__dirname, 'app'),
        hot: true,
        port: 3000, 
        host: '0.0.0.0'
    }
    config.mode = 'development'


}

这是我的 App.js 文件的配置方式：

import '../fonts/stylesheet.css'
import '../styles/styles.css'

if(module.hot){
    module.hot.accept()
}

CSS 正在应用于我的根 index.html 文件，但不是我的 250ff 目录中的那个，因为捆绑似乎不适用于该文件。我尝试了多种设置，但无法使其正常工作。我在哪里错了？

标签： javascriptnode.jswebpackwebpack-dev-serverwebpack-2

解决方案

推荐阅读