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. 1934: [Shoi2007]Vote 善意的投票

    1934: [Shoi2007]Vote 善意的投票 Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 1174  Solved: 723[Submit][S ...

  2. 1202: [HNOI2005]狡猾的商人

    1202: [HNOI2005]狡猾的商人 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1554  Solved: 745[Submit][Stat ...

  3. VS2010在网络共享目录使用IntelliSense、ipch、sdf和SQL Compact Server相关问题

    Microsoft SQL Compact Server 是专用于 Visual Studio 的单机SQL 数据库.数据库文件名的后缀为SDF. 而VS2010 拒绝在网络共享目录中建立和打开SDF ...

  4. Button颜色选择器进阶

    drawable/button_color.xml <?xml version="1.0" encoding="utf-8"?> <selec ...

  5. python多线程学习笔记(超详细)

    python threading 多线程 一. Threading简介 首先看下面的没有用Threading的程序 ):  s += i  time.sleep(  ):  s += i  time. ...

  6. Spring初识(通过小实例清晰认识Spring)

    1.spring架构: spring是J2EE应用程序框架,是轻量级的IoC和AOP的容器框架,主要是针对javaBean的生命周期进行管理的轻量级容器,可以单独使用,也可以和Struts框架,iba ...

  7. unity3d 中文乱码解决方法——cs代码文件格式批量转化UTF8

    在Unity3d中经常会碰到中文乱码的问题,比如代码中的[AddComponentMenu("GameDef/AI/战机AI")],注释,中文文本等等 其原因在于,unity本身是 ...

  8. 移动端ios 输入框fixed固定在底部 焦点时乱跳加遮盖问题的解决 转自zhangyunling 加个人项目解决方案

    如果您有过移动端的开发经验,那么您是否碰到过这样的问题,一个页面有输入框,当这个输入框聚焦时,输入框在IOS下,被移动到手机屏幕的当中去了,而在Android端,有些浏览器的输入框,会被键盘盖住. 1 ...

  9. 核心模块Path

    核心模块Path 作用:用于帮助程序员来操作硬盘上的路径. 核心模块注意点:当引用核心模块的时候直接require('模块名'),不需要加任何路径或者后缀. Path中的常用API: dirname( ...

  10. zoom动画，实现图片点击预览效果

    参考:https://developer.android.google.cn/training/animation/zoom.html 1.创建Views 下面的布局包括了你想要zoom的大版本和小版 ...