代码之家  ›  专栏  ›  技术社区  ›  Erik Gillespie

如何使用webpack3创建一个完全独立的区块

  •  2
  • Erik Gillespie  · 技术社区  · 7 年前

    entry: {
      'app': './src/main.js',
      'service-worker': './src/service-worker.js'
    },
    output: {
      path: config.build.assetsRoot,
      filename: chunkData => {
        return chunkData.chunk.name === 'service-worker'
          ? '[name].js'
          : utils.assetsPath('js/[name].[chunkhash].js')
      },
      chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
    },
    

    我还将服务工作者排除在HTML中:

    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      excludeChunks: ['service-worker'],
    }),
    

    也有几种用法 CommonsChunkPlugin 当我第一次创建项目时,Vue CLI工具会自动设置:

    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks (module) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
    
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      minChunks: Infinity
    }),
    
    // This instance extracts shared chunks from code splitted chunks and bundles them
    // in a separate chunk, similar to the vendor chunk
    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
    new webpack.optimize.CommonsChunkPlugin({
      name: 'app',
      async: 'vendor-async',
      children: true,
      minChunks: 3
    }),
    

    我遇到的问题是 service-worker.js 文件开头如下:

    webpackJsonp([17],{"2xmR":function(e,n,_){"use strict";
    var t,c,r,a,o,i;t="/path/to/src/service-worker.js",...
    

    webpackJsonp 当浏览器尝试运行服务辅助进程时,函数不可用。

    服务-工人.js 它有所有的依赖项(它们很少,我对重复的代码也没问题),没有任何Webpack实用程序。

    CommonChunkPlugin插件 想要那些网站的公共块,只是不为服务人员。

    我怎样才能开始构建我的一个入口点,它的所有依赖项都包含在文件中,而没有Webpack实用程序?

    1 回复  |  直到 7 年前
        1
  •  0
  •   Erik Gillespie    7 年前

    我偶然发现了一个 comment on a GitHub issue 这让我想到了这个解决方案。多谢埃里克·伍德( SO , GitHub )对于这个评论。

    我学到的是 CommonsChunkPlugin 接受 chunks 选项来限制哪些块用作公共块的源。通过提供排除我的 service-worker chunk,Webpack不会提取 服务人员 因此不会引入 webpackJsonp

    在其他一切相同的情况下,以下是解决我问题的新网页包插件配置:

    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      chunks: ['app'],
      minChunks (module) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
    
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      chunks: ['app'],
      minChunks: Infinity
    }),
    
    new webpack.optimize.CommonsChunkPlugin({
      name: 'app',
      async: 'vendor-async',
      children: true,
      minChunks: 3
    }),
    

    对双方 vendor manifest 普通块。最后一次使用 已经在使用 children 大块 不需要。

    这将导致 service-worker.js 文件没有 网页包装 而是这样开始的:

    !function(e){var t={};function n(r){ ...