Webpack: проблемы с файлами / src и / dist из-за publicPath - PullRequest
Новая
       16

Webpack: проблемы с файлами / src и / dist из-за publicPath

0 голосов
/ 02 сентября 2018

Когда я запускаю webpack-dev-server с publicPath / dist , я могу видеть живое редактирование для моего приложения (изменения html, styling, js). Однако когда я компилирую приложение в производственную сборку, таблица стилей и JavaScript загружаются из /dist/main.css и /dist/main.js, а не из main.css и main.js

Кажется, проблема в настройке publicPath. Если я удаляю publicPath, приложение компилируется с main.css и main.js, но я не вижу живых изменений. Однако, если я сохраню publicPath: / dist , я смогу увидеть живые изменения, но теперь я получаю / dist / main.css и /dist/main.js

const path = require('path');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/js/app.js',
  output: {
    filename: 'main.bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist'
  }, //js output object
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      }, //sass to css
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['babel-preset-env']
            }
          }
        ]
      } //babel
    ]
  }, //module object
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].min.css',
      chunkFilename: '[id].min.css'
    }),
    new BrowserSyncPlugin({
      host: 'localhost',
      port: 3000,
      proxy: 'http://localhost:8080/dist'
    }),
    new HtmlWebpackPlugin({
      template: './src/index.html',
     /* minify: {
        collapseWhitespace: true
      }*/
    }),
    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.css$/g,
      cssProcessor: require('cssnano'),
      cssProcessorPluginOptions: {
        preset: ['default', {discardComments: {removeAll: true}}]
      },
      canPrint: true
    })
  ] //plugins array
}
...