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的更多相关文章

  1. Webpack打包css后z-index被重新计算的解决方法

    发现问题 最近在使用 Webpack 打包 css 文件时,发现了一个问题,发现打包后的 z-index 值跟源文件 z-index 不一致. 如下图,左侧是源文件,右侧是打包后的文件: 即使加上 ! ...

  2. webpack打包css

    1.第一种方式 1.安装css-loader和style-loader $ cnpm install css-loader style-loader --save-dev 2.引用的时候使用css-l ...

  3. webpack 打包CSS 引入图片

    加载css 安装style-loader, css-loader npm install style-loader css-loader --save-dev 配置webpack.config.js文 ...

  4. webpack打包非模块化js

    本文主要记录了非模块化js如何使用webpack打包 模块化打包实现方式 webpack是模块打包工具,通过入口文件递归遍历其依赖图谱,绝对是打包神器. bar.js export default f ...

  5. webpack打包如何统一js和css中图片资源路径

    目前项目应用的是vue-cli,自行修改了部分配置.三个环境的情况跟你差不多,测试/生产环境的层级比你还深. 先说下修改了哪些配置 1-build/utils.js下的cssLoaders内的gene ...

  6. webpack打包css自动添加css3前缀

    为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...

  7. webpack打包css文件

    1. 安装css-loader 与 style-loader npm install style-loader css-loader --save-dev 2. 在webpack.config.js中 ...

  8. [one day one question] webpack打包压缩 ES6 js、.vue报错

    问题描述: 报错: ERROR in js/test.js from UglifyJs Unexpected token punc ?(?, expected punc ?:? [js/test.js ...

  9. webpack打包css样式出错

    有两个组件home和search 两个组件中都有class为footer的元素 但是search的footer比home的多一条background的样式 本地开发的时候没问题,但是打包之后,home ...

随机推荐

  1. 1625: [Usaco2007 Dec]宝石手镯

    1625: [Usaco2007 Dec]宝石手镯 Time Limit: 5 Sec  Memory Limit: 64 MB Submit: 919  Solved: 618 [Submit][S ...

  2. BeagleBone Black安装小米随身WiFi驱动方法

    以下操作直接在beaglebone black上执行 下载驱动源码 git clone https://github.com/rcn-ee/mt7601u.git 下载linux-headers,这是 ...

  3. 笔记本win10关机异常解决

    自从使用了win10 以后,小编已经情不自禁的爱上了她——迄今为止最NB的windows系统 但令人头疼的问题也随之而来,前几天购置了一款三星的SSD固态硬盘,马上就装了win10,某天晚上关机以后发 ...

  4. mac 下 wget 安装

    1.下载 wget 压缩包,wget 下载地址:ftp://ftp.gnu.org/gnu/wget/ 2.make && make install 3.如果提示 permission ...

  5. 《Django By Example》第十章 中文 翻译 （个人学习，渣翻）

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:翻译本章过程中几次想放弃,但是既然 ...

  6. java学习笔记 --- java基础语法

    一.java标识符,关键字,保留字 1.标识符 用来增强程序阅读性自定义的名字.类名,变量名,方法名等都可以被称为标识符 标识符的组成: 1.由数字(0-9),字母(a-z,A-Z),下划线(_),美 ...

  7. 大数据量场景下storm自定义分组与Hbase预分区完美结合大幅度节省内存空间

    前言:在系统中向hbase中插入数据时,常常通过设置region的预分区来防止大数据量插入的热点问题,提高数据插入的效率,同时可以减少当数据猛增时由于Region split带来的资源消耗.大量的预分 ...

  8. QTP自动化测试培训：描述编程之WebElement

    QTP自动化测试培训:描述编程之WebElement   通过描述性编程技术,来描述出来输入框: set po=browser("creationtime:=0").page(&q ...

  9. 一个web应用的诞生(10)--关注好友

    下面回到首页中,使用一个账户登录,你肯定已经注意到了这里的内容: 没错,现在都是写死的一些固定信息,其中分享数量很容易就可以获取,只需要修改首页模板: <p class="text-m ...

  10. 在app中屏蔽第三方键盘

    iOS8开放了安装第三方键盘的权限,但是在项目开发中,有些情况是需要禁用第三方键盘的.比如说,数字键盘上需要自定义按钮,但是在第三方键盘弹出时,按钮就覆盖在这上面了,在这中情况下,最好的办法是禁用第三 ...