1

.scss2 つのファイルを 2 つの異なる.cssファイルに変換しようとしていtimer_player.cssますstyle.css。

にのstyle.cssスタイルを指定することはできませんtimer_player.css。

2 つのインスタンスを作成することでこれExtractTextPluginを行うことができますが、このパッケージは非推奨です。

私のフォルダツリーは次のようになります。

- src
  - js
    - popup.js
    - content_scripts
      - timer_player
        - index.js
  - css
    - popup.css
    - timer_player.css
4

1 に答える 1

0

この問題を長い間読んだ後、これを行うことができました。トリックの一部は、optimization属性を使用し、チャンク名でフィルタリングすることです。

私の webpack.config.js は次のようになります。

module.exports = {
  entry: {
    popup: ['./src/js/popup.js', './src/css/popup.scss'],
    timer_player: [
      './src/js/content_scripts/timer_player/index.js',
      './src/css/timer_player.scss',
    ],
  },
  output: {
    publicPath: '.',
    path: resolve(__dirname, 'dist/'),
    filename: '[name].js',
    libraryTarget: 'umd',
  },
  plugins: [
    new WebpackReloaderPlugin({
      port: 9090, // Which port use to create the server
      reloadPage: true, // Force the reload of the page also
      entries: {
        // The entries used for the content/background scripts
        contentScript: 'popup', // Use the entry names, not the file name or the path
        background: 'background', // *REQUIRED
      },
    }),

    new MiniCssExtractPlugin({ filename: '[name].css' }),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src', 'popup.html'),
      filename: 'popup.html',
      chunks: ['popup'],
    }),
    new CopyWebpackPlugin([
      { from: './src/manifest.json' },
      { from: './src/images', to: 'images' },
    ]),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', // translates CSS into CommonJS
          {
            loader: 'sass-loader',
            options: {
              includePaths: ['node_modules', 'node_modules/@material/*']
                .map(d => path.join(__dirname, d))
                .map(g => glob.sync(g))
                .reduce((a, c) => a.concat(c), []),
            },
          },
        ],
      },
      {
        test: /\.txt$/,
        use: 'raw-loader',
      },
    ],
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        extractPopupStyles: {
          name: 'style',
          chunks: chunk => chunk.name === 'popup',
        },
      },
    },
  },
};

どんな提案でも大歓迎です

于 2019-09-17T19:05:32.657 に答える