Webpack 输出文件到不同目录

Question

构建项目后，我有 index.html、bundle.js 和一些 .css 文件，我希望将它们放在这样的 dir 结构中：

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

这是我为 .js 和 .css 所做的：

entry: {
    app: path.resolve(__dirname, 'app/src/index.js'),
},
output: {
    path: path.resolve(__dirname, 'dist', 'css'),
    filename: '../js/[name].js'
},

下面是对应的模块配置：

module: {
    loaders: [{
        test: /\.jsx?$/,
        loaders: ['react-hot', 'babel-loader'],
        exclude: /node_modules/
    },
    {
      test: /\.css$/,
      loader: ExtractTextPlugin.extract("style-loader", "css-loader")
    },
    {
      test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: "url-loader?limit=10000&mimetype=application/font-woff"
    },
    {
      test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: "file-loader"
    }]
},

我不知道如何从文件夹中复制index.html 并将其放在 dist/ 下。我知道file-loader 是必需的，但我应该在entry 和output 下写什么？

谢谢！

---

我想通了，这里是解决方案：

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 部分中定义它：

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

注意loader这个字符串是怎么定义的：&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
        })
    ]
}

你不需要里面的所有东西，我只是想展示一下它在一切就绪后的样子。只关注output、loaders和plugins

Answer 1

我认为使用这个 npm 包

可能是个好主意

https://github.com/gregnb/filemanager-webpack-plugin

然后在你的 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 种子。

Answer 2

查看 webpack 的 html-webpack-plugin，它将为您动态构建 index.html 文件并将其放置在给定文件夹中。