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中设置的样式
loader__demo_css的更多相关文章
随机推荐
- nginx-tomcat负载均衡redis-session共享,静态资源分离
nginx-tomcat负载均衡redis-session共享.静态资源分离 基本环境: redis-2.8 apache-tomcat-6.0.41 nginx1.6.2 1.redis配置 1,配 ...
- Socket 长连接 短连接 心跳 JAVA SOCKET编程
简单解释就是: 短连接:建立连接,发送数据包.关闭连接 长连接:建立连接.发送数据包,发送心跳包,发送数据包,发送心跳包.发送心跳包. ..... 所以又频繁的数据收发的话.短连接会频繁创建TCP连接 ...
- LCA__st算法&&树上倍增
st表 #include<cstdio> #include<algorithm> #include<cmath> using namespace std; ]; ] ...
- 【原创】Vue项目中各种功能的实现
已完成: 后台的管理功能: 这里用的组件是 element-UI ====> NavMenu ◆首先是排版 : <div class="manage-page fillcont ...
- xfs文件备份恢复篇一vm中linux新增磁盘
XFS提供了 xfsdump 和 xfsrestore 工具协助备份XFS文件系统中的数据.xfsdump 按inode顺序备份一个XFS文件系统.centos7选择xfs格式作为默认文件系统,而且不 ...
- j建立一个小的servlet小程序
我们建立一个最简单的servlet程序,这个servelt程序只是单纯的输出helloworld. 步骤如下:如图:在Eclipse中选择新建一个项目,其中选择tomcat project然后点击下一 ...
- Coursera公开课-Machine_learing:编程作业3
第四周 编程作业: Multi-class Classification and Neural Networks 这周作业与上一周有许多相同的部分,比如longistic regression中的lr ...
- debug时红点消失
问题描述:debug时红色断点和黄色小箭头不见,而用行代码高亮的形式时. 解决办法:可以用设置 工具 => 选项 => 文本编辑器 => 指示器边距 勾上选项
- Web页面使用VLC播放插件
一.原生态Demo下载 选择原因:我们为什么选择VLC播放插件?原因是它支持IE8浏览器播放视频,如果高版本的浏览器大可不必选择该插件,很多html5插件既好用又简单,但是有些交管或政府 部门还是限制 ...
- Laravel5.1学习笔记i14 系统架构6 Facade
Facades 介绍 使用 Facades Facade 类参考 #介绍 Facades provide a "static" interface to classes th ...