cnpm install css-loader --save-dev    //css-loader 是将css打包进js

cnpm install style-loader --save-dev  //style-loader 将css通过require方式引入进来

cnpm install sass-loader node-sass  --save-dev //同时安装sass 和sass-loader

目录结构（publi为src编译生成的文件）

html代码

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

    </head>

    <body>

            <div id="app">6r</div>

            <p id="demo">456</p>

    </body>

    <script type="text/javascript" src="public/js/index.js"></script>

     <!-- assets是通过publicPath虚构出来的暂存空间，它不直接在硬盘内存中，通过webpack-dev-server来运行 -->

</html>

index.scss

$col:pink;

@import "./demo"; //导入css

body{

 font-size: 900%;

  #app{color:$col;}

}

demo.css

  #demo{color:blue;}

index.js

var $ = require('../../node_modules/jquery');

//loader-css

require("../css/index.scss"); 

$('#app').html("1334");

$("#app").click(function(event){

        alert(123)

    });

webpack.config.js 

var webpack = require("webpack");

var webpckDevServer  = require("webpack-dev-server");

module.exports={

    entry: __dirname +"/src/js/index.js",//入口文件 webpack-dev-server 实时刷新监控的目录

    output:{

        path: __dirname +"/public/", 

        filename: "js/index.js",

        publicPath: '/assets/'//打开webpack-dev-server 服务器工具时可以再index里面引用此地址，打开速度会快一点,另外他不是直接在内存中存放而是先在webpack的虚拟内存中暂存,所以在webpack未编译之前能够运行，如果直接写实体目录则不经过webpack打包编译，浏览器是识别不了的，所以先放在这个虚拟目录里，因为是虚拟目录，所以你看不到他的编译文件

    },

    devServer:{

        contentBase:"./",//根目录

        host:'192.168.199.171',//ip设置 要相对的进行改变

        port:"80",//端口

        colors:true,

        open:true//自动打开浏览器

    },

    module:{

        loaders:[

            {  test:/\.css$/,//匹配.css文件

               loader:'style-loader!css-loader'//用style-loader去解释css

            },

             {

                test: /\.scss$/,

                loaders: ["style-loader", "css-loader", "sass-loader"]

            }

        ]

    }

}

package.json

{

  "name": "webp2",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "www": "cnpm run demo && cnpm run devServer",

    "demo": "webpack --watch --progress -d -p --color",

    "demo2": "webpack --config webpack.config123.js --watch --progress -d -p --color",

    "start": "webpack --watch --progress -d -p --color",

    "devServer": "webpack-dev-server --inline --hot"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "css-loader": "^0.26.1",

    "jquery": "^3.1.1","node-sass": "^4.0.0",

    "sass-loader": "^4.1.0",

    "style-loader": "^0.13.1",

    "webpack": "^1.14.0",

    "webpack-dev-server": "^1.16.2"

  }

}

1、webpack编译打包Sass编译的css进js文件的更多相关文章

  1. Webpack 2 视频教程 013 - 自动分离 CSS 到独立文件

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  2. asp.net使用httphandler打包多CSS或JS文件以加快页面加载速度

    介绍 使用许多小得JS.CSS文件代替一个庞大的JS或CSS文件来让代码获得更好的可维 护性,这是一个很好的实践.但这样做反过来却损失了网站的性能.虽然你应该将你的Javascript代码写在小文件中 ...

  3. ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler

    ASP.NET 打包多CSS或JS文件以加快页面加载速度的Handler, 使用<link type="text/css" rel="Stylesheet" ...

  4. Gulp实现css、js、图片的压缩以及css、js文件的MD5命名

    目前做代码压缩合并的工具有很多,诸如gulp,webpack,grunt等等,可以说这些项目构建工具的功能非常之强大:图片压缩.图片转base64.css和js的压缩以及合并,文件的md5重命名 -- ...

  5. JQuery 加载 CSS、JS 文件

    JS 方式加载 CSS.JS 文件: //加载 css 文件 function includeCss(filename) { var head = document.getElementsByTagN ...

  6. CSS 和 JS 文件合并工具

    写 CSS 和 JavaScript 的时候, 我们会遇到一个两难的局面: 要么将代码写在一个大文件, 要么将代码分成多个文件. 前者导致文件难以管理, 代码复用性差, 后者则因为需要在载入多个文件令 ...

  7. 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件

    找了这么久资料,总算解决了 感谢博客园:http://www.cnblogs.com/xsht/p/5275081.html 感谢百度:http://zhidao.baidu.com/link?url ...

  8. CI框架引入外部css和js文件

    首先在项目根目录下建立assets文件夹,在这个文件夹下再建立css和js文件夹分别放置css和js文件 然后,在项目根目录下建立.htaccess文件 内容如下: RewriteEngine on  ...

  9. 【转载】IIS7.5（经典模式）访问静态资源(.css和.js文件）提示：未能执行 URL

    IIS7.5(经典模式)静态资源(.css和.js文件)提示:未能执行 URL “/”应用程序中的服务器错误. 未能执行 URL. 说明: 执行当前 Web 请求期间,出现未处理的异常.请检查堆栈跟踪 ...

随机推荐

  1. wordpress注册后重定向到自定义页面

    wordpress注册后重定向到自定义页面怎么操作?将下面的代码添加到当前主题的 functions.php 文件中即可 add_filter( 'registration_redirect', 'w ...

  2. MySQL Innodb日志机制深入分析

    MySQL Innodb日志机制深入分析 http://blog.csdn.net/yunhua_lee/article/details/6567869 1.1. Log & Checkpoi ...

  3. qsv转mp4

    1:下载格式工厂:http://rj.baidu.com/soft/detail/13052.html?ald 2:安装 :选择安装位置,把不需要安装的软件前面的对号去掉. 3:下一步,把不需要的软件 ...

  4. [LeetCode] 787. Cheapest Flights Within K Stops_Medium tag: Dynamic Programming, BFS, Heap

    There are n cities connected by m flights. Each fight starts from city u and arrives at v with a pri ...

  5. iOS开发--底部按钮和应用图标显示未读消息

    我们要实现的效果如下: 我们使用系统自带的,实际上,代码量很少,在我们要显示的按钮上,打上下面一句代码即可: self.tabBarItem.badgeValue = @"1"; ...

  6. A+B+C问题

    这是一个非常简单的题目,意在考察你编程的基础能力.千万别想难了哦.输入为一行,包括了用空格分隔的三个整数 AA.BB.CC(数据范围均在-40−40 ~ 4040 之间).输出为一行,为“A+B+CA ...

  7. 在liferay中如何使用Ajax的请求

    1:首先在界面上写一个路径,这个路径就是要找后台中的哪一个操作比如:

  8. JS中的对象数组

    <html> <head> <title>对象数组的字符串表示</title> <script type="text/javascrip ...

  9. php hash算法

    任意长度的输入, 固定长度的输出 ,该输出就是hash值,这种转换就是一种压缩映射,也就是hash值的空间远远小于输入的空间, 不同的输入可能散列成相同的输出,而不能从hash值来唯一的确定输入值. ...

  10. Filter—过滤器

    过滤器的作用是什么? 1.拦截传入的请求和传出的响应,能拿到请求和响应中的数据 2.监视,修改,或处理正在客户端和服务器之间交换的数据流 3.利用过滤器的执行时机,实现Web程序的预处理,和后期的处 ...