javascript - Webpack 不打包自定义 js 文件

问题描述

这是我的目录结构：

Root
-dist
-node_modules
-src
--assets
--css
--js
--scss
--index.js
--template.html
--vendor.js
package-lock.json
package.json
postcss.config.js
tailwind.config.js
common.config.js
development.config.js
production.config.js

这些是我的 webpack 配置文件：

common.config.js

const path = require("path");

module.exports = {
    entry:{index: "./src/index.js",vendor: "./src/vendor.js"},
    module:{
        rules:[
            {
                test: /\.html$/,
                exclude:[/node_modules/],
                use:{loader:"html-loader",options:{attrs:['img:src', 'img:data-src']}}
            },
            {
                test: /\.(svg|jpeg|jpg|png|gif)$/,
                exclude:[/node_modules/],
                use:[{loader:"file-loader",options:{name:"[name].[contentHash].[ext]",outputPath:"assets/img"}},
                    {loader:"image-webpack-loader",options:{bypassOnDebug:true,disable:true}}
                ]
            }
        ]
    }
}

development.config.js

const path = require("path");
const common = require("./common.config");
const merge = require("webpack-merge");
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(common,{
    mode:"development",
    output:{filename: "[name].bundle.js",path: path.resolve(__dirname, "dist")},
    module: {
        rules: [
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use:["style-loader","css-loader","sass-loader"]
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use:[{loader: "style-loader"},
                    {loader: "css-loader"},
                    {
                        loader: "postcss-loader",ader
                        options: {ident: 'postcss',plugins: [require('tailwindcss'),require('autoprefixer')]}
                    }
                ]
            }
        ]
    },
    plugins:[new HtmlWebpackPlugin({template: "./src/template.html"})]
});

生产.config.js

const path = require("path");
const common = require("./common.config");
const merge = require("webpack-merge");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');




module.exports = merge(common, {
    mode: "production",
    output: {filename: "assets/js/[name].[contentHash].bundle.js",path: path.resolve(__dirname, "dist")},
    optimization: {
        minimizer: [
            new OptimizeCssAssetsPlugin(),new TerserPlugin(),
            new HtmlWebpackPlugin({
                template: "./src/template.html",
                minify: {
                    collapseWhitespace: true,
                    removeAttributeQuotes: true,
                    removeComments: true,
                    removeRedundantAttributes: true,
                    removeScriptTypeAttributes: true,
                    removeStyleLinkTypeAttributes: true,
                    useShortDoctype: true
                }
            })
        ]
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use:[{loader: MiniCssExtractPlugin.loader},
                    {loader: "css-loader"},
                    {loader: "sass-loader"}
                ]
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use:[{loader: MiniCssExtractPlugin.loader},
                    {loader: "css-loader"},
                    {loader: "postcss-loader",
                        options: {
                            ident: 'postcss',
                            plugins: [
                            require('tailwindcss'),
                            require('autoprefixer'),
                            ]
                        }
                    }
                ]
            }
        ]
    },
    plugins: [new MiniCssExtractPlugin({filename: "assets/style/[name].[contentHash].css"}),new CleanWebpackPlugin()]
});

index.js

import "./js/main"
import "./scss/main.scss"

供应商.js

import "./css/vendor.css"
import "./fontawesome/js/all.js"

问题是我没有在 main.js 中获得 index.js 在最终构建中导入的 javascript 文件内容，无论是在生产中还是在开发中。
vendor.js 正在以应有的方式工作并完美输出，并且 index.js 中的 css 导入也在工作。但是生产中的最终 index.hash.bundle.js 和开发中的 index.bundle.js 缺少 main.js 的内容。我都尝试过import "./js/main"并导入"./js/main.js"

刚开始使用 webpack，所以不太了解它。
我在这里做错了什么？

标签： javascriptnode.jsnpmwebpack

javascript - Webpack 不打包自定义 js 文件

问题描述

解决方案

推荐阅读