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. java+++IO流操作

    序:IO流的操作主要分为两种读和写.一方面:我们可以通过不加缓冲类字符流BufferedReader/Writer和字节流BufferedInputStream/OutputStream来进行简单的读 ...

  2. 详解JDBC连接数据库

    一.概念 1. 为了能让程序操作数据库,对数据库中的表进行操作,每一种数据库都会提供一套连接和操作该数据库的驱动,而且每种数据库的驱动都各不相同,例如mysql数据库使用mysql驱动,oracle数 ...

  3. 使用CEF(CEFGLUE)作为您的客户端UI（一）

    背景: 本人是一名C#开发者,而作为C#开发者,做客户端应用中最头痛的一件事就是没有一个好的UI解决方案.WinFrom嘛,效率虽然还不错,但是做一些特殊的效果,完全应付不来,比如透明控件.比FPS太 ...

  4. 组件之间使用Prop传递数据

    <div id="example"> <father></father> </div> <script src="h ...

  5. Linux之wc命令

    wc - print newline, word, and byte counts for each file 为文件打印行数,字符数,字节数 参数: -l  仅列出行 -w  仅列出多少字(英文单字 ...

  6. mysql创建数据表时如何判断是否已经存在？

    >>> create table if not exists people(name text,age int(2),gender char(1)); 如上代码表示创建一个名为peo ...

  7. 受限玻尔兹曼机（RBM）原理总结

    在前面我们讲到了深度学习的两类神经网络模型的原理,第一类是前向的神经网络,即DNN和CNN.第二类是有反馈的神经网络,即RNN和LSTM.今天我们就总结下深度学习里的第三类神经网络模型:玻尔兹曼机.主 ...

  8. 从今天开始学习Java了

    //今天第一天学习了Java的起源兴起和用途,Java的特点和优势,又重新练习了hello world, public class Hello{ public static void main(Str ...

  9. JavaWeb之cookie

    什么叫做会话 ? 用户从打开一个浏览器开始,浏览器网站,到关闭浏览器的整个过程叫做一次会话! 每个用户与服务器进行交互的过程中,各自会有一些数据,程序要想办法保存每个用户的数据. 例如:用户点击超链接 ...

  10. 老李推荐：第14章7节《MonkeyRunner源码剖析》 HierarchyViewer实现原理-装备ViewServer-获取版本号 2

    代码先是发送”LIST”命令到ViewServer列出所有的打开的窗口,然后把每个窗口都保存起来.342行起按照源码的注释解析就是说:从协议版本3以后开始加入了窗口自动更新的功能,但是在此之前,如果用 ...