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中設置的樣式