环境

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中设置的样式

loader__demo_css的更多相关文章

随机推荐

  1. Qt移动应用开发(二):使用动画框架

    Qt移动应用开发(二):使用动画框架 上一篇博客介绍了怎样使用Qt的QML来对屏幕分辨率大小进行适应,其实,不同分辨率的适应是一个很棘手的问题,除了分辨率不同外,宽高比(aspect ratio)也不 ...

  2. windows下检測文件改变

    这个主要是应用在我前一篇博客里提到的脚本热载入功能. 主要实现的功能检測目录内文件的变化(改变.新增.删除.重命名),当发现改变的时候通知lua又一次载入脚本.基本上就是一个windows api的使 ...

  3. Android Message和obtainMessage的差别

    前几天须要实现一个以太网功能就看了以太网的源代码部分,看见了源代码部分在消息处理时,发现有一些不同的地方:   平时我在处理消息时:   1.首先创建Handler对象:   private Hand ...

  4. BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第12章节--SP 2013中远程Event Receivers

    BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第12章节--SP 2013中远程Event Receivers         本章中,你讲学到: 了解远程evernt ...

  5. hive学习笔记-表操作

    Hive数据类型 基本数据类型 tinyint,smallint,int,biging,float,double,decimal,char,varchar,string,binary,boolean, ...

  6. 【UML 建模】在线UML建模工具 ProcessOn 使用具体解释

    总结 : -- 推荐理由 : 近期从 Windows 操作系统 转到 MAC 上, 正在看设计模式 和 重构, 找不到好用的 UML 工具, 因此在网上找了一款能够在线使用的 UML 工具, 用起来发 ...

  7. 双logo

    from aip import AipSpeech bd_k_l = ['11059852', '5Kk01GtG2fjCwpzEkwdn0mjw', 'bp6Wyx377Elq7RsCQZzTBgG ...

  8. Prevent the "split brain" by configuring the majority of nodes

    ## Prevent the "split brain" by configuring the majority of nodes (total number of nodes / ...

  9. 【网易云音乐 for linux】 踩过的坑

    1.从官网下载的包,却怎么也安装不上. 提示依赖,网上全是什么 sudo apt-get -f install ,结果提示有没有完成安装的包,让我卸载. 于是按下Y卸载了网易云. 尝试一个个修复以来, ...

  10. maven使用(转载)

    一.安装配置: 1.安装配置JDK    java/javac -version 2.安装配置maven   mvn -v 3.下载项目模板    mvn archetype:generate 二.详 ...