Использование webpack-dev-server 3 с параллельным webpack - PullRequest
0 голосов
/ 18 марта 2019

Я пытаюсь использовать webpack-dev-server с parallel-webpack , но это немного сложно.Я хотел бы собрать несколько небольших проектов в разные папки, но первая проблема, которая у меня возникла, заключается в том, что файл CSS не внедряется в файл шаблона HTML.Вторая проблема заключается в том, что я не уверен, как использовать папку build в webpack-dev-server.Конфигурация devServer выглядит следующим образом:

devServer: {
    contentBase: path.resolve(process.cwd(), 'build'),
    compress: false,
    port: 3000
  },

Конфигурация веб-пакета для параллельного веб-пакета:

    const brands = [{ title: 'Brand1', path: 'brand1' }, { title: 'Brand2', path: 'brand2' }];
    const mainWebpackConfig = process.env.NODE_ENV === 'development' ? 'dev' : 'prod';

    module.exports = brands.map((brand) =>
      merge({
        name: brand.path,
        entry: { brand: `./app/${brand.path}/app.js`, vendor: ['@babel/polyfill', 'react', 'react-dom', 'react-redux'] },
        output: {
          path: path.resolve(process.cwd(), `./build/${brand.path}`),
          filename: 'main.[hash:8].js',
          sourceMapFilename: 'main.[hash:8].map',
          chunkFilename: '[id].[hash:8].js',
        },
        plugins: [
          new HTMLWebpackPlugin({
            inject: true,
            title: brand.title,
            template: path.join(__dirname, '../app/index.html'),
            filename: 'index.html',
            chunks: [
              'vendor',
              `${brand.path}`
            ],
          }),
        ]
      }, require(`./webpack.${mainWebpackConfig}.babel`))
    );

Базовая конфигурация веб-пакета:


    const path = require('path');
    const slash = require('slash');
    const webpack = require('webpack');
    const ExtractTextPlugin = require('extract-text-webpack-plugin');

    module.exports = options => ({
      mode: options.mode,

      optimization: options.optimization,

      module: {
        rules: options.rules.concat([
          {
            test: /\.(js|jsx)$/,
            exclude: /node_modules\/(?!reform-core)/,
            use: {
              loader: 'babel-loader'
            },
          },
          // Eslint
          // {
          //   test: /\.js$/,
          //   exclude: /node_modules/,
          //   use: ['babel-loader', 'eslint-loader'],
          // },
          {
            test: /\.(scss|sass|css)$/,
            exclude: /node_modules\/(?!reform-core)/,
            use: ExtractTextPlugin.extract({
              fallback: 'style-loader',
              use: ['css-loader', 'sass-loader',],
            })
          },
          {
            // Preprocess 3rd party .css files located in node_modules
            test: /\.css$/,
            // include: /node_modules/,
            use: ExtractTextPlugin.extract({
              fallback: 'style-loader',
              use: 'css-loader',
            }),
          },
          {
            test: /\.(ico|gz)$/,
            exclude: /node_modules/,
            use: [
              {
                loader: 'file-loader',
                options: {
                  // slash - this package replace backslashes with slash ('\' -> '/')
                  name: (fullPath) => { console.log('fullPath', fullPath); return `./${slash(fullPath).replace(/.*?app\//, '')}` },
                },
              },
            ],
          },
          {
            test: /\.(jpe?g|png|gif|svg)$/,
            loaders: [
              {
                loader: 'file-loader',
                options: {
                  name: '[name].[ext]',
                  outputPath: '/assets/images/',
                  publicPath: '/',
                },
              },
            ],
          }, {
            test: /\.(ttf|otf|eot|svg|woff2?)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            exclude: /node_modules\/(?!reform-core)/,
            use: {
              loader: 'file-loader',
              options: {
                name: '[name].[ext]',
                outputPath: '/assets/fonts/',
                publicPath: '/',
              },
            },
          },
        ]),
      },
      plugins: options.plugins.concat([
        new ExtractTextPlugin({
          filename: 'assets/css/[hash].css',
          ignoreOrder: true,
          allChunks: true,
        }),
        new webpack.DefinePlugin({
          'process.env': {
            NODE_ENV: JSON.stringify(process.env.NODE_ENV),
            EMAILER_ENV: process.env.EMAILER_ENV ? JSON.stringify(process.env.EMAILER_ENV) : JSON.stringify('https://forms.morethan.com'),
          },
          ENVIRONMENT: (process.env.NODE_ENV || 'production').match(/(prod)/ig) ? JSON.stringify('production') : JSON.stringify('staging'),
        }),
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      ]),
      devServer: Object.assign({}, options.devServer),
      resolve: {
        modules: ['node_modules', 'app'],
        extensions: ['.js', '.jsx', '.react.js'],
        mainFields: ['browser', 'main'],
        alias: {
          react: path.resolve('./node_modules/react'),
          Utils: path.join(__dirname, '../app/utils'),
        },
      },

      devtool: options.devtool,
      target: 'web', // Make web variables accessible to webpack, e.g. window
      performance: options.performance || {},
    });

Кто-нибудь знает, где я могу найти примеры использования параллельного веб-пакета?

Спасибо!

...