Question

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

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”。

配置webpack生产输出文件

0 个答案: