Webpack 将输出文件打包到不同的目录

在构建一个项目之后，我有index.html、bundle.js和一些.css文件，我希望它们被放置在一个dir结构中，如下所示：

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

下面是我为.js和.css所做的：

条目：{
app:path.resolve（uu dirname，'app/src/index.js'），
},
输出：{
path:path.resolve（uu dirname，'dist，'css'），
文件名：'../js/[name].js'
},

以下是相应的模块配置：

模块：{
装载机：[{
测试：/\.jsx？$/,，
加载器：['react-hot'，'babel loader']，
排除：/node\u模块/
},
{
测试：/\.css$/,，
加载器：ExtractTextPlugin.extract（“样式加载器”、“css加载器”）
},
{
测试：/\.woff（2）（\？v=[0-9]\.[0-9]\.[0-9]）？$/，
加载器：“url加载器？限制=10000&mimetype=application/font-woff”
},
{
测试：/\（ttf | eot | svg）（\？v=[0-9]\[0-9]\[0-9]）？$/，
加载器：“文件加载器”
}]
},

我不知道如何从文件夹中复制

index.html

，并将其放在dist/下。我知道需要

文件加载器

，但是在

条目

和

输出

下我应该写什么

谢谢

---

我想出来了，下面是解决方案：

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
}

要在

dist/css/

下移动css文件，请执行以下操作：

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

我使用了ExtractTextPlugin，因此为了配置css文件的输出路径，我必须在

插件

部分中定义它：

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

要将图像和字体移动到其自己的文件夹中，请执行以下操作：

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]'
    }]
}

注意

加载程序
字符串是如何定义的：
&name=img/[name].[ext]
表示使用原始文件的名称和扩展名，并将其放在img/文件夹下。字体文件也是如此

以下是完整的配置文件：

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
        })
    ]
}

你不需要里面所有的东西，我只是想展示一个大画面，所有的东西都准备好了。只需注意
输出
、
加载程序
和
插件
查看html网页包插件，它将为您动态构建index.html文件，并将其放在给定文件夹中。
我认为使用此npm包可能是个好主意


然后在您的webpack配置文件中使用类似的内容将编译后的应用程序文件移动到您需要的任何位置

new FileManagerPlugin({
    onEnd: {
        move: [
            {source: 'dist/index.html', destination: '../api/modules/web/views/init-build.phtml'},
            {source: 'dist/js', destination: '../api/public/js'},
            {source: 'dist/images', destination: '../api/public/images'}
        ]
    }
})

例如，上面的代码将编译的ng5应用程序移动到模块化的Falcon php应用程序中，并将SPA索引文件作为视图。所以Falcon可能会用它来渲染SPA种子
 这些设置不起作用，问题是老问题，因为webpack在webpack 4.0中有根本性的改变@易卜拉欣：在Webpack4.0中，这个解决方案对我很有效。