Question

虽然终端的输出显示这些文件正在构建中，但是没有创建输出js捆绑文件，也没有显示在目录中。

为了从不同角度解决此问题，我尝试了一些教程，但是我仍然无法弄清楚是什么导致无法创建输出包文件。

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

npm-6.9.0
节点-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并收到“编译成功”消息后，我无法在目录中的任何位置找到这些文件。

这是我的项目结构：

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。这将在依赖关系图中生成所有文件，并将其保留为in-memory。这有助于webpack-dev-server检测文件更改并触发auto-reload。构建的文件将无法实际使用

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

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

Webpack不捆绑输出JS文件

1 个答案: