Webpack 不捆绑输出 JS 文件

Posted 2023-02-22

【中文标题】Webpack 不捆绑输出 JS 文件

【英文标题】：Webpack Not Bundling Output JS Files

【发布时间】：2019-08-23 21:04:07

【问题描述】：

没有任何输出的 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 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

【问题讨论】：

您是否检查过您是否在任何地方都有dist 文件夹？那是文件应该在的地方

@HRK44 是的，我有一个dist 文件夹。

【参考方案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输出

【讨论】：

非常感谢您的帮助！不敢相信我没有早点想到。