Javascript 不使用Webpack 4加载的更少_Javascript_Webpack

Javascript 不使用Webpack 4加载的更少

javascript webpack

Javascript 不使用Webpack 4加载的更少,javascript,webpack,Javascript,Webpack,我使用的是Gulp，但现在试图通过WebpackV4运行我的网站。请容忍我，我对webpack是新手 TopNav.js-反应组件 import React, { Component } from 'react'; import { Link } from 'react-router-dom'; export default class TopNav extends Component{ render(){ return ( <na

我使用的是Gulp，但现在试图通过WebpackV4运行我的网站。请容忍我，我对webpack是新手

TopNav.js-反应组件

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

    export default class TopNav extends Component{
      render(){
        return (
          <nav className="ink-navigation bottom-border-grey-veryLight">
            <div className="column-group">
              <div className="all-45">
                <ul className="ft-topnav menu horizontal">
                  <li>
                    <Link className="margin-top-10" ref="link" to={"/"}>
                      <span className="underline-grey large underlined">
                        <span className="font-black">H</span><span className="grey-dark">ome</span>
...

因此，它将为master.less输出一个.css文件

现在我正在使用一个webpack.config.js文件：

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/client/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
          },
        ],
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader', // translates CSS into CommonJS
          },
          {
            loader: 'less-loader', // compiles Less to CSS
          },
        ],
      },
      {
        test: /\.css$/i,
        use: [
          { loader: 'style-loader', options: { injectType: 'linkTag' } },
          'css-loader',
        ],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['url-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/client/index.html',
      filename: './index.html',
      hash: true,
    }),
  ],
};

在index.html中，它试图像往常一样使用master.css：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>My App</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="https://ink.global.ssl.fastly.net/3.1.10/css/ink.min.css">
        <script src="https://ink.global.ssl.fastly.net/3.1.10/js/ink-all.min.js"></script>
        <script src="https://ink.global.ssl.fastly.net/3.1.10/js/autoload.js"></script>
        <!--[if lt IE 9 ]>
        <link rel="stylesheet" href="ink-ie.min.css" type="text/css">
        <![endif]-->
        <link rel="stylesheet" type="text/css" href="/lib/css/master.css" />
    </head>
    <body>
        <div id="app"></div>
        <script src="/scripts/app.bundle.js"></script>
    </body>
</html>


我的应用程序

不知道我错过了什么

错误屏幕截图

得到错误：

[！[enter image description here][1][1]

为了让

更少的加载程序

工作，它应该在依赖关系树中，该树以您的

条目开始：'./src/client/index.js'，

js文件，因为您没有导入它，所以它不会出现在依赖关系图中

如果您有一个

更少的文件，请在输入文件中添加一个导入。
如果每个组件的文件较少，请在组件js文件中添加导入
//TopNav.js
从“React”导入React，{Component}；
从'react router dom'导入{Link}；
导入“TopNav.less”//
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>My App</title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="https://ink.global.ssl.fastly.net/3.1.10/css/ink.min.css">
        <script src="https://ink.global.ssl.fastly.net/3.1.10/js/ink-all.min.js"></script>
        <script src="https://ink.global.ssl.fastly.net/3.1.10/js/autoload.js"></script>
        <!--[if lt IE 9 ]>
        <link rel="stylesheet" href="ink-ie.min.css" type="text/css">
        <![endif]-->
        <link rel="stylesheet" type="text/css" href="/lib/css/master.css" />
    </head>
    <body>
        <div id="app"></div>
        <script src="/scripts/app.bundle.js"></script>
    </body>
</html>