Node.js 仅执行CSS或JS或两者的网页包作业

我有一个

Vue-js

项目，它使用webpack，可以做我需要的一切。我不是网页专家，充其量只是新手。但是，如果可能的话，我想重新生成.js/.vue文件。目前，当运行

npm run build

时，我的

webpack.config.js

文件同时执行这两项任务。我看到它也呈现了供应商文件，这些文件被集中到

构建中。我注意到，我可以通过执行
npm run build:prod
来运行非供应商文件，这很有效（只需为站点生成两个.css和.js文件）。如果我可以运行以下任何一个命令，我会非常喜欢它：

npm运行build:js
只渲染.js（包括.vue）文件
npm运行build:css
只渲染.css文件
npm运行build
以呈现两者（包括供应商）

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
const precss = require('precss');
const autoprefixer = require('autoprefixer');

const bundleOutputDir = './wwwroot/dist';
const VueLoaderPlugin = require('vue-loader/lib/plugin');

const PATHS = {
  root: __dirname,
  source: path.join(__dirname, 'ClientApp'),
  target: path.join(__dirname, 'wwwroot'),
  node_modules: path.join(__dirname, 'node_modules'),
  pages: path.join(__dirname, 'Pages'),
};

module.exports = () => {
  const isDevBuild = !(
    process.env.NODE_ENV && process.env.NODE_ENV === 'production'
  );

  const extractCSS = new MiniCssExtractPlugin({
    filename: 'style.css', // Output styles to
  });

  return [
    {
      // devtool: 'source-map',
      mode: isDevBuild ? 'development' : 'production',
      stats: { modules: false },
      entry: { main: './ClientApp/app.js' },
      resolve: {
        extensions: ['.js', '.vue'],
        alias: isDevBuild
          ? {
            vue$: 'vue/dist/vue',
            components: path.resolve(__dirname, './ClientApp/components'),
            constants: path.resolve(__dirname, './ClientApp/constants'),
            mixins: path.resolve(__dirname, './ClientApp/mixins'),
            pages: path.resolve(__dirname, './ClientApp/pages'),
            services: path.resolve(__dirname, './ClientApp/services'),
            api: path.resolve(__dirname, './ClientApp/store'),
            views: path.resolve(__dirname, './ClientApp/views'),
          }
          : {
            vue$: 'vue/dist/vue', // KLG: TEST 03252020 - I believe this is what made it work in Prod and NOT flash the header. It is the only possibility based on what changed in this checkin.
            components: path.resolve(__dirname, './ClientApp/components'),
            constants: path.resolve(__dirname, './ClientApp/constants'),
            mixins: path.resolve(__dirname, './ClientApp/mixins'),
            pages: path.resolve(__dirname, './ClientApp/pages'),
            services: path.resolve(__dirname, './ClientApp/services'),
            api: path.resolve(__dirname, './ClientApp/store'),
            views: path.resolve(__dirname, './ClientApp/views'),
          },
      },
      output: {
        path: path.join(__dirname, bundleOutputDir),
        filename: '[name].js',
        publicPath: '/dist/',
      },
      module: {
        rules: [
          { test: /\.vue$/, include: /ClientApp/, use: 'vue-loader' },
          { test: /\.vue\.html$/, loader: 'vue-loader' },
          { test: /\.js$/, include: /ClientApp/, use: 'babel-loader' },
          {
            test: /\.s?[ac]ss$/,
            use: [
              {
                loader: MiniCssExtractPlugin.loader,
                options: {
                  // sourceMap: true,
                },
              },
              {
                loader: 'css-loader',
                options: {
                  sourceMap: true,
                },
              },
              {
                loader: 'postcss-loader',
                options: {
                  sourceMap: true,
                  plugins: () => [precss, autoprefixer],
                },
              },
              {
                loader: 'sass-loader',
                options: {
                  sourceMap: true,
                  includePaths: [PATHS.node_modules],
                },
              },
            ],
          },
          {
            test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
            exclude: [/images/],
            use: [
              {
                loader: 'file-loader',
                options: {
                  name: '[name].[ext]',
                  outputPath: 'fonts',
                  publicPath: '../dist/fonts/',
                },
              },
            ],
          },
          {
            test: /\.(png|jpg|jpeg|gif|svg)$/,
            exclude: [/fonts/],
            use: [
              {
                loader: 'file-loader',
                options: {
                  name: '[name].[ext]',
                  outputPath: 'images',
                  publicPath: '../images/',
                },
              },
            ],
          },
        ],
      },
      plugins: [
        new VueLoaderPlugin(),
        new webpack.DllReferencePlugin({
          context: __dirname,
          manifest: require('./wwwroot/dist/vendor-manifest.json'),
        }),
        new CopyWebpackPlugin([
          { from: `${PATHS.source}/images`, to: `${PATHS.target}/images` },
        ]),
      ].concat(
        isDevBuild
          ? [
            extractCSS,
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
              filename: '[file].map', // Remove this line if you prefer inline source maps
              moduleFilenameTemplate: path.relative(
                bundleOutputDir,
                '[resourcePath]',
              ), // Point sourcemap entries to the original file locations on disk
            }),
          ]
          : [
            extractCSS,
            // Compress extracted CSS.
            new OptimizeCSSPlugin({
              cssProcessorOptions: {
                safe: true,
              },
            }),
          ],
      ),
    },
  ];
};

以下是我的
package.json
文件的
scripts
部分：

"scripts": {
    "dev": "cross-env ASPNETCORE_ENVIRONMENT=Development NODE_ENV=development dotnet run",
    "kevin": "npm run build-vendor:dev && npm run dev",
    "build": "npm run build-vendor:prod && npm run build:prod",
    "build:prod": "cross-env NODE_ENV=production webpack --progress --hide-modules",
    "build-vendor:prod": "cross-env NODE_ENV=production webpack --config webpack.config.vendor.js --progress",
    "build-vendor:dev": "cross-env NODE_ENV=development webpack --config webpack.config.vendor.js --progress",
    "lint": "eslint -c ./.eslintrc.js ClientApp/**/*.js  ClientApp/**/*.vue  ClientApp/**/*.json webpack*.js",
    "install": "npm run build-vendor:dev",
    "update-packages": "npx npm-check -u"
},

谢谢你抽出时间

网页新手