Javascript 对于简单示例，webpack样式加载器和css加载器不起作用_Javascript_Webpack_Webpack Style Loader_Css Loader

Javascript 对于简单示例，webpack样式加载器和css加载器不起作用

javascript webpack

Javascript 对于简单示例，webpack样式加载器和css加载器不起作用,javascript,webpack,webpack-style-loader,css-loader,Javascript,Webpack,Webpack Style Loader,Css Loader,我试图遵循这里的教程，但是我永远无法加载css文件。（文本从不为红色） webpack.config.js const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, mo

我试图遵循这里的教程，但是我永远无法加载css文件。（文本从不为红色）

webpack.config.js

const path = require('path');
    module.exports = {
      entry: './src/index.js',
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
      },
       module: {
         rules: [
           {
             test: /\.css$/,
             use: [
               'style-loader',
               'css-loader'
             ]
           }
         ]
       }
    };

package.json

{
  "name": "webpack1",
  "version": "1.0.0",
  "description": "webpack tutorial",
  "private": true,
  "scripts": {
    "dev": "lite-server",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^1.0.0",
    "style-loader": "^0.22.1",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0"
  },
  "dependencies": {
    "lite-server": "^2.4.0",
    "lodash": "^4.17.10"
  }
}

index.js

    import _ from 'lodash';

    function component() {
        let element = document.createElement('div');

        // Lodash, currently included via a script, is required for this line to work
        element.innerHTML = _.join(['Hello', 'webpack'], ' ');
        element.classList.add('hello'); 
        return element;
      }

      document.body.appendChild(component(

));

style.css

.hello {
    color: red;
  }

index.html

<!doctype html>
<html>
  <head>
    <title>Asset Management</title>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>


资产管理

你忘了在

索引.js

中导入你的

样式.css

，如果你不告诉Webpack它就不知道你的

样式.css

然后，它将从导入的

.CSS

文件中收集所有CSS，将其转换为字符串并将其传递给

样式加载程序

，该加载程序将在

index.html

的

中作为

输出

因为您没有在入口点导入

style.css

，Webpack对此一无所知，

css加载器

无法从中收集css，

style加载器

无法将其输出为


您需要在主index.js文件中导入css文件。您可以通过添加import'/style.css'来实现这一点
更新的index.js

从“lodash”导入；
导入“/style.css”；
函数组件（）{
让element=document.createElement（'div'）；
//Lodash（当前通过脚本包含）是该行工作所必需的
element.innerHTML=\.join（['Hello'，'webpack']，''）；
element.classList.add（'hello'）；
返回元素；
}
document.body.appendChild（component（））
<!doctype html>
<html>
  <head>
    <title>Asset Management</title>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>