Webpack 生产构建文件路径关闭

Question

我正在运行这个命令来尝试生成一个生产 webpack 构建：

rimraf ./build/* && webpack -p --progress --config webpack.production.js

但是，当我打开 build/index.html 时，由于位置已关闭，它无法加载大量文件。

1. 未能为bundle.js 文件放置正确的位置。它像这样加载它：/bundle.js。但是bundle.js 文件实际上与构建文件夹中的index.html 文件位于同一目录中，因此它应该像这样加载它./bundle.js
2. 如果我更正了bundle.js 路径，它仍然会为资产设置不正确的路径：

有趣的是，当我运行时，我的应用程序当前可以与 webpack 开发服务器一起使用：webpack-dev-server --inline --progress --config webpack.dev.js。

这是我当前的webpack.production.js 文件的样子：

var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {  
  devtool: 'source-map',
  devServer: {
    historyApiFallback: true, // This will make the server understand "/some-link" routs instead of "/#/some-link"
  },
  entry: [
    './src/scripts' // This is where Webpack will be looking for the entry index.js file
  ],
  output: {
    path: path.join(__dirname, 'build'), // This is used to specify folder for producion bundle
    filename: 'bundle.js', // Filename for production bundle
    publicPath: '/'
  },
  resolve: {
    modules: [
      'node_modules', 
      'src',
      path.resolve(__dirname, 'src/scripts'),
      path.resolve(__dirname, 'node_modules')
    ], // Folders where Webpack is going to look for files to bundle together
    extensions: ['.jsx', '.js'] // Extensions that Webpack is going to expect
  },
  module: {
    // Loaders allow you to preprocess files as you require() or “load” them. 
    // Loaders are kind of like “tasks” in other build tools, and provide a powerful way to handle frontend build steps.
    loaders: [
      {
        test: /\.jsx?$/, // Here we're going to use JS for react components but including JSX in case this extension is preferable
        include: [
          path.resolve(__dirname, "src"),
        ],
        loader: ['react-hot-loader']
      },
      {
        loader: "babel-loader",

        // Skip any files outside of your project's `src` directory
        include: [
          path.resolve(__dirname, "src"),
        ],

        // Only run `.js` and `.jsx` files through Babel
        test: /\.jsx?$/,

        // Options to configure babel with
        query: {
          plugins: ['transform-runtime'],
          presets: ['es2015', 'stage-0', 'react'],
        }
      },
      {
          test: /\.scss$/,
          loaders: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
  plugins: [
    new webpack.NoEmitOnErrorsPlugin(), // Webpack will let you know if there are any errors

    // Declare global variables
    new webpack.ProvidePlugin({
      React: 'react',
      ReactDOM: 'react-dom',
      _: 'lodash'
    }),

    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/index.html',
      hash: true
    }),

    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      },
      sourceMap: true
    }),
  ]
}

以防万一，这就是我当前的 webpack.dev.js 文件的样子：

var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {  
  devtool: 'cheap-module-source-map',
  devServer: {
    historyApiFallback: true, // This will make the server understand "/some-link" routs instead of "/#/some-link"
  },
  entry: [
    'babel-polyfill',
    'webpack-dev-server/client?http://127.0.0.1:8080/', // Specify the local server port
    'webpack/hot/only-dev-server', // Enable hot reloading
    './src/scripts' // This is where Webpack will be looking for the entry index.js file
  ],
  output: {
    path: path.join(__dirname, 'build'), // This is used to specify folder for producion bundle
    filename: 'bundle.js', // Filename for production bundle
    publicPath: '/'
  },
  resolve: {
    modules: [
      'node_modules', 
      'src',
      path.resolve(__dirname, 'src/scripts'),
      path.resolve(__dirname, 'node_modules')
    ], // Folders where Webpack is going to look for files to bundle together
    extensions: ['.jsx', '.js'] // Extensions that Webpack is going to expect
  },
  module: {
    // Loaders allow you to preprocess files as you require() or “load” them. 
    // Loaders are kind of like “tasks” in other build tools, and provide a powerful way to handle frontend build steps.
    loaders: [
      {
        test: /\.jsx?$/, // Here we're going to use JS for react components but including JSX in case this extension is preferable
        include: [
          path.resolve(__dirname, "src"),
        ],
        loader: ['react-hot-loader']
      },
      {
        loader: "babel-loader",

        // Skip any files outside of your project's `src` directory
        include: [
          path.resolve(__dirname, "src"),
        ],

        // Only run `.js` and `.jsx` files through Babel
        test: /\.jsx?$/,

        // Options to configure babel with
        query: {
          plugins: ['transform-runtime', 'transform-decorators-legacy'],
          presets: ['es2015', 'stage-0', 'react'],
        }
      },
      {
          test: /\.scss$/,
          loaders: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(), // Hot reloading
    new webpack.NoEmitOnErrorsPlugin(), // Webpack will let you know if there are any errors

    // Declare global variables
    new webpack.ProvidePlugin({
      React: 'react',
      ReactDOM: 'react-dom',
      _: 'lodash'
    }),

    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/index.html',
      hash: false
    })
  ]
}

任何想法我做错了什么？

Answer 1

在运行npm run watch 时遇到同样的错误，本地开发仍然可以工作，但是在部署到演示服务器后，应用程序在错误的 js 文件 url 上崩溃了。

原因：

我的 webpack.mix.js 中的一些更改开始编译浏览器找到的 index.html 文件，而不是我正在使用的 app.blade。

通过设置修复路径：publicPath: './public/' （请注意，这是一个相对路径）。另外，我通过在HtmlWebpackPlugin({ 部分中设置inject: false, 删除了生成的url，并使用了asset('/...') 逻辑。

Answer 2

遇到了类似的问题。在 webpack.dev.js 中设置 output.publicPath: "/" 和在 webpack.prod.js 中设置 output.publicPath: "./" 对我有用。