Question

我的网站是一个HTML静态网站，其中包含多个JS文件。我想只使用Webpack来帮助我构建（合并，uglify，最小化）JS文件。然后我会在S3上托管我的index.html并通过cloudfront提供它，所以我不会有任何后端。

我有index.html，style.css和少量JavaScript文件。当我使用webpack构建时，所有.js文件都内置在bundle-script.js中。如果我在本地打开网站，index.html文件无法从bundle-script.js访问功能。我试过"webpack -p"，但没有成功。从我所看到的情况来看，似乎Webpack需要在后台运行一个nodejs服务器，这可能是为了支持热重载功能。

在package.json中，build设置为webpack。 "build": "webpack"

这是我的webpack.config.js

我有正确的方法吗？如何配置webpack来为我构建静态？

＆＃13;

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const StaticSiteGeneratorPlugin = require('static-site-generator-webpack-plugin');

const config = {
  target: 'web',
  entry: "./src/home.js",

  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle-script.js'
  },

  module: 
  {
    rules: [
    // CSS: scss, csss
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),
    new ExtractTextPlugin("style.css"),
    new webpack.DefinePlugin({
      'process.env': {
          'NODE_ENV': `"production"`
      }
    }),
    new StaticSiteGeneratorPlugin({
      crawl: true
    })
  ]

};

   module.exports = config;

＆＃13;

Webpack静态站点构建

0 个答案: