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

我有以下目录结构。。。

root
│   package.json
│   webpack-client.config.js
│   webpack-server.config.js
│   yarn.lock
├───assets
│   └───js
│           index.js
├───dist
│   │   header.html
│   │   hotel-details.html
│   │   hotel-list.html
│   │   index.html
│   │   server.js
│   │   
│   └───static
│       └───j
│               index.js
├───node_modules
│   └...
├───server
│       database.js
│       index.js
└───views
        header.html
        hotel-details.html
        hotel-list.html
        index.html

我想用Webpack做两件事。

1. 缩小并捆绑服务器端JS-将捆绑导出到 dist/server.js 使用 server/index.js 作为入口点。我使用 webpack-server.config.js 如下所示。

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

   • 我正在努力解决这个问题。我设法缩小了 .html 文件并导出 .js 文件到 dist/static/j/[html\u文件名]。js公司 . 但是,我不能使用 .js公司 html中的文件,因为它使用如下语法 require 或 import . 我已经提供了两者的内容 assets/js/index.js 和 dist/static/j/index.js .

webpack-client.config.js

var path = require("path");
var fs = require("fs");

var htmlFiles = {}; 
fs.readdirSync(path.join(__dirname, 'views'))
  .filter(f => (path.parse(f).ext.toLowerCase() === '.html'))
  .forEach(f => {
    var name = path.parse(f).name;
    htmlFiles[name] = path.join(__dirname, 'views', f);
  });

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

Web包服务器。配置。js公司

var path = require("path");
var fs = require("fs");
const MinifyPlugin = require('babel-minify-webpack-plugin');

var nodeLibs = {};
fs.readdirSync(path.join(__dirname, 'node_modules'))
  .filter(x => x !== '.bin')
  .forEach(mod => { nodeLibs[mod] = 'commonjs ' + mod; });

module.exports = {
  externals: nodeLibs,

  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['babel-preset-env']
          }
        }
      }
    ] 
  },
  plugins: [
    new MinifyPlugin()
  ],
  context: __dirname,
  entry: {
    server: "./server/index.js"
  },
  target: "node",
  output: {
    path: path.join(__dirname, "dist"),
    filename: "server.js"
  }
};

资产/js/索引。js公司

import $ from '../../node_modules/jquery';

let scrollEnabled = true;

window.setScrollEnabled = (scrollEnabled) => {
  $('body').css({backgroundColor: 'red'});
  console.log('isScrollEnabled:', scrollEnabled);
}