Webpack作业仅做CSS或JS或两者都做

如何解决Webpack作业仅做CSS或JS或两者都做

我有一个Vue js项目，该项目使用webpack，它可以完成我需要的一切。我不是webpack专家，充其量是新手。但是，如果可能的话，我想重新生成.js / .vue文件。目前，我的webpack.config.js文件在运行npm run build时同时执行了这两项任务。我看到它也呈现了供应商文件，这些文件集中到build中。我注意到我可以通过执行npm run build:prod来仅运行非供应商文件，并且可以正常工作（只需为站点生成两个.css和.js文件。）如果可以运行任何一个，我都非常喜欢以下命令：

npm run build:js仅呈现.js（包括.vue）文件 npm run build:css仅渲染.css文件 npm run 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,},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$/,use: 'babel-loader' },{
            test: /\.s?[ac]ss$/,use: [
              {
                loader: MiniCssExtractPlugin.loader,options: {
                  // sourceMap: true,{
                loader: 'css-loader',options: {
                  sourceMap: true,{
                loader: 'postcss-loader',plugins: () => [precss,autoprefixer],{
                loader: 'sass-loader',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/],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,];
};

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

"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"
},

感谢您的时间，

Webpack新秀