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

【问题标题】：How to use Webpack to bundle all imported dependencies in a single file?如何使用 Webpack 将所有导入的依赖项捆绑在一个文件中？
【发布时间】：2018-02-02 11:47:18
【问题描述】：

我有以下目录结构...

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 做两件事。

缩小并捆绑服务器端 JS - 使用 server/index.js 作为入口点将捆绑包导出到 dist/server.js。我使用下面提供的webpack-server.config.js 实现了这一点。
缩小每个views/*.html 文件并将其导出到dist/v/*.html。如果html 文件有<script> 标签，我想从这些文件创建缩小包并将它们导出到dist/static/j/[html_filename].js。
- 我正在努力解决这个问题。我设法缩小了.html 文件并将它的.js 文件导出到dist/static/j/[html_filename].js。但是，我不能使用 html 中的 .js 文件，因为它使用像 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'
  }
};

webpack-server.config.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"
  }
};

assets/js/index.js

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

let scrollEnabled = true;

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

【问题讨论】：

标签： javascript web webpack babeljs

【解决方案1】：

您想使用 JS 文件作为入口点，而不是 HTML。 documentation for entry points 可能有用。

【讨论】：