Webpack 4x 之路 （ 三 ）

这节课我们就学习一个重要的知识，把我们的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的扩展和灵活性是非常强的。

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 的代码得到了压缩