正文

2、extract-text-webpack-plugin提取Sass编译的Css

IP云
IP云V管理员/6 阅读
08/07
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

cnpm install extract-text-webpack-plugin --save-dev //把css从js中提取出来

以下实现的效果是将sass打入js的同时也将其从中提取出来

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

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<link rel="stylesheet" type="text/css" href="public/css/index.css" />
<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");
var ExtractTextPlugin = require('extract-text-webpack-plugin');//抽离css插件
var extractCss = new ExtractTextPlugin("css/index.css");//实例化，并并填写输出的一个路径[]中表示输出默认名称,这个目录相对于提出的那个目录
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 : ExtractTextPlugin.extract("style-loader", "css-loader")
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style-loader", "css!sass") }
]
},
plugins:[
extractCss
]
}

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",
"extract-text-webpack-plugin": "^1.0.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"
}
}