配置Webpack生产输出文件

Posted 2021-04-27

这是我第一次构建webpack.production.config.js文件。 这是我的目录结构。 我的webpack dev config输入和输出如下：

const path = require('path');
const webpack = require('webpack');

let config = {
  entry: path.resolve(__dirname, 'app/index.js'),
  output: {
    path: path.resolve(__dirname, '/public'),
    filename: 'bundle.js',
  },

....

我的webpack生产文件是这样的：

const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: path.resolve(__dirname, 'app/index.js'),
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].js',
  },
  module: {
    loaders: [
      { test: /.json$/, loader: 'json' },
      { test: /.js$/, exclude: /node_modules/, loader: 'babel-loader' },
  {
    test: /.css$/,
    use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }),
  },
  { test: /.(png|svg|jpg|gif)$/, use: ['file-loader'] },
  {
    test: /.(woff|woff2|eot|ttf|otf)$/,
    use: ['file-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({ title: 'My App', filename: 'admin.html' }),
    new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify('production'),
}),
    new webpack.optimize.UglifyJsPlugin(),
    new ExtractTextPlugin('styles.css'),
    new webpack.optimize.CommonsChunkPlugin('common.js'),
  ],
};

Npm启动正常。 Npm运行构建编译并创建我的构建文件夹。 在文件夹中是我的资产，是从HtmlWebpackPlugin生成的main.js，common.js.js和admin.html。

构建完成后，admin.html将读取commmon.js.js和main.js源代码。

当我尝试部署到heroku时，如何使生产中的输出路径正确，以便新生成的html位于根目录中并读取正确的js文件？ 当前在我的package.json中，入口点是“ app / index.js”。