javascript-如何在HtmlWebpackPlugin中使用Webpack中的多个条目以及多个HTML文件？

2019-10-14 00:37:05 阅读：264 来源： 互联网

标签：html-webpack-plugin javascript webpack

我们希望从Webpack获得两个输出-整个应用程序具有所有依赖项,而另一个页面只有一个依赖项(主应用程序不共享).

似乎做到这一点的方法是利用Webpack配置的entry属性.但是,这还不够,因为我们还使用HtmlWebpackPlugin来输出带有Webpack编译动态添加的build.js(以及编译的LESS等)的HTML文件.根据HtmlWebpackPlugin docs：

If you have multiple Webpack entry points, they will all be included
with script tags in the generated HTML.

这对我们不起作用,因此我需要利用他们的filterChunks选项.这个GitHub issue response最简洁地说：

module.exports = {
  entry: {
    'page1': './apps/page1/scripts/main.js',
    'page2': './apps/page2/src/main.js'
  },
  output: {
    path: __dirname,
    filename: "apps/[name]/build/bundle.js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: false,
      chunks: ['page1'],
      filename: 'apps/page1/build/index.html'
    }),
    new HtmlWebpackPlugin({
      inject: false,
      chunks: ['page2'],
      filename: 'apps/page2/build/index.html'
    })
  ]
};

(在HtmlWebpackPlugin文档中,这在“过滤块”部分下)

因此,我这样修改了代码：

module.exports = {
    entry: {
        app: './public/js/ide.js',
        resetPassword: './public/js/reset_password.js'
    },
    output: {
        path: path.resolve(__dirname, '../build'),
        filename: '[name].js',
        publicPath: '/'
    },
    ...
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'public/html/ide.html',
            inject: true,
            chunks: ['app']
        }),
        new HtmlWebpackPlugin({
            filename: 'reset_password.html',
            template: 'public/html/reset_password.html',
            inject: true,
            chunks: ['resetPassword']
        }),
    ],
}

现在,当我重建项目(现在仅尝试使用WebpackDevServer)并导航到/index.html时,我可以在网络选项卡中看到大量的捆绑文件,即index.html的内容(基于ide.html模板) ,以及对各种外部资源的要求.但是,不会运行任何实际的JavaScript(例如,ide.js中的console.log).显示文件中的所有HTML.

对于reset_password.html,将显示所有HTML,并且将显示reset_password.js文件,但运行中没有Java脚本.

如何确保输入文件中的JavaScript运行？

编辑：我已经使ide.js工作,因为我还没有意识到以下内容是“块”：

optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendor',
                    chunks: 'all'
                }
            }
        }
    },

因此,我将供应商添加到index.html HtmlWebpackPlugin块属性.现在,它看起来像这样：

new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'public/html/ide.html',
    inject: true,
    chunks: ['app', 'vendor']
}),

reset_password在node_modules文件夹中不需要任何内容,这也不能解释为什么ide.js内根本不运行JavaScript,所以我仍然很困惑.另外,reset_password仍然不起作用.

EDIT2：加载reset_password.html时,通过看似明显附加的reset_password.js文件,可以看到此行

eval("\n\nconsole.log('DRAGONHELLO');//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9wdWJsaWMvanMvcmVzZXRfcGFzc3dvcmQuanM/ZjY5ZSJdLCJuYW1lcyI6WyJjb25zb2xlIiwibG9nIl0sIm1hcHBpbmdzIjoiOztBQUNBQSxRQUFRQyxHQUFSLENBQVksYUFBWiIsImZpbGUiOiIuL3B1YmxpYy9qcy9yZXNldF9wYXNzd29yZC5qcy5qcyIsInNvdXJjZXNDb250ZW50IjpbIlxuY29uc29sZS5sb2coJ0RSQUdPTkhFTExPJylcbiJdLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./public/js/reset_password.js\n");

因此,很明显,我的console.log(‘DRAGONHELLO’)是“看到的”,但是我不知道为什么它没有运行.

EDIT3：将供应商添加到reset_password.html的块中会导致JavaScript运行,但是我不知道为什么,这是不理想的,因为练习的重点是有两个不同的捆绑包,一个捆绑包非常小,并且没有不需要我们所有的node_modules.

EDIT4：我使用profile：true运行了Webpack,可以看到我没有弄错“块名称”：

                 js/app.3d18b43294ebd54ed083.js   1.34 MiB       0  [emitted]  [big]  app
       js/resetPassword.198485be2b163cc258ed.js   1.02 KiB       1  [emitted]         resetPassword
                   js/2.e7f92193ea3c611a0b36.js   2.23 MiB       2  [emitted]  [big]  vendor
             js/app.3d18b43294ebd54ed083.js.map   2.71 MiB       0  [emitted]         app
   js/resetPassword.198485be2b163cc258ed.js.map   4.57 KiB       1  [emitted]         resetPassword
               js/2.e7f92193ea3c611a0b36.js.map   7.12 MiB       2  [emitted]         vendor

EDIT5：我都尝试过

module.exports = {
  //...
  optimization: {
    runtimeChunk: {
      name: entrypoint => `runtime~${entrypoint.name}`
    }
  }
};

和

module.exports = {
  //...
  optimization: {
    runtimeChunk: true
  }
};

基于PlayMa256的注释和webpack docs on runtimeChunk.两者均未导致JavaScript执行.

解决方法:

设置时：

module.exports = {
  //...
  optimization: {
    runtimeChunk: true
  }
};

它生成一个运行时块.什么是运行时？运行时是webpack用来加载其他文件的所有代码所在的位置.这是运行构建时webpack的核心.

由于您有2个单独的捆绑包文件：resetPassword和app.

好的,您已拥有所需的所有文件.您可能同时也需要供应商,因为您的供应商包含了node_modules中的所有内容.因此,基本上您将拥有：

html 1：应用,供应商,runtimeChunk.

html 2：reset_password,供应商,runtimeChunk.

这样,您的应用程序应运行.

标签：html-webpack-plugin,javascript,webpack
来源： https://codeday.me/bug/20191014/1911587.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-如何在HtmlWebpackPlugin中使用Webpack中的多个条目以及多个HTML文件？