我的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 necessary
use: [{
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学习笔记 (二) html-webpack-plugin使用
这个插件的两个作用: 为html文件中引入的外部资源如script.link动态添加每次compile后的hash,防止引用缓存的外部文件问题 可以生成创建html入口文件,比如单页面可以生成一个ht ...
- webpack学习笔记二
sourceMap 源代码与打包后的代码的映射关系.例如,在某个源文件中test.js里面有个错误,如果开启状态,那么打包后运行的报错信息就会说明是错误的具体位置,如果是关闭状态,报错后,提示的报错位 ...
- WPF的Binding学习笔记(二)
原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...
- AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
- [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计
源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...
- JMX学习笔记(二)-Notification
Notification通知,也可理解为消息,有通知,必然有发送通知的广播,JMX这里采用了一种订阅的方式,类似于观察者模式,注册一个观察者到广播里,当有通知时,广播通过调用观察者,逐一通知. 这里写 ...
- java之jvm学习笔记二(类装载器的体系结构)
java的class只在需要的时候才内转载入内存,并由java虚拟机的执行引擎来执行,而执行引擎从总的来说主要的执行方式分为四种, 第一种,一次性解释代码,也就是当字节码转载到内存后,每次需要都会重新 ...
- Java IO学习笔记二
Java IO学习笔记二 流的概念 在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据的时候要使用输入流读取数据,而当程序需要将一些数据保存起来的时候,就要使用输出流完成. 程序中的输入输 ...
- 《SQL必知必会》学习笔记二)
<SQL必知必会>学习笔记(二) 咱们接着上一篇的内容继续.这一篇主要回顾子查询,联合查询,复制表这三类内容. 上一部分基本上都是简单的Select查询,即从单个数据库表中检索数据的单条语 ...
- NumPy学习笔记 二
NumPy学习笔记 二 <NumPy学习笔记>系列将记录学习NumPy过程中的动手笔记,前期的参考书是<Python数据分析基础教程 NumPy学习指南>第二版.<数学分 ...
随机推荐
- Laravel 操作指令
php artisan migrate —path=database/migrations/v1 更新表数据 php artisan make:migration create_channels_ta ...
- AOP实现防止接口重复提交
项目中对于状态变更接口存在重复提交的问题. package com.yxx.survey.foundation.aop; import com.alibaba.fastjson.JSON; impor ...
- 39）PHP，选取数据库中的两列
首先是我的文件关系: 我的b.php是主php文件,BBB.php是配置文件,login.html是显示文件, b.php文件代码: <?php /** * Created by PhpStor ...
- 关于Java杂项知识总结
JVM内存结构 JVM在运行时把从操作系统申请到的内存分为若干区域,主要有栈.堆和方法区,方便Java程序使用 堆内存 使用new关键字创建出来的对象都存储在堆内存中 方法区 被加载的类的信息存储在方 ...
- linux误删除恢复(未验证）
extundelete 大家基本都知道,在linux上误删除了东西后果是很严重的,尤其是在服务器上误删除了东西,对于字符终端,想要实现恢复删除的数据更是难上加难,对于Linux误删除了重要的东西,虽然 ...
- RHCSA考试（Linux7）
博主本人平和谦逊,热爱学习,读者阅读过程中发现错误的地方,请帮忙指出,感激不尽 一.设置环境: 请初始化您的考试虚拟机 server0.example.com,将系统的 root 账号密码设置为 12 ...
- js引入的几种简单写法
[方法一] <script> function loadScript() { var script = document.createElement(" ...
- 第十六届“二十一世纪的计算”学术研讨会 密西根州立大学教授Anil K. Jain主题演讲
Biometrics---How Do I Know Who You Are? 密西根州立大学教授Anil K. Jain主题演讲" title="第十六届"二十一世纪的 ...
- linux下的时区修改
Centos 7时区问题: 通常使用tzselect命令选择时区,今天在修改centos7的时区的时候,修改完以后时区还是没有发生变化,重启也是没有用的:通过网络的帮助了解到,在Centos和ubun ...
- 关于Synchornized，Lock，AtomicBoolean和volatile的区别介绍
1． volatile 变量可以被看作是一种 "程度较轻的 synchronized". 2． Lock 实现提供了比使用 synchronized 方法和语句可获得的更广泛的 ...