如何使用 Webpack 将所有导入的依赖项捆绑在一个文件中？

Question

我有以下目录结构...

\n\n

root\n\xe2\x94\x82   package.json\n\xe2\x94\x82   webpack-client.config.js\n\xe2\x94\x82   webpack-server.config.js\n\xe2\x94\x82   yarn.lock\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80assets\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80js\n\xe2\x94\x82           index.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80dist\n\xe2\x94\x82   \xe2\x94\x82   header.html\n\xe2\x94\x82   \xe2\x94\x82   hotel-details.html\n\xe2\x94\x82   \xe2\x94\x82   hotel-list.html\n\xe2\x94\x82   \xe2\x94\x82   index.html\n\xe2\x94\x82   \xe2\x94\x82   server.js\n\xe2\x94\x82   \xe2\x94\x82   \n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80static\n\xe2\x94\x82       \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80j\n\xe2\x94\x82               index.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80node_modules\n\xe2\x94\x82   \xe2\x94\x94...\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80server\n\xe2\x94\x82       database.js\n\xe2\x94\x82       index.js\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80views\n        header.html\n        hotel-details.html\n        hotel-list.html\n        index.html\n

\n\n

我想使用 Webpack 来做两件事。

\n\n

\n

1. minify 和捆绑服务器端 JS - 导出捆绑包以dist/server.js用作server/index.js入口点。我已经使用webpack-server.config.js下面提供的实现了这一点。

\n

2. 缩小每个views/*.html文件并将其导出到dist/v/*.html. 如果html文件有<script>标签，我想从这些文件创建缩小的捆绑包并将它们导出到dist/static/j/[html_filename].js.

   \n\n
   \n
   • 我正为这个问题苦苦挣扎。我设法缩小.html文件并将其.js文件导出到dist/static/j/[html_filename].js. 但是，我无法使用html 中的文件，因为它使用类似or 的.js语法。我已经提供了 和 的内容。requireimportassets/js/index.jsdist/static/j/index.js
   \n
\n

\n\n

webpack-client.config.js

\n\n

var path = require("path");\nvar fs = require("fs");\n\nvar htmlFiles = {}; \nfs.readdirSync(path.join(__dirname, \'views\'))\n  .filter(f => (path.parse(f).ext.toLowerCase() === \'.html\'))\n  .forEach(f => {\n    var name = path.parse(f).name;\n    htmlFiles[name] = path.join(__dirname, \'views\', f);\n  });\n\nmodule.exports = {\n  module: {\n    rules: [\n      { \n        test: /\\.html$/, \n        use: [\n          { loader: \'file-loader\', options: { name: \'[name].[ext]\', emitFile: true }},\n          { loader: \'extract-loader\' },\n          { \n            loader: \'html-loader\',\n            options: { \n              minimize: true,\n              attrs: [\'script:src\']\n            }\n          },\n        ]\n      },\n      {\n        test: /\\.js$/,\n        use: [\n          { \n            loader: \'file-loader\', \n            options: { \n              name: \'static/j/[name].[ext]\',\n              publicPath: (p) => p.replace(\'static/\', \'\')\n            }\n          },\n          {\n            loader: \'babel-loader\',\n            options: {\n              presets: [\n                [\n                  "babel-preset-env", {\n                    "targets": {\n                      "chrome": 52\n                    }\n                  }\n                ]\n              ]\n            }\n          },\n        ]\n      }\n    ]\n  },\n  target: \'web\',\n  watch: true,\n  entry: htmlFiles,\n  output: {\n    path: path.join(__dirname, "dist"),\n    filename: \'[name].html.js\'\n  }\n};\n

\n\n

webpack-server.config.js

\n\n

var path = require("path");\nvar fs = require("fs");\nconst MinifyPlugin = require(\'babel-minify-webpack-plugin\');\n\nvar nodeLibs = {};\nfs.readdirSync(path.join(__dirname, \'node_modules\'))\n  .filter(x => x !== \'.bin\')\n  .forEach(mod => { nodeLibs[mod] = \'commonjs \' + mod; });\n\nmodule.exports = {\n  externals: nodeLibs,\n\n  module: {\n    rules: [\n      {\n        test: /\\.js$/,\n        use: {\n          loader: \'babel-loader\',\n          options: {\n            presets: [\'babel-preset-env\']\n          }\n        }\n      }\n    ] \n  },\n  plugins: [\n    new MinifyPlugin()\n  ],\n  context: __dirname,\n  entry: {\n    server: "./server/index.js"\n  },\n  target: "node",\n  output: {\n    path: path.join(__dirname, "dist"),\n    filename: "server.js"\n  }\n};\n

\n\n

assets/js/index.js

\n\n

import $ from \'../../node_modules/jquery\';\n\nlet scrollEnabled = true;\n\nwindow.setScrollEnabled = (scrollEnabled) => {\n  $(\'body\').css({backgroundColor: \'red\'});\n  console.log(\'isScrollEnabled:\', scrollEnabled);\n}\n

\n

Answer 1

您希望使用 JS 文件作为入口点，而不是 HTML。入口点的文档可能会有用。