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. xpath教程 3 - xpath的小结

    一.xpath提取内容 1.提取节点中最表层的文本 htmlobj.xpath("./text()") 在scrapy中用extract()[0]方法抽取文本.如: temp['t ...

  2. 帝国cms栏目别名怎样调用?栏目名称太短了

    在用帝国cms创建栏目时一般会填写栏目名称(较短)和栏目别名(为空则与栏目名相同),栏目别名可以设置长一些作为栏目标题,可是如何调用帝国cms栏目别名呢?默认的模板标题调用是<title> ...

  3. session超时时间设置

    在Tomcat的web.xml文件中修改如下标签 <session-config> <session-timeout>10</session-timeout> &l ...

  4. 使用免费的Let's Encrypt通配符证书 升级我们的网站

    Let's Encrypt通配符证书的官方启用日期:2018年3月13日 也就是说,2018年3月13日之后,我们就可以使用Let's Encrypt通配符证书了,当然是免费的. Let's Encr ...

  5. C++声明和定义

    目录 1 参考 2 概念 2.1 声明 2.2 定义 3 对比 3.1 声明但不是定义的情况 3.2 声明且是定义的情况 3.3 特殊情况 1. 参考 1. <C++程序设计语言>4.9 ...

  6. Python正则处理多行日志一例(可配置化)

    正则表达式基础知识请参阅<正则表达式基础知识>,本文使用正则表达式来匹配多行日志并从中解析出相应的信息. 假设现在有这样的SQL日志: SELECT * FROM open_app WHE ...

  7. 【tensorflow】pip 安装失败的原因

    linux系统旧版本:   pip install https://storage.googleapis.com/tensorflow/linux/cpu/tensorflow-0.5.0-cp27- ...

  8. 禁止火狐浏览器缓存input标签方法

    禁止火狐浏览器缓存input标签方法 问题1:在火狐浏览器里,云平台的输入框.选项框.勾选框…填写之后按F5刷新页面,之前填的东西会保留着,其它浏览器不会火狐强制刷新用Ctrl + F5 浏览器自动保 ...

  9. Vue源码解析之nextTick

    Vue源码解析之nextTick 前言 nextTick是Vue的一个核心功能,在Vue内部实现中也经常用到nextTick.但是,很多新手不理解nextTick的原理,甚至不清楚nextTick的作 ...

  10. 在 Linux 中使用超级用户权限

    在你想要使用超级权限临时运行一条命令时,sudo 命令非常方便,但是当它不能如你期望的工作时,你也会遇到一些麻烦.比如说你想在某些日志文件结尾添加一些重要的信息,你可能会尝试这样做: $ echo & ...