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. 1257: [CQOI2007]余数之和sum

    1257: [CQOI2007]余数之和sum Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: 2001  Solved: 928[Submit][Sta ...

  2. CoreAnimation 寄宿图

    #CoreAnimation 寄宿图 寄宿图:图层中所包含的图 by:旭宝爱吃鱼 针对于寄宿图我在这里只讨论contents属性以及Custom Drawing. contents content:内 ...

  3. 动态规划略有所得 数字三角形(POJ1163)

    在上面的数字三角形中寻找一条从顶部到底边的路径,使得路径上所经过的数字之和最大.路径上的每一步都只能往左下或 右下走.只需要求出这个最大和即可,不必给出具体路径. 三角形的行数大于1小于等于100,数 ...

  4. 因为本地没有配置 localhost 导致的 eclipse 的奇葩问题

    因为电脑没有配置 127.0.0.1 localhost,已经碰到两次奇葩问题了. 问题一: 我的博文http://www.cnblogs.com/sonofelice/p/5143746.html中 ...

  5. 【iOS】7.4 定位服务->2.1.4 定位 - 官方框架CoreLocation 案例：指南针效果

    本文并非最终版本,如果想要关注更新或更正的内容请关注文集,联系方式详见文末,如有疏忽和遗漏,欢迎指正. 本文相关目录: ================== 所属文集:[iOS]07 设备工具 === ...

  6. java学习笔记 --- 集合

    1.定义:集合是一种容器,专门用来存储对象 数组和集合的区别?   A:长度区别  数组的长度固定 集合长度可变 B:内容不同  数组存储的是同一种类型的元素  而集合可以存储不同类型的元素  C:元 ...

  7. 【Unity游戏开发】浅谈 NGUI 中的 UIRoot、UIPanel、UICamera 组件

    简介 马三最近换到了一家新的公司撸码,新的公司 UI 部分采用的是 NGUI 插件,而之前的公司用的一直是 Unity 自带的 UGUI,因此马三利用业余时间学习了一下 NGUI 插件的使用,并把知识 ...

  8. js鼠标滑轮侧边广告（仅IE可用）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. oracle习题1~13

    1. 查询Student表中的所有记录的Sname.Ssex和Class列. 2. 查询教师所有的单位即不重复的Depart列. 3. 查询Student表的所有记录. 4. 查询Score表中成绩在 ...

  10. JavaWeb之Cookie和Session的区别

    Cookie和Session的区别 一.cookie机制和session机制的区别 ********************************************************** ...