Webpack с двумя точками входа и mini- css -extact - PullRequest
Новая
       74

Webpack с двумя точками входа и mini- css -extact

0 голосов

У меня есть конфиг webpack. 

let webpackConfig = {
  mode: mode,
  devtool: devtool,
  entry: [
    `${PATHS.ROOT}/main.js`,
    `${PATHS.ROOT}/assets/sass/app.scss`,
  ],
  output: {
    path: PATHS.PUBLIC,
    filename: 'js/[name].js',
    chunkFilename: 'js/parts/[name].[hash].js',
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: '/node_modules/',
      },
      {
        test: /\.css$/,
        use: [isProduction ? MiniCssExtractPlugin.loader : 'vue-style-loader', 'css-loader'],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          isProduction ? MiniCssExtractPlugin.loader : 'vue-style-loader',
          'css-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            scss: 'vue-style-loader!css-loader!sass-loader',
            sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
          },
        },
      }
    ],
  },
  plugins: [
    new VueLoaderPlugin(),

    new MiniCssExtractPlugin({
      filename: "css/[name].css",
      chunkFilename: 'css/parts/[name].[hash].css',
    }),

    new OptimizeCssAssetsPlugin(),
  ],

Как видите, у меня есть две точки входа, первая из которых собирает Vue компоненты, которые иногда имеют стили. Во втором случае набирается s css. Для разделения css я использую MiniCssExtractPlugin Могу ли я реализовать стили в компонентах vue, чтобы они не помещались в отдельные файлы? Как это настроить?

Насколько я знаю, в extract-text-plugin можно было реализовать подобное, но это устарело

...