我的webpack学习笔记（二）

前言

上一篇文章我们讲了多页面js的打包，本篇文章我们继续scss的打包。

多页面css单独打包

首先，我们css编写采用的是sass，所以我们先来安装sass-loader以及可以用到的依赖

$ npm install sass-loader node-sass css-loader style-loader --save-dev

安装完loaders，下面在webpack.config.js中加入如下代码

rules: [{test: /\.scss$/,use: extractPlugin.extract({fallback: 'style-loader',use: [{loader: "css-loader"}, {loader: "sass-loader",options: {includePaths:[__dirname+"/src/css/app",__dirname+"/src/css/base"]}}]})}
]

然后我们需要通过extract-text-webpack-plugin插件来提取并输出成单独的css

$ npm install --save-dev extract-text-webpack-plugin

在webpack.config.js中引用

const path = require('path')
const webpack = require('webpack') //to access built-in plugins
const fs = require('fs')
const extractPlugin = require('extract-text-webpack-plugin')
function getEntry() {let jsPath = path.resolve(__dirname, 'src/js/app')let dirs = fs.readdirSync(jsPath)let matchs = [], files = {}dirs.forEach(function (item) {matchs = item.match(/(.+)\.js$/);if (matchs) {files[matchs[1]] = path.resolve(__dirname, 'src/js/app', item)}})return files
}
const extractSass = new extractPlugin({filename: "[name]/[name].css"
})
module.exports = {entry: getEntry(),output: {path: path.join(__dirname, "src/dist/"), //文件输出目录publicPath: "http://www.workspace.com/webpack-demo/src/dist/",       //此处要特别注意，比较明显的是css中的图片路径，跟这个设置有关，编译完后可以看下编译后的css中图片路径你就明白了。filename: "[name]/[name].js",        //根据入口文件输出的对应多个文件名},module: {loaders: [{test: /\.js/,loader: 'babel-loader',include: __dirname + '/src/js'}],rules: [{test: /\.scss$/,use: extractPlugin.extract({fallback: 'style-loader',//resolve-url-loader may be chained before sass-loader if necessaryuse: [{loader: "css-loader"}, {loader: "sass-loader",options: {includePaths: [__dirname+"/src/css/app",__dirname+"/src/css/base"]}}]})},{test: /.(png|gif|jpe?g|svg)$/,loader: 'url-loader',query: {limit: 10000}}]},plugins: [//js文件的压缩new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}}),extractSass]
}

你会发现loader中多了一个loader

这个url-loader是处理图片文件的，在应用之前我们要安装相关依赖

$ npm install --save-dev url-loader file-loader

你会发现limit，这里的规则是：如果图片size小于10k时把图片准换成base64嵌入到url中

index.scss内容如下

@import "../base/base.scss";
$base-font-size: 72;
$base-color:#F5A623;
body{color:$base-color;
}
.logo{background-image: url('../../asset/logo.jpeg');
}
.error{background-image: url('../../asset/404.png');
}

index.js内容

import Header from '../module/header'
import '../../css/app/index.scss'
window.onload = function(){document.querySelector('.main').innerHTML += Header.html
}

index.html内容如下

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/><meta content="telephone=no" name="format-detection"/><meta name="apple-touch-fullscreen" content="yes"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-status-bar-style" content="black"/><title>webpack-demo</title><link rel="stylesheet" type="text/css" href="./src/dist/index/index.css"/>
</head>
<body><header class="logo"></header><div class="main">welcome webpack demo</div><div class="error"></div>
</body>
<script src="./src/js/base/require-zepto.js"></script>
<script src="./src/dist/index/index.js"></script>
</html>

执行结果

准备完毕，下面我们开始打包

首先看一下打包前的目录

$ npm run dev

下面看一下打包后文件夹变化

我的webpack学习笔记（二）相关推荐

webpack学习笔记（二）：认识配置和命令执行
在上一篇webpack学习笔记中,直接在命令行中使用npx webpack对项目进行打包时所使用的配置都是默认的,入口文件默认是src目录下的index.js文件,输出文件默认是dist文件夹下的ma ...
css中怎么加入立体模型,CSS学习笔记二：css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
qml学习笔记(二)：可视化元素基类Item详解（上半场anchors等等）
原博主博客地址:http://blog.csdn.net/qq21497936 本文章博客地址:http://blog.csdn.net/qq21497936/article/details/7851 ...
[转载]dorado学习笔记(二)
原文地址:dorado学习笔记(二)作者:傻掛 ·isFirst, isLast在什么情况下使用?在遍历dataset的时候会用到 ·dorado执行的顺序,首先由jsp发送请求,调用相关的ViewM ...
PyTorch学习笔记(二)——回归
PyTorch学习笔记(二)--回归本文主要是用PyTorch来实现一个简单的回归任务. 编辑器:spyder 1.引入相应的包及生成伪数据 import torch import torch.nn ...
tensorflow学习笔记二——建立一个简单的神经网络拟合二次函数
tensorflow学习笔记二--建立一个简单的神经网络 2016-09-23 16:04 2973人阅读评论(2) 收藏举报分类: tensorflow(4) 目录(?)[+] 本笔记目的 ...
Scapy学习笔记二
Scapy学习笔记二 Scapy Sniffer的用法: http://blog.csdn.net/qwertyupoiuytr/article/details/54670489 Scapy Snif ...
Ethernet/IP 学习笔记二
Ethernet/IP 学习笔记二原文链接:http://wiki.mbalib.com/wiki/Ethernet/IP 1.通信模式不同于源/目的通信模式,EtherNet/IP 采用生产/消 ...
Java学习笔记二：数据类型
Java学习笔记二:数据类型 1. 整型:没有小数部分,允许为负数,Java整型分4种:int short long byte 1.1 Int最为常用,一个Int类型变量在内存中占用4个字节,取值范围 ...
吴恩达《机器学习》学习笔记二——单变量线性回归
吴恩达<机器学习>学习笔记二--单变量线性回归一. 模型描述二. 代价函数 1.代价函数和目标函数的引出 2.代价函数的理解(单变量) 3.代价函数的理解(两个参数) 三. 梯度下降- ...

我的webpack学习笔记（二）

前言

多页面css单独打包

首先，我们css编写采用的是sass，所以我们先来安装sass-loader以及可以用到的依赖

然后我们需要通过extract-text-webpack-plugin插件来提取并输出成单独的css

你会发现loader中多了一个loader

index.scss内容如下

index.js内容

index.html内容如下

执行结果

首先看一下打包前的目录

下面看一下打包后文件夹变化

我的webpack学习笔记（二）相关推荐

最新文章

热门文章