打包css文件
这节课我们就学习一个重要的知识,把我们的CSS文件打包。在学习CSS打包之前,需要先对webpack.config.js里的Loaders配置项进行了解。
Loader
Loader是webpack最重要的一个功能之一,通过不同的loader,webpack可以对不同的文件格式进行特定的处理。
Loader 的配置选项:
- test : 用于匹配要处理的文件的扩展名,这个是必须的配置
- use : loader的名称,也是必填项
- include/exclude : 手动添加必须处理的文件或者屏蔽掉不需要处理的文件(可选)
- query : 为loader提供额外的配置选项, (可选)
// 首先在src/styles下建立一个css文件
/*
html5doctor.com Reset Stylesheet
v1.4.1
2010-03-01
Author: Richard Clark - http://richclarkdesign.com
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
:focus {
outline: 1;
}
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
border:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted #000;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
CSS和引入做好后,我们就需要使用loader来解析CSS文件了,这里我们需要两个解析用的loader,分别是style-loader和css-loader
安装loader
$ cnpm install style-loader css-loader --save-dev
在webpack.config.js中配置module选项:
// webpack.config.js
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'] // 这里的lodaer顺序不能弄反哦
}
]
}
// 运行一下
$ npm run dev
// 打开浏览器你会看到在head标签中又一个style中内内联了我们的样式。
loader的写法其实有三种
// 第一种
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
// 第二种
module: {
rules: [
{
test: /\.css$/,
loader: ['style-loader', 'css-loader']
}
]
}
// 第三种 用use+loader的写法:
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'url-loader',
options: {
limit: 30000,
name: 'images/[name]-[hash].[ext]'
}
}
]
}
]
}
// 这种写法一般是要对loader设置单独的配置option时候使用
由此看出,webpack的扩展和灵活性是非常强的。
js代码的压缩
Webpack中可以很轻松的实现JS代码的压缩,它是通过插件的方式实现的,这里我们就先来引入一个 uglifyjs-webpack-plugin
(JS压缩插件,简称uglify)。
注意: 这个插件已经在webpack中默认集成,不需要另外安装了
// webpack.config.js
const uglify = require('uglifyjs-webpack-plugin'); // 首先引入
plugins:[
new uglify() //然后使用一下
]
// 这次我们使用
$ npm run build
打包一次,发现你的dist/js下面的bundle.js 的代码得到了压缩
未完待续!!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。