WebPack最终编译输出文件夹为空

Question

无法解决如何强制WebPack 3.6构建最终的dist。
只是输出文件夹是空的。使用给定的配置，应用程序在浏览器内存中构建并运行，但dist文件夹为空，并且现在有任何物理文件。

const path = require('path'); 
const webpack = require('webpack'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const PreloadWebpackPlugin = require('preload-webpack-plugin'); 
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin'); 
const StyleExtHtmlWebpackPlugin = require('style-ext-html-webpack-plugin'); 
const CompressionPlugin = require('compression-webpack-plugin'); 
const autoprefixer = require('autoprefixer'); 

const staticSourcePath = path.join(__dirname, 'static'); 
const sourcePath = path.join(__dirname); 
const buildPath = path.join(__dirname, 'dist'); 

module.exports = { 
    devtool: 'cheap-module-source-map', 
    entry: { 
     /*base: path.resolve(staticSourcePath, 'src/sass/base.scss'),*/ 
     app: path.resolve(sourcePath, 'index.js') 
    }, 
    output: { 
     path: path.join(__dirname, 'dist'), 
     filename: '[name].[chunkhash].js', 
     publicPath: '/' 
    }, 
    resolve: { 
     extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'], 
     modules: [ 
      sourcePath, 
      path.resolve(__dirname, 'node_modules') 
     ] 
    }, 
    plugins: [ 
     new webpack.DefinePlugin({ 
      'process.env.NODE_ENV': JSON.stringify('production') 
     }), 
     new webpack.optimize.ModuleConcatenationPlugin(), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'vendor', 
      filename: 'vendor.[chunkhash].js', 
      minChunks (module) { 
       return module.context && module.context.indexOf('node_modules') >= 0; 
      } 
     }), 
     /* new webpack.optimize.UglifyJsPlugin({ 
      compress: { 
       warnings: false, 
       screw_ie8: true, 
       conditionals: true, 
       unused: true, 
       comparisons: true, 
       sequences: true, 
       dead_code: true, 
       evaluate: true, 
       if_return: true, 
       join_vars: true 
      }, 
      output: { 
       comments: false 
      } 
     }),*/ 
     new webpack.LoaderOptionsPlugin({ 
      options: { 
       postcss: [ 
        autoprefixer({ 
         browsers: [ 
          'last 3 version', 
          'ie >= 10' 
         ] 
        }) 
       ], 
       context: staticSourcePath 
      } 
     }), 
     new webpack.HashedModuleIdsPlugin(), 
     new HtmlWebpackPlugin({ 
      template: path.join(__dirname, 'index.html'), 
      path: buildPath, 
      excludeChunks: ['base'], 
      filename: 'index.html', 
      minify: { 
       collapseWhitespace: true, 
       collapseInlineTagWhitespace: true, 
       removeComments: true, 
       removeRedundantAttributes: true 
      } 
     }), 
     new PreloadWebpackPlugin({ 
      rel: 'preload', 
      as: 'script', 
      include: 'all', 
      fileBlacklist: [/\.(css|map)$/, /base?.+/] 
     }), 
     new ScriptExtHtmlWebpackPlugin({ 
      defaultAttribute: 'defer' 
     }), 
     new ExtractTextPlugin({ 
      filename: '[name].[contenthash].css', 
      allChunks: true 
     }), 
     /* new StyleExtHtmlWebpackPlugin({ 
      minify: true 
     }),*/ 
     new CompressionPlugin({ 
      asset: '[path].gz[query]', 
      algorithm: 'gzip', 
      test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/, 
      threshold: 10240, 
      minRatio: 0.8 
     }) 
    ], 
    module: { 



     rules: [ 
      { 
       test: /\.(js|jsx)$/, 
       exclude: /node_modules/, 
       use: { 
        loader: 'babel-loader', 
        options: { 
        presets: ['env', 'react'] 
        } 
       }, 
       include: sourcePath 
      }, 
      { 
       test: /\.scss$/, 
       exclude: /node_modules/, 
       use: ExtractTextPlugin.extract({ 
        fallback: 'style-loader', 
        use: [ 
         { loader: 'css-loader', options: { minimize: true } }, 
         'postcss-loader', 
         'sass-loader' 
        ] 
       }) 
      }, 
      { 
       test: /\.(eot?.+|svg?.+|ttf?.+|otf?.+|woff?.+|woff2?.+)$/, 
       use: 'file-loader?name=assets/[name]-[hash].[ext]' 
      }, 
      { 
       test: /\.(png|gif|jpg|svg)$/, 
       use: [ 
        'url-loader?limit=20480&name=assets/[name]-[hash].[ext]' 
       ], 
       include: staticSourcePath 
      } 
     ] 
    } 
}; 

而该项目的结构是这样的：

D:\project_name 
├───components 
│ └───villages 
│  └───neighborhoods 
│   └───blocks 
│    └───houses 
├───css 
│ └───404 
│  └───font-awesome 
│   ├───css 
│   └───fonts 
├───dist 
├───flags 
│ ├───1x1 
│ └───4x3 
├───fonts 
│ ├───Raleway 
│ └───roboto 
├───icons 
├───images 
│ └───slides 
├───img 
│ ├───404 
│ │ ├───demo 
│ │ └───slides 
│ └───works 
│  └───thumbs 
├───node_modules 
│ └───... 
├───js 
│ └───404 
└──index.html 
└──index.js 
└──package.json 
└──webpack.config.js 

我运行它通过Windows CMD

Answer 1

您标记，的WebPack-DEV-服务器，据我所知不会将文件放在您的dist目录中，它仅用于开发预览，因此它仅在内部编译构建文件以仅构建更改的部分，

构建生产使用：webpack -p