weread_deepreading/webpack.config.js at main · lagrangee/weread_deepreading · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = (env, argv) => {
  const isDevelopment = argv.mode === 'development';

  // 开发模式提示
  if (isDevelopment) {
    console.log('🔧 开发模式启动，文件变化时会自动重新构建');
    console.log('📝 构建完成后，请在 Chrome 扩展页面刷新扩展');
  }

  // 创建两个独立的配置，一个用于 JS，一个用于 CSS
  return [
    // JS 配置
    {
      mode: argv.mode || 'development',
      devtool: isDevelopment ? 'inline-source-map' : false,
      entry: {
        content: './src/content/content.js',
        background: './src/background/background.js',
        popup: './src/popup/popup.js'
      },
      output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js',
        clean: true,
        // 为 service worker 环境配置
        environment: {
          dynamicImport: false // 禁用动态导入，避免 document 相关错误
        }
      },
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: [
                  ['@babel/preset-env', {
                    modules: 'auto',
                    targets: {
                      chrome: "88"
                    }
                  }]
                ],
                plugins: ['@babel/plugin-transform-runtime']
              }
            }
          }
        ]
      },
      optimization: {
        minimize: !isDevelopment,
        minimizer: [
          '...',
          (compiler) => {
            const TerserPlugin = require('terser-webpack-plugin');
            new TerserPlugin({
              terserOptions: {
                keep_classnames: isDevelopment,
                keep_fnames: isDevelopment,
                compress: {
                  drop_console: !isDevelopment,
                  drop_debugger: !isDevelopment
                },
                sourceMap: isDevelopment
              }
            }).apply(compiler);
          }
        ],
        // 优化 splitChunks 配置，专门处理 Chrome 扩展
        splitChunks: {
          cacheGroups: {
            // 为 content script 创建独立的 vendor chunk
            contentVendor: {
              name: 'content-vendor',
              test: /[\\/]src[\\/]shared[\\/]/,
              chunks: (chunk) => chunk.name === 'content',
              enforce: true
            },
            // 为 popup 创建独立的 vendor chunk
            popupVendor: {
              name: 'popup-vendor',
              test: /[\\/]src[\\/]shared[\\/]/,
              chunks: (chunk) => chunk.name === 'popup',
              enforce: true
            }
          }
        }
      },
      plugins: [
        new CopyPlugin({
          patterns: [
            { from: 'manifest.json', to: 'manifest.json' },
            { from: 'src/popup/popup.html', to: 'popup/popup.html' },
            { from: 'src/content/assistant-panel.html', to: 'content/assistant-panel.html' },
            { from: 'assets/icons', to: 'assets/icons' }
          ]
        })
      ],
      resolve: {
        extensions: ['.js'],
        alias: {
          '@': path.resolve(__dirname, 'src'),
          '@lib': path.resolve(__dirname, 'src/lib'),
          '@utils': path.resolve(__dirname, 'src/utils'),
          '@ai': path.resolve(__dirname, 'src/ai'),
          '@shared': path.resolve(__dirname, 'src/shared'),
          '@background': path.resolve(__dirname, 'src/background'),
          '@content': path.resolve(__dirname, 'src/content'),
          '@popup': path.resolve(__dirname, 'src/popup')
        }
      },
      externals: {
        chrome: 'chrome'
      }
    },
    // CSS 配置
    {
      mode: argv.mode || 'development',
      entry: {
        assistantPanel: './src/content/assistant-panel.css',
        popupStyles: './src/popup/popup.css'
      },
      output: {
        path: path.resolve(__dirname, 'dist'),
        clean: false
      },
      module: {
        rules: [
          {
            test: /\.css$/,
            use: [
              MiniCssExtractPlugin.loader,
              {
                loader: 'css-loader',
                options: {
                  sourceMap: isDevelopment
                }
              },
              {
                loader: 'postcss-loader',
                options: {
                  postcssOptions: {
                    plugins: [
                      'autoprefixer',
                      'cssnano'
                    ]
                  }
                }
              }
            ]
          }
        ]
      },
      optimization: {
        minimizer: [
          '...',
          new CssMinimizerPlugin()
        ]
      },
      plugins: [
        new MiniCssExtractPlugin({
          filename: (pathData) => {
            const name = pathData.chunk.name;
            if (name === 'assistantPanel') {
              return 'content/assistant-panel.css';
            }
            if (name === 'popupStyles') {
              return 'popup/popup.css';
            }
            return '[name].css';
          }
        })
      ]
    }
  ];
};