走近webpack(2)--css打包及压缩js

  前面的文章介绍了webpack的devServer以及多入口多出口文件的配置,咱们继续往下学。

  在开始学习接下来的知识之前,我们先回顾一下,前文提到了webpack的简单配置方法,但是只详细说了下入口和出口文件的配置,并没有更多的去解释其他选项的配置,比如loader,plugin等。那么咱们现在就来学一下module的配置。前面说过,module的主要作用就是通过loaders来配置,解析,转换不同类型的模块。比如说,可以把less,sass转换成css,可以把es6甚至es7语法转换成大部分浏览器可以运行的js代码。所有的loaders都需要在npm中单独安装并且在module中配置后才可以使用。loader的主要配置只有test和use两种,简单来说就是。你要匹配的文件是什么,用test来过滤。用use来确定你要用什么loader来转换你匹配到的文件。下面咱们开始第一个loader的使用。

  首先我们来安装两个loader,css-loader和style-loader。运行如下代码:

npm install style-loader css-loader --save-dev

其中,style-loader主要用于将css插入到页面的style标签中等。css-loader主要用于处理css中的url()。

然后我们查看package.json中的devDependecies中多了两个配置项,也就是我们安装的css-loader和style-loader说明安装成功。

  然后,我们在src文件夹下新建一个css文件夹,并且新建一个index.css文件。

  此时,你的文件目录结构应该是这样的:

  在文件中我们写上如下的代码。

body{
   background:red; 
}
#title{
  background:orange;  
  color:blue;      
}

  只是这样还不行,我们需要在src/entry.js中引入这个css文件,代码如下:

import idxcss from './css/index.css'

  最后一步,也是最重要的一步,我们在webpack.config.js中的module中配置一下我们已经安装好的loader:

module:{
        rules: [
            {
              test: /\.css$/,
              use: [ 'style-loader', 'css-loader' ]
            }
          ]
    },

  然后,让我们npm run build一下!打开index.html,我们发现css已经被写入了。

  下面我们介绍一下loader的其他几种写法,意思都一样,你们喜欢哪个用哪个。

/*第一种写法*/ 
module:{
    rules:[
        {
            test:/\.css$/,
            use:['style-loader','css-loader']
        }
    ]
}
/*第二种写法*/ 
module:{
    rules:[
        {
            test:/\.css$/,
            loader:['style-loader','css-loader']
        }
    ]    
}
/*第三种写法*/
module:{
     rules:[
        {
            test:/\.css$/,
            use: [
                {
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                 }
            ]
        }
    ]
}    

  ok,下面我们来学一下如何压缩JS,我们需要用到uglifyjs-webpack-plugin,一个压缩JS的插件,没错,插件,plugins。那么看一下我们如何使用他呢。

  uglifyjs-webpack-plugin已经集成在webpack中,所以我们不用下载安装了,直接在config.js中引入:

const uglify = require('uglifyjs-webpack-plugin');

  然后在module的plugin选项下new一个uglify就可以了。

  下面我们npm run build一下就打包成功了。JS压缩通常都是用在生产环境中的。下面来看看html文件是如何打包的。

  先把dist目录下的index.html复制到src目录下,然后把dist目录下的文件都删除。

  html文件的打包需要用到另一个插件,html-webpack-plugin。我们先安装一下吧:

npm install --save-dev html-webpack-plugin

  安装完成之后,我们需要引入这个插件,所有的插件使用都是这三步,安装(除了webpack集成的可以省去安装这一步),引入,配置。

  然后,我们需要在plugins下配置一下这个插件。代码如下:

new htmlPlugin({
/*压缩文件,removeAttributeQuotes指去掉属性的双引号,目前你随便不用也行*/
    minify:{
        removeAttributeQuotes:true
    },
/*加入hash值,为了避免浏览器缓存js*/
    hash:true,
/*要打包的html文件的路径及名称*/
    template:'./src/index.html'
})

  配置完成,npm run build一下会发现dist目录下已经生成了三个文件。至此我们就学会了打包css,压缩js和打包生成html文件。如果稍微细心一点你会发现,其实webpack主要的作用就在于loader和plugin,也正是如此,webpack才有了它多样化个性化的配置方法。下一篇文章,我们一起学一下如何用webpack来处理图片。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菩提树下的杨过

ActiveMQ笔记(2):基于ZooKeeper的HA方案

activemq官网给出了3种master/slave的HA方案,详见:http://activemq.apache.org/masterslave.html ...

21410
来自专栏黑白安全

缓冲区溢出说明:基础知识

软件中最常见和最古老的安全漏洞之一是缓冲区溢出漏洞。从操作系统到客户端/服务器应用程序和桌面软件的各种软件都会出现缓冲区溢出漏洞。这通常是由于编程错误以及应用程...

1391
来自专栏腾讯云TStack专栏

一个集技术与才华于一身的95后小鲜肉,为你分享rabbitmq集群操作手法

关于作者 ? ? 在rabbitmq集群操作或者搭建的时候,常常会因为对于集群的不熟练而导致各种异常错误,常见的有绑定了浮动ip没有绑定实体ip导致,页面...

1161
来自专栏大大的微笑

Java线程池

       概述:         线程池,从字面含义来看是管理同一组同构工作线程的资源池。线程池与工作队列是密切相关的, 工作队列保存了所有等待执行的...

2336
来自专栏MongoDB中文社区

使用mlaunch和m快速搭建MongoDB测试集群

不知道大家在使用MongoDB的时候有没有遇到突然想要一个集群但是手边又没有的时候?特别是我已经升级到4.0了,突然想要一个3.2的集群怎么办?然后去下载,改配...

1161
来自专栏小明plus

在2018年如何优雅的开发一个typescript语言的npm包?

很多时候,我们可能想要用 typescript 语言来创建一些模块,并提交到 npm 供别人使用,

1.3K10
来自专栏菩提树下的杨过

ActiveMQ笔记(2):基于ZooKeeper的HA方案

activemq官网给出了3种master/slave的HA方案,详见:http://activemq.apache.org/masterslave.html ...

2196
来自专栏云计算教程系列

【基础干货】Linux Shell基础教程

shell,也称为“命令行界面”或“CLI”,是与远程Linux服务器交互的主要方法。shell是一个丰富的界面,用于处理文件,管理系统和编写常见任务脚本。如果...

1504
来自专栏Android机器圈

Java虚拟机和Dalvik虚拟机的区别java虚拟机和Dalvik虚拟机的区别

java虚拟机和Dalvik虚拟机的区别 该文章是本人转载的,觉得写的不错,和大家分享一下 Google于2007年底正式发布了Android SDK, 作为 ...

3779
来自专栏haifeiWu与他朋友们的专栏

I-team博客的gitlab-runner持续集成实践

做为一个略微看过nodejs语法,但又不懂nodejs的攻城狮,搭建hexo环境很是麻烦,要考虑到翻墙、版本兼容等问题。于是乎,博主每换一个电脑,为了能继续发博...

1561

扫码关注云+社区

领取腾讯云代金券