node.js - Webpack 未捆绑输出 JS 文件

Question

没有创建任何输出 js 包文件，也没有显示在目录中，尽管终端的输出表明这些文件正在构建...

我尝试按照几个教程从不同角度解决这个问题，但我仍然无法弄清楚是什么阻止了我的输出包文件的创建。

这些是我正在运行的版本:

• npm - 6.9.0

• Node - 10.15.0

• Webpack - 3.5.6

以下是我的 webpack.config.js 文件:

const autoprefixer = require('autoprefixer');
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const glob = require('glob');

function tryResolve_(url, sourceFilename) {
  try {
    return require.resolve(url, {paths: [path.dirname(sourceFilename)]});
  } catch (e) {
    return '';
  }
}

function tryResolveScss(url, sourceFilename) {
  const normalizedUrl = url.endsWith('.scss') ? url : `${url}.scss`;
  return tryResolve_(normalizedUrl, sourceFilename) ||
    tryResolve_(path.join(path.dirname(normalizedUrl), `_${path.basename(normalizedUrl)}`),
      sourceFilename);
}

function materialImporter(url, prev) {
  if (url.startsWith('@material')) {
    const resolved = tryResolveScss(url, prev);
    return {file: resolved || url};
  }
  return {file: url};
}


module.exports = [{
  entry: {
    radio: './src/radio.js',
    index: './src/index.js',
    radioStyle: './src/radio.scss',
    indexStyle: './src/index.scss'
    },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css'
    })
  ],
  module: {
    rules: [
      {
        test: /\.(scss|sass)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [autoprefixer()]
            }
          },
          { loader: 'sass-loader',
            options: {
              importer: materialImporter,
              includePaths: glob.sync('node_modules').map((d) => path.join(__dirname, d))
            }
          },
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      }
    ]
  },
}];

以下是我的 package.json 文件:

{
  "name": "my-radio",
  "version": "1.0.0",
  "description": "",
  "main": "./src/index.js",
  "dependencies": {
    "@material/button": "^1.1.0",
    "@material/card": "^1.1.0",
    "@material/ripple": "^1.1.0",
    "@material/top-app-bar": "^1.1.0",
    "@material/typography": "^1.0.0",
    "material-components-web": "^1.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/preset-env": "^7.4.2",
    "autoprefixer": "^9.5.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "clean-webpack-plugin": "^2.0.1",
    "css-loader": "^2.1.1",
    "extract-loader": "^3.1.0",
    "file-loader": "^3.0.1",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  },
  "scripts": {
    "build": "webpack -p",
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC"
}

据我了解，这段代码应该将“radio.bundle.js”、“radioStyle.bundle.js”、“index.bundle.js”和“indexStyle.bundle.js”输出到我的/dist 文件夹中:

entry: {
    radio: './src/radio.js',
    index: './src/index.js',
    radioStyle: './src/radio.scss',
    indexStyle: './src/index.scss'
    },
output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

但是当我 npm start 并收到“编译成功”消息后，我在目录中的任何位置都找不到这些文件。

这是我的项目结构:

dist

docs
 proj-dir-structure.odt
node_modules
src
 index.js
 index.scss
 radio.js
 radio.scss
bundle.css
bundle.js
index.html
package.json
package-lock.json
radio.html
webpack.config.js

Answer 1

您的package.json具有以下脚本

"scripts": {
    "build": "webpack -p",
    "start": "webpack-dev-server"
}

npm start 将调用 webpack-dev-server。这将构建依赖图中的所有文件并将其保存在内存中。这有助于webpack-dev-server检测文件中的更改并触发自动重新加载。构建的文件在物理上不可用

npm run build 将调用 webpack -p。这将生成您将在生产中部署的输出包。您可以在 dist 文件夹中找到生成的文件

您必须执行npm run build才能查看生成的webpack输出