账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    webpack根据文件夹决定使不使用插件打包?
    34
    0

    现在有一个项目,有PC端和移动端,我一起写在了一个项目包里,但是PC端的不需要pxtorem,移动端的需要pxtorem,我配置了半天,不会了。
    现在的module是这样的

    module: {
        strictExportPresence: true,
        rules: [
          // TODO: Disable require.ensure as it's not a standard language feature.
          // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
          // { parser: { requireEnsure: false } },
    
          // First, run the linter.
          // It's important to do this before Babel processes the JS.
          {
            test: /\.(js|jsx|mjs)$/,
            enforce: 'pre',
            use: [
              {
                options: {
                  formatter: eslintFormatter,
                  eslintPath: require.resolve('eslint'),
                  
                },
                loader: require.resolve('eslint-loader'),
              },
            ],
            include: paths.appSrc,
          },
          {
            // "oneOf" will traverse all following loaders until one will
            // match the requirements. When no loader matches it will fall
            // back to the "file" loader at the end of the loader list.
            oneOf: [
              // "url" loader works like "file" loader except that it embeds assets
              // smaller than specified limit in bytes as data URLs to avoid requests.
              // A missing `test` is equivalent to a match.
              {
                test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
                loader: require.resolve('url-loader'),
                options: {
                  limit: 10000,
                  name: 'static/media/[name].[hash:8].[ext]',
                },
              },
              // Process JS with Babel.
              {
                test: /\.(js|jsx|mjs)$/,
                include: paths.appSrc,
                loader: require.resolve('babel-loader'),
                options: {
                  
                  // This is a feature of `babel-loader` for webpack (not Babel itself).
                  // It enables caching results in ./node_modules/.cache/babel-loader/
                  // directory for faster rebuilds.
                  cacheDirectory: true,
                },
              },
              // "postcss" loader applies autoprefixer to our CSS.
              // "css" loader resolves paths in CSS and adds assets as dependencies.
              // "style" loader turns CSS into JS modules that inject <style> tags.
              // In production, we use a plugin to extract that CSS to a file, but
              // in development "style" loader enables hot editing of CSS.
              {
                exclude:path.resolve(__dirname, '../src/routes/PC/Mobile'),
                test: /\.(css|scss)$/,
                use: [
                  require.resolve('style-loader'),
                  {
                    loader: require.resolve('css-loader'),
                    options: {
                      importLoaders: 1,
                      sourceMap: true,
                      modules: true,
                      localIdentName:'[path][name]__[local]--[hash:base64:5]',
                    },
                  },
                  {
                    loader: require.resolve('postcss-loader'),
                    options: {
                      // Necessary for external CSS imports to work
                      // https://github.com/facebookincubator/create-react-app/issues/2677
                      ident: 'postcss',
                      plugins: () => [
                        require('postcss-flexbugs-fixes'),
                        // pxtorem({ rootValue: 75, propWhiteList: [], selectorBlackList: [/^html$/], minPixelValue: 2 }),
                        autoprefixer({
                          browsers: [
                            '>1%',
                            'last 4 versions',
                            'Firefox ESR',
                            'not ie < 9', // React doesn't support IE8 anyway
                          ],
                          flexbox: 'no-2009',
                        }),
                      ],
                    },
                  },
                  {
                    loader: "sass-loader" // 将 Sass 编译成 CSS
                  },
                ],
              },
              // "file" loader makes sure those assets get served by WebpackDevServer.
              // When you `import` an asset, you get its (virtual) filename.
              // In production, they would get copied to the `build` folder.
              // This loader doesn't use a "test" so it will catch all modules
              // that fall through the other loaders.
              {
                // Exclude `js` files to keep "css" loader working as it injects
                // its runtime that would otherwise processed through "file" loader.
                // Also exclude `html` and `json` extensions so they get processed
                // by webpacks internal loaders.
                exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
                loader: require.resolve('file-loader'),
                options: {
                  name: 'static/media/[name].[hash:8].[ext]',
                },
              },
            ],
          },
          {
            test: /\.(css|scss)$/,
            include:path.resolve(__dirname, '../src/routes/Mobile'),
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  sourceMap: true,
                  modules: true,
                  localIdentName:'[path][name]__[local]--[hash:base64:5]',
                },
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    pxtorem({ rootValue: 75, propWhiteList: [], selectorBlackList: [/^html$/], minPixelValue: 2 }),
                    autoprefixer({
                      browsers: [
                        '>1%',
                        'last 4 versions',
                        'Firefox ESR',
                        'not ie < 9', // React doesn't support IE8 anyway
                      ],
                      flexbox: 'no-2009',
                    }),
                  ],
                },
              },
              {
                loader: "sass-loader" // 将 Sass 编译成 CSS
              },
            ],
          }
          // ** STOP ** Are you adding a new loader?
          // Make sure to add the new loader(s) before the "file" loader.
        ],
      },

    我想的是使用include 和 exclude 来分别打包两个文件夹下的内容
    主要是下面的这段

    {
            test: /\.(css|scss)$/,
            include:path.resolve(__dirname, '../src/routes/Mobile'),
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  sourceMap: true,
                  modules: true,
                  localIdentName:'[path][name]__[local]--[hash:base64:5]',
                },
              },
              {
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    autoprefixer({
                      browsers: [
                        '>1%',
                        'last 4 versions',
                        'Firefox ESR',
                        'not ie < 9', // React doesn't support IE8 anyway
                      ],
                      flexbox: 'no-2009',
                    }),
                  ],
                },
              },
              {
                loader: "sass-loader" // 将 Sass 编译成 CSS
              },
            ],
          }

    本来以为是oneOf的问题,所以在rule底下单独又加了一个test,但是也没用。

    现在这样的情况是

    要么exclude生效,exclude路径下的所有css都不打包。
    include就是不生效。

    要么全部都用了pxtorem打包了。

    完整的配置图这个是没有分开打包的时候初始的,是react-cli配置的一个。

    'use strict';
    
    const autoprefixer = require('autoprefixer');
    const path = require('path');
    const webpack = require('webpack');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
    const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
    const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
    const eslintFormatter = require('react-dev-utils/eslintFormatter');
    const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
    const getClientEnvironment = require('./env');
    const paths = require('./paths');
    const pxtorem = require('postcss-pxtorem') // px转rem
    
    // Webpack uses `publicPath` to determine where the app is being served from.
    // In development, we always serve from the root. This makes config easier.
    const publicPath = '/';
    // `publicUrl` is just like `publicPath`, but we will provide it to our app
    // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
    // Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
    const publicUrl = '';
    // Get environment variables to inject into our app.
    const env = getClientEnvironment(publicUrl);
    
    // This is the development configuration.
    // It is focused on developer experience and fast rebuilds.
    // The production configuration is different and lives in a separate file.
    module.exports = {
      // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
      // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
      devtool: 'cheap-module-source-map',
      // These are the "entry points" to our application.
      // This means they will be the "root" imports that are included in JS bundle.
      // The first two entry points enable "hot" CSS and auto-refreshes for JS.
      entry: [
        // We ship a few polyfills by default:
        require.resolve('./polyfills'),
        // Include an alternative client for WebpackDevServer. A client's job is to
        // connect to WebpackDevServer by a socket and get notified about changes.
        // When you save a file, the client will either apply hot updates (in case
        // of CSS changes), or refresh the page (in case of JS changes). When you
        // make a syntax error, this client will display a syntax error overlay.
        // Note: instead of the default WebpackDevServer client, we use a custom one
        // to bring better experience for Create React App users. You can replace
        // the line below with these two lines if you prefer the stock client:
        // require.resolve('webpack-dev-server/client') + '?/',
        // require.resolve('webpack/hot/dev-server'),
        require.resolve('react-dev-utils/webpackHotDevClient'),
        // Finally, this is your app's code:
        paths.appIndexJs,
        // We include the app code last so that if there is a runtime error during
        // initialization, it doesn't blow up the WebpackDevServer client, and
        // changing JS code would still trigger a refresh.
      ],
      output: {
        // Add /* filename */ comments to generated require()s in the output.
        pathinfo: true,
        // This does not produce a real file. It's just the virtual path that is
        // served by WebpackDevServer in development. This is the JS bundle
        // containing code from all our entry points, and the Webpack runtime.
        filename: 'static/js/bundle.js',
        // There are also additional JS chunk files if you use code splitting.
        chunkFilename: 'static/js/[name].chunk.js',
        // This is the URL that app is served from. We use "/" in development.
        publicPath: publicPath,
        // Point sourcemap entries to original disk location (format as URL on Windows)
        devtoolModuleFilenameTemplate: info =>
          path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
      },
      resolve: {
        // This allows you to set a fallback for where Webpack should look for modules.
        // We placed these paths second because we want `node_modules` to "win"
        // if there are any conflicts. This matches Node resolution mechanism.
        // https://github.com/facebookincubator/create-react-app/issues/253
        modules: ['node_modules', paths.appNodeModules].concat(
          // It is guaranteed to exist because we tweak it in `env.js`
          process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
        ),
        // These are the reasonable defaults supported by the Node ecosystem.
        // We also include JSX as a common component filename extension to support
        // some tools, although we do not recommend using it, see:
        // https://github.com/facebookincubator/create-react-app/issues/290
        // `web` extension prefixes have been added for better support
        // for React Native Web.
        extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
        alias: {
          
          // Support React Native Web
          // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
          'react-native': 'react-native-web',
          'common': path.resolve(__dirname, '../src/common'),
          'components':path.resolve(__dirname, '../src/components'),
          'routes':path.resolve(__dirname, '../src/routes'),
          'assest':path.resolve(__dirname, '../src/assest'),
        },
        plugins: [
          // Prevents users from importing files from outside of src/ (or node_modules/).
          // This often causes confusion because we only process files within src/ with babel.
          // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
          // please link the files into your node_modules/ and let module-resolution kick in.
          // Make sure your source files are compiled, as they will not be processed in any way.
          new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
        ],
      },
      module: {
        strictExportPresence: true,
        rules: [
          // TODO: Disable require.ensure as it's not a standard language feature.
          // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
          // { parser: { requireEnsure: false } },
    
          // First, run the linter.
          // It's important to do this before Babel processes the JS.
          {
            test: /\.(js|jsx|mjs)$/,
            enforce: 'pre',
            use: [
              {
                options: {
                  formatter: eslintFormatter,
                  eslintPath: require.resolve('eslint'),
                  
                },
                loader: require.resolve('eslint-loader'),
              },
            ],
            include: paths.appSrc,
          },
          {
            // "oneOf" will traverse all following loaders until one will
            // match the requirements. When no loader matches it will fall
            // back to the "file" loader at the end of the loader list.
            oneOf: [
              // "url" loader works like "file" loader except that it embeds assets
              // smaller than specified limit in bytes as data URLs to avoid requests.
              // A missing `test` is equivalent to a match.
              {
                test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
                loader: require.resolve('url-loader'),
                options: {
                  limit: 10000,
                  name: 'static/media/[name].[hash:8].[ext]',
                },
              },
              // Process JS with Babel.
              {
                test: /\.(js|jsx|mjs)$/,
                include: paths.appSrc,
                loader: require.resolve('babel-loader'),
                options: {
                  
                  // This is a feature of `babel-loader` for webpack (not Babel itself).
                  // It enables caching results in ./node_modules/.cache/babel-loader/
                  // directory for faster rebuilds.
                  cacheDirectory: true,
                },
              },
              // "postcss" loader applies autoprefixer to our CSS.
              // "css" loader resolves paths in CSS and adds assets as dependencies.
              // "style" loader turns CSS into JS modules that inject <style> tags.
              // In production, we use a plugin to extract that CSS to a file, but
              // in development "style" loader enables hot editing of CSS.
              {
                test: /\.(css|scss)$/,
                use: [
                  require.resolve('style-loader'),
                  {
                    loader: require.resolve('css-loader'),
                    options: {
                      importLoaders: 1,
                      sourceMap: true,
                      modules: true,
                      localIdentName:'[path][name]__[local]--[hash:base64:5]',
                    },
                  },
                  {
                    loader: require.resolve('postcss-loader'),
                    options: {
                      // Necessary for external CSS imports to work
                      // https://github.com/facebookincubator/create-react-app/issues/2677
                      ident: 'postcss',
                      plugins: () => [
                        require('postcss-flexbugs-fixes'),
                        pxtorem({ rootValue: 75, propWhiteList: [], selectorBlackList: [/^html$/], minPixelValue: 2 }),
                        autoprefixer({
                          browsers: [
                            '>1%',
                            'last 4 versions',
                            'Firefox ESR',
                            'not ie < 9', // React doesn't support IE8 anyway
                          ],
                          flexbox: 'no-2009',
                        }),
                      ],
                    },
                  },
                  {
                    loader: "sass-loader" // 将 Sass 编译成 CSS
                  },
                ],
              },
              // "file" loader makes sure those assets get served by WebpackDevServer.
              // When you `import` an asset, you get its (virtual) filename.
              // In production, they would get copied to the `build` folder.
              // This loader doesn't use a "test" so it will catch all modules
              // that fall through the other loaders.
              {
                // Exclude `js` files to keep "css" loader working as it injects
                // its runtime that would otherwise processed through "file" loader.
                // Also exclude `html` and `json` extensions so they get processed
                // by webpacks internal loaders.
                exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
                loader: require.resolve('file-loader'),
                options: {
                  name: 'static/media/[name].[hash:8].[ext]',
                },
              },
            ],
          },
          // ** STOP ** Are you adding a new loader?
          // Make sure to add the new loader(s) before the "file" loader.
        ],
      },
      plugins: [
        // Makes some environment variables available in index.html.
        // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
        // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
        // In development, this will be an empty string.
        new InterpolateHtmlPlugin(env.raw),
        // Generates an `index.html` file with the <script> injected.
        new HtmlWebpackPlugin({
          inject: true,
          template: paths.appHtml,
        }),
        // Add module names to factory functions so they appear in browser profiler.
        new webpack.NamedModulesPlugin(),
        // Makes some environment variables available to the JS code, for example:
        // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
        new webpack.DefinePlugin(env.stringified),
        // This is necessary to emit hot updates (currently CSS only):
        new webpack.HotModuleReplacementPlugin(),
        // Watcher doesn't work well if you mistype casing in a path so we use
        // a plugin that prints an error when you attempt to do this.
        // See https://github.com/facebookincubator/create-react-app/issues/240
        new CaseSensitivePathsPlugin(),
        // If you require a missing module and then `npm install` it, you still have
        // to restart the development server for Webpack to discover it. This plugin
        // makes the discovery automatic so you don't have to restart.
        // See https://github.com/facebookincubator/create-react-app/issues/186
        new WatchMissingNodeModulesPlugin(paths.appNodeModules),
        // Moment.js is an extremely popular library that bundles large locale files
        // by default due to how Webpack interprets its code. This is a practical
        // solution that requires the user to opt into importing specific locales.
        // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
        // You can remove this if you don't use Moment.js:
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      ],
      // Some libraries import Node modules but don't use them in the browser.
      // Tell Webpack to provide empty mocks for them so importing them works.
      node: {
        dgram: 'empty',
        fs: 'empty',
        net: 'empty',
        tls: 'empty',
        child_process: 'empty',
      },
      // Turn off performance hints during development because we don't do any
      // splitting or minification in interest of speed. These warnings become
      // cumbersome.
      performance: {
        hints: false,
      },
    };
    

    这是之前老版本的时候用的其他人的脚手架的配置,当时要引入一个富文本编辑器,要引入他的一个css,但是我用了css_modules加密了,导致富文本样式不生效。于是就有了这个分开打包的webpack配置

    const path = require('path')
    const webpack = require('webpack')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const ExtractTextPlugin = require('extract-text-webpack-plugin')
    const project = require('../project.config')
    
    const inProject = path.resolve.bind(path, project.basePath)
    const inProjectSrc = (file) => inProject(project.srcDir, file)
    
    const __DEV__ = project.env === 'development'
    const __TEST__ = project.env === 'test'
    const __PROD__ = project.env === 'production'
    
    const config = {
      entry: {
        normalize: [
          inProjectSrc('normalize'),
        ],
        main: [
          inProjectSrc(project.main),
        ],
      },
      devtool: project.sourcemaps ? 'source-map' : false,
      output: {
        path: inProject(project.outDir),
        filename: __DEV__ ? 'public/js/[name].js' : 'public/js/[name].[chunkhash].js',
        publicPath: project.publicPath,  //默认替换公共目录
      },
      resolve: {
        mainFiles: ['index.web', 'index'],
        modules: [
          inProject(project.srcDir),
          'node_modules',
        ],
        extensions: ['*', '.web.tsx', '.web.ts', '.web.jsx', '.web.js', '.ts', '.tsx', '.js', '.jsx', '.json'],
        mainFields: [
          'browser',
          'jsnext:main',
          'main',
        ],
      },
      externals: project.externals,
      module: {
        rules: [],
      },
      plugins: [
        new webpack.DefinePlugin(Object.assign({
          'process.env': {
            NODE_ENV: JSON.stringify(project.env)
          },
          __DEV__,
          __TEST__,
          __PROD__,
        }, project.globals))
      ],
    }
    
    // JavaScript
    // ------------------------------------
    config.module.rules.push({
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: [{
        loader: 'babel-loader',
        query: {
          cacheDirectory: true,
          plugins: [
            'babel-plugin-transform-class-properties',
            'babel-plugin-syntax-dynamic-import',
            ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }],
            [
              'babel-plugin-transform-runtime',
              {
                helpers: true,
                polyfill: false, // we polyfill needed features in src/normalize.js
                regenerator: true,
              },
            ],
            [
              'babel-plugin-transform-object-rest-spread',
              {
                useBuiltIns: true // we polyfill Object.assign in src/normalize.js
              },
            ],
          ],
          presets: [
            'babel-preset-react',
            ['babel-preset-env', {
              targets: {
                ie9: true,
                uglify: true,
                modules: false,
              },
            }],
          ]
        },
      }],
    })
    
    // Styles
    // ------------------------------------
    const extractStyles = new ExtractTextPlugin({
      filename: 'public/css/[name].[contenthash].css',
      allChunks: true,
      disable: __DEV__,
    })
    
    config.module.rules.push({
      test: /\.(sass|scss|css)$/,
      exclude: /node_modules/,
      // exclude: path.resolve(__dirname, 'node_modules/quill'),
      loader: extractStyles.extract({
        fallback: 'style-loader',
        use: [
          {
            loader: 'css-loader',
            options: {
              sourceMap: project.sourcemaps,
              // exclude: [
              //   path.resolve(__dirname, "/node_modules/react-quill")
              // ],
              modules: true,
              localIdentName:'[path][name]__[local]--[hash:base64:5]',
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: project.sourcemaps,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: project.sourcemaps,
              includePaths: [
                inProjectSrc('styles'),
              ],
            },
          },
    
        ],
      })
    })
    config.module.rules.push({
      test: /\.(sass|scss|css)$/,
      include: /node_modules/,
      // exclude: path.resolve(__dirname, 'node_modules/quill'),
      loader: extractStyles.extract({
        fallback: 'style-loader',
        use: [
          {
            loader: 'css-loader',
            options: {
              sourceMap: project.sourcemaps,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: project.sourcemaps,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: project.sourcemaps,
              includePaths: [
                inProjectSrc('styles'),
              ],
            },
          },
    
        ],
      })
    })
    
    config.plugins.push(extractStyles)
    
    // LESS
    // ------------------------------------
    config.module.rules.push({
      test: /\.less$/,
      use: [{
        loader: 'style-loader'
      }, {
        loader: 'css-loader'
      }, {
        loader: 'less-loader',
        options: {
          javascriptEnabled: true
        }
      }]
    })
    
    // Images
    // ------------------------------------
    config.module.rules.push({
      test: /\.(png|jpg|gif)$/,
      loader: 'url-loader',
      options: {
        limit: 8192,
        name: 'images/[name]-[hash].[ext]',
      },
    })
    
    // Fonts
    // ------------------------------------
    ;[
      ['woff', 'application/font-woff'],
      ['woff2', 'application/font-woff2'],
      ['otf', 'font/opentype'],
      ['ttf', 'application/octet-stream'],
      ['eot', 'application/vnd.ms-fontobject'],
    ].forEach((font) => {
      const extension = font[0]
      const mimetype = font[1]
      config.module.rules.push({
        test: new RegExp(`\\.${extension}$`),
        loader: 'url-loader',
        options: {
          name: 'fonts/[name].[ext]',
          limit: 10000,
          mimetype,
        },
      })
    })
    
    // SVG
    // ------------------------------------
    config.module.rules.push({
      test: /\.svg$/,
      // loader: 'svg-sprite-loader',
     
      //使用多个loader加载
      // use: ['file-loader'],
     
      //单独使用file-loader加载
      loader:'file-loader',
      options: {
        limit: 8192,
        name: 'images/[name]-[hash].[ext]',
      },
    })
    
    // HTML Template
    // ------------------------------------
    config.plugins.push(new HtmlWebpackPlugin({
      template: inProjectSrc('index.html'),
      inject: true,
      minify: {
        collapseWhitespace: true,
      },
    }))
    
    // Development Tools
    // ------------------------------------
    if (__DEV__) {
      config.entry.main.push(
        `webpack-hot-middleware/client.js?path=${config.output.publicPath}__webpack_hmr`
      )
      config.plugins.push(
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin()
      )
    }
    
    // Bundle Splitting
    // ------------------------------------
    if (!__TEST__) {
      const bundles = ['normalize', 'manifest']
    
      if (project.vendors && project.vendors.length) {
        bundles.unshift('vendor')
        config.entry.vendor = project.vendors
      }
      config.plugins.push(new webpack.optimize.CommonsChunkPlugin({
        names: bundles
      }))
    }
    
    // Production Optimizations
    // ------------------------------------
    if (__PROD__) {
      config.plugins.push(
        new webpack.LoaderOptionsPlugin({
          minimize: true,
          debug: false,
        }),
        new webpack.optimize.UglifyJsPlugin({
          sourceMap: !!config.devtool,
          comments: false,
          compress: {
            warnings: false,
            screw_ie8: true,
            conditionals: true,
            unused: true,
            comparisons: true,
            sequences: true,
            dead_code: true,
            evaluate: true,
            if_return: true,
            join_vars: true,
          },
        })
      )
    }
    
    module.exports = config
    
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 遥看远山 普通会员 1楼

      是的,Webpack可以根据文件夹来决定是否使用插件打包。webpack是一个工具,用于构建和打包JavaScript应用程序。在webpack配置文件(webpack.config.js)中,你可以配置Webpack使用哪些插件,并根据需要使用哪些插件。

      例如,如果你不想使用某个插件,你可以将这个插件的use选项设置为false,如下所示:

      javascript module.exports = { // ... plugins: [ // ... { use: false, name: 'My Custom Plugin', }, ], };

      这样,Webpack就不会使用My Custom Plugin插件,而会继续使用其他插件。

      另外,你也可以使用loaders选项来指定哪些文件需要使用插件,而不是依赖于插件的use选项。例如,如果你只想使用某个插件,你可以将这个插件的loader选项设置为null,如下所示:

      javascript module.exports = { // ... plugins: [ // ... null, ], };

      这样,Webpack只会使用那个插件,而不是其他插件。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部