loader__demo_css

环境

node + yarn + webpack4.0 + webpack-cli + style-loader css-loader

文件结构

│  package.json
│  webpack.config.js
│  yarn.lock
│
├─dist
│      bundle.js
│      index.html
│
├─node_modules ...(太多了，省略)
└─src
    ├─css
    │      css.css
    │
    └─js
            app.js

package.json(依赖)

{
  "name": "demo_exclude_js_resource",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "css-loader": "^2.1.1",
    "style-loader": "^0.23.1",
    "webpack": "^4.33.0",
    "webpack-cli": "^3.3.3"
  }
}

打包webpack配置

const path = require('path');
 
module.exports = {
    entry: {
        app: './src/js/app.js'
    },
    output: {
        filename: "bundle.js",
        path: path.join(path.resolve(__dirname), 'dist')
    },
    mode: "development",
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']//两个loader的顺序不能弄错
        }]
    }
}

其他一些文件说明

app.js

require('../css/css.css');

index.html：使用了一个h1标签，script中引入打包后的js文件(打包后出现：dist/bundle.js)

css.css：给h1标签添加背景颜色和样式

打包

npx webpack

打包完成后运行index.html就可以看到h1标签的样式是css.css中设置的样式