Question

我有一个简单的HTML页面，它正在请求：一个CSS文件和一个Javascript文件：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Hello Stack overflow</title>

    <link href="./dist/app.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <h1>hello</h1>
        <button class="btn btn-primary" id="button">click me</button>
    </div>


    <script src="./dist/app.js"></script>
</body>

</html>

然后我有一个webpack.config文件：

const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const ManifestPlugin = require('webpack-manifest-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin')
const dev = process.env.NODE_ENV === "dev";

const cssLoaders = [{
  loader: 'css-loader',
  options: {
    importLoaders: 1,
    minimize: !dev
  }
}];

if (!dev) {
  cssLoaders.push({
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: (loader) => [
        require('autoprefixer')({
          browsers: ['last 2 versions', 'ie > 8']
        }),
      ]
    }
  })
}

const config = {
  watch: dev,
  entry: {
    app: ['./build/assets/css/index.scss', './build/assets/js/index.js']
  },
  output: {
    filename: dev ? '[name].js' : '[name].[chunkhash:8].js',
    path: path.resolve('./dist'),
    publicPath: './dist/'
  },
  devtool: dev ? "cheap-module-eval-source-map" : false,
  module: {
    rules: [{
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
        }
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: cssLoaders
        })
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: [...cssLoaders, 'sass-loader']
        })
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 8192
          }
        }]
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({
      filename: dev ? '[name].css' : '[name].[contenthash:8].css',
      disable: dev
    })
  ]
};

// the path(s) that should be cleaned
let pathsToClean = [
  'dist',
];

// the clean options to use
let cleanOptions = {
  root: path.resolve('./'),
  verbose: true,
  dry: false
}


if (!dev) {
  config.plugins.push(new UglifyJSPlugin({
    sourceMap: false,
  }));
  config.plugins.push(new ManifestPlugin());
  config.plugins.push(new CleanWebpackPlugin(pathsToClean, cleanOptions));
}
module.exports = config;

表示：如果我处于生产模式，则js和css文件被uglified +（对于缓存），其名称将更改为[nameofthefile]。[hash]。[extension]。然后它创建一个manifest.json文件，帮助DOM了解要获取哪个文件，因为如果文件被修改，哈希总是会改变：

{
   "app.css": "app.675208ce.css",
   "app.js": "app.766e2a62.js",
   "motos.jpg": "d3904a4f8a0794aafaf6bdc166a48371.jpg"
}

我不明白为什么，即使文件看起来正确，我收到错误404，我的网页也无法加载css或js文件..

提前感谢您的帮助

Webpack生成未包含在html中的散列文件

0 个答案: