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. elastic search 学习 一

    初步阅读了elastic search 的文档,并使用command实践操作. 大概明白其概念模型.

  2. fprintf&prinft&sprintf

    1: fprintf()#include <stdio.h> int fprintf( FILE *stream, const char *format, ... );fprintf()函 ...

  3. 通过spring 中的@Scheduled来执行定时任务

    以前开发定时任务的功能的时候,是框架里面写好的quartz配置方式,由于功力尚浅,感觉定时跑披定时任务什么的云里雾里,很高大上,每次都不知道怎么修改配置,后来几次接触定时任务发现,还是比较好掌握的,特 ...

  4. C++数据

    const :常量 ~x == -++x == -(x+1)   二进制数,1变为0,0变为1 ^                               相同为0,不同为1 &      ...

  5. Linux下快速搭建php开发环境

    php开发环境快速搭建 一.Linux下快速搭建php开发环境 1.安装XAMPP for Linux XAMPP(Apache+MySQL+PHP+PERL)是一个功能强大的建站集成软件包,使用XA ...

  6. keepalive配置文件详解

    第一部分:全局定义块 1.email通知.作用:有故障,发邮件报警. 2.Lvs负载均衡器标识(lvs_id).在一个网络内,它应该是唯一的. 3.花括号“{}”.用来分隔定义块,因此必须成对出现.如 ...

  7. deepin系统如何安装deb格式的软件

    很简单,命令如下: sudo dpkg -i *.deb 记得路径要对

  8. Servlet小总结(转)

    一,什么是Servlet? Servlet是一个Java编写的程序,此程序是基于Http协议的,在服务器端运行的(如tomcat), 是按照Servlet规范编写的一个Java类. 二,Servlet ...

  9. jenkins+docker+maven+svn

    环境介绍 1.        软件需求 Jenkins  本次实验所用版本1.5.1 下载链接:https://jenkins.io/index.html Docker 本次实验所用版本 17.03. ...

  10. （转）POPTEST创始人李爱然：谢谢，帮助我的朋友！！！！

    2015年11月15日,脉脉上随意浏览信息.每天有很多人加我,我也会主动加一些人.脉脉的广告语“打通职场人脉”,很直白的告诉我们脉脉是用来找人办事的.简单明了,不用故作清高. “利”,有利可图便是“友 ...