Question

我已经获得了一个WordPress项目，并试图使我的本地开发环境正常工作。我正在使用Vagrant，它似乎已成功创建了虚拟机。然后，我运行npm run dev，运行没有错误。这是我的packages.json中的相关行：

"dev": "webpack --config webpack.config.js --mode development",

这是输出：

$ npm run dev

> PRO008@0.1.0 dev /Users/chrisheuberger/_RadishLab/PRO008/men-care.pro001.catalyst.radish.loc/wp-content/themes/mencare
> webpack --config webpack.config.js --mode development

clean-webpack-plugin: /Users/chrisheuberger/_RadishLab/PRO008/men-care.pro001.catalyst.radish.loc/wp-content/themes/mencare/dist has been removed.
Browserslist: caniuse-lite is outdated. Please run next command `npm update caniuse-lite browserslist`
Hash: 77c0cfbe5a2f789f8029
Version: webpack 4.29.5
Time: 1593ms
Built at: 09/11/2019 11:20:53 AM
           Asset      Size  Chunks             Chunk Names
 fonts/icons.eot    17 KiB          [emitted]
 fonts/icons.svg  40.8 KiB          [emitted]
 fonts/icons.ttf  16.8 KiB          [emitted]
fonts/icons.woff  10.1 KiB          [emitted]
  main.bundle.js  32.2 KiB    main  [emitted]  main
        main.css   180 KiB    main  [emitted]  main
Entrypoint main = main.css main.bundle.js
[0] multi ./src/main.js 28 bytes {main} [built]
[./src/_sass/style.sass] 39 bytes {main} [built]
[./src/js/project/app.js] 1.58 KiB {main} [built]
[./src/js/project/index.js] 284 bytes {main} [built]
[./src/js/project/menu.js] 1.52 KiB {main} [built]
[./src/js/project/modal.js] 723 bytes {main} [built]
[./src/js/project/slideshow.js] 1.89 KiB {main} [built]
[./src/js/project/sticky-nav.js] 727 bytes {main} [built]
[./src/main.js] 324 bytes {main} [built]
    + 1 hidden module
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/postcss-loader/src/index.js!node_modules/sass-loader/lib/loader.js!src/_sass/style.sass:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src/index.js!./node_modules/sass-loader/lib/loader.js!./src/_sass/style.sass] ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/sass-loader/lib/loader.js!./src/_sass/style.sass 68.8 KiB {mini-css-extract-plugin} [built]
    [./src/fonts/icons.eot] 35 bytes {mini-css-extract-plugin} [built]
    [./src/fonts/icons.svg] 35 bytes {mini-css-extract-plugin} [built]
    [./src/fonts/icons.ttf] 35 bytes {mini-css-extract-plugin} [built]
    [./src/fonts/icons.woff] 36 bytes {mini-css-extract-plugin} [built]
        + 2 hidden modules

问题：在浏览器中，我只会看到“找不到文件”。我希望看到该网站（使用自定义主题）。

该错误是否暗示某种类型的问题？我不确定下一步要去哪里调试。这就是我的webpack.config.js中的内容：

const webpack = require('webpack');
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

let pathsToClean = [ 'dist' ];
let cleanOptions = {
  root: __dirname,
  verbose: true
};

const config = {
  context: path.resolve(__dirname),
  entry: {
    main: [
      path.resolve(__dirname, 'src/main.js'),
    ]
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
    publicPath: '/' // file emitted to path directory (dist) will be referenced from this
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
    },
    minimizer: [
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  resolve: {
    modules: [ 'node_modules' ]
  },
  module: {
    rules: [
      {
        // not currently used (images being served through /src without processing
        // leaving this in the config in case optimized images desired in the future
        test: /\.(png|jpe?g|gif|svg)$/i,
        include: [
          path.resolve(__dirname, 'src/images'),
          path.resolve(__dirname, 'src/icons')
        ],
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'images',
              publicPath: 'images'
            }
          },
          {
            loader: 'image-webpack-loader',
            options: {
              disable: false,
              mozjpeg: {
                progressive: true,
                quality: 90
              },
              optipng: {
                enabled: false
              },
              pngquant: {
                quality: '65-90',
                speed: 4
              },
              gifsicle: {
                interlaced: false
              },
            },
          }
        ]
      },
      {
        test: /\.(ttf|eot|woff|woff2|svg)$/,
        include: [
          path.resolve(__dirname, 'src/fonts')
        ],
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'fonts', // target files placed in dist/fonts
            publicPath: 'fonts' // specify custom public path (see final css.main)
          },
        },
      },
      {
        test: /\.(sass|scss)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(pathsToClean, cleanOptions),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ]
};

// mode specific config
module.exports = (env, argv) => {
  if (argv.mode === 'development') {
    config.devtool = 'inline-source-map';
    config.performance = {
      hints: 'warning'
    }
  }

  if (argv.mode === 'production') {
    config.devtool = 'source-map';
    config.performance = {
      hints: false
    }
  }

  return config;
};

也许这看起来像是权限问题或错误的路径？我知道本地开发人员过去曾为我自己和其他人工作过，所以我怀疑此构建过程已更改或我的本地主机有所更改？任何帮助将不胜感激，谢谢！

系统详细信息：
Mac Mojave 10.14.6
Chrome版本76.0.3809.132
PHP版本7.3.8
节点版本10.12.0
Webpack版本3.3.5

如何解决“找不到文件”。在本地开发WordPress网站时出错

0 个答案: