使用webpack打包css和js
1.安装webpack.
npm install webpack -g
2.创建一个文件夹app.
3.新建文件test.js.
require("!style-loader!css-loader!./style.css"); document.write(require('./test2'));
4.新建文件test2.js
module.exports = "I'm from test2.js.";
5.新建style.css.
body{
background:red;
}
6.新建一个html页面
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
7.现在开始打包js和css.
npm i css-loder style-loader //打包之前先确保这个两个库已经安装 webpack test.js bundle.js
至此,我发现文件夹中多了一个bundle.js的文件。在html页面中引用后就可以正常使用。
*注意 打包的CSS是这样开头: !style-loader!css-loader!
使用webpack打包css和js的更多相关文章
- Webpack打包css后z-index被重新计算的解决方法
发现问题 最近在使用 Webpack 打包 css 文件时,发现了一个问题,发现打包后的 z-index 值跟源文件 z-index 不一致. 如下图,左侧是源文件,右侧是打包后的文件: 即使加上 ! ...
- webpack打包css
1.第一种方式 1.安装css-loader和style-loader $ cnpm install css-loader style-loader --save-dev 2.引用的时候使用css-l ...
- webpack 打包CSS 引入图片
加载css 安装style-loader, css-loader npm install style-loader css-loader --save-dev 配置webpack.config.js文 ...
- webpack打包非模块化js
本文主要记录了非模块化js如何使用webpack打包 模块化打包实现方式 webpack是模块打包工具,通过入口文件递归遍历其依赖图谱,绝对是打包神器. bar.js export default f ...
- webpack打包如何统一js和css中图片资源路径
目前项目应用的是vue-cli,自行修改了部分配置.三个环境的情况跟你差不多,测试/生产环境的层级比你还深. 先说下修改了哪些配置 1-build/utils.js下的cssLoaders内的gene ...
- webpack打包css自动添加css3前缀
为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...
- webpack打包css文件
1. 安装css-loader 与 style-loader npm install style-loader css-loader --save-dev 2. 在webpack.config.js中 ...
- [one day one question] webpack打包压缩 ES6 js、.vue报错
问题描述: 报错: ERROR in js/test.js from UglifyJs Unexpected token punc ?(?, expected punc ?:? [js/test.js ...
- webpack打包css样式出错
有两个组件home和search 两个组件中都有class为footer的元素 但是search的footer比home的多一条background的样式 本地开发的时候没问题,但是打包之后,home ...
随机推荐
- Java 集合的理解(持续更新......)
一.集合的由来 通常,我们的程序需要根据程序运行时才知道创建多少个对象.但若非程序运行,程序开发阶段,我们根本不知道到底需要多少个数量的对象,甚至不知道它的准确类型.为了满足这些常规的编程需要,我们要 ...
- 介绍CPU,内存,硬盘,指令以及他们之间的关系
CPU:CPU,又称CPU芯片,中央处理器.是计算机上最重要的集成电路,位于计算机的主板上面,其主要任务是从主存上面提取指令和对指令进行执行,CPU包括运算逻辑部件.寄存器部件,运算器和控制部件等.C ...
- 【Spring】使用Spring和AMQP发送接收消息(中)
上篇讲了RabbitMQ连接工厂的作用是用来创建RabbitMQ的连接,本篇就来讲讲RabbitMQ的发送消息.通过RabbitMQ发送消息最简单的方式就是将connectionFactory Bea ...
- SQL Server中的Merge关键字 更新表数据
简介 Merge关键字是一个神奇的DML关键字.它在SQL Server 2008被引入,它能将Insert,Update,Delete简单的并为一句.MSDN对于Merge的解释非常的短小精悍:”根 ...
- [译]Selenium Python文档:一、安装
1.1.简介 Selenium Python为使用Selenium WebDriver来编写功能/验证测试提供了一个简单的API接口.通过Selenium Python API,你可以以一种非常直观的 ...
- lsusb命令
运行 yum install libusb usbutils
- ASP.NET Core MVC 源码学习:详解 Action 的激活
前言 在 上一篇 文章中,我们已经学习了 ASP.NET Core MVC 的启动流程,那么 MVC 在启动了之后,当请求到达过来的时候,它是怎么样处理的呢? 又是怎么样把我们的请求准确的传达到我们的 ...
- C#封装MongoDB工具类库
什么是MongoDB MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统. 在高负载的情况下,添加更多的节点,可以保证服务器性能. MongoDB 旨在为WEB应用提供可扩 ...
- SQLServer数据库中开启CDC导致“事务日志空间被占满,原因为REPLICATION”的原因分析和解决办法
本文出处:http://www.cnblogs.com/wy123/p/6646143.html SQLServer中开启CDC之后,在某些情况下会导致事务日志空间被占满的现象为:在执行增删改语句(产 ...
- git教程(简单的带你学好git)
刚开始使用的时候没有找到好的资源学习,下面这个资源不错,大家可以参考学习. http://www.liaoxuefeng.com/wiki/0013739516305929606dd183612485 ...