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

前面的文章介绍了webpack的devServer以及多入口多出口文件的配置,咱们继续往下学。在开始学习接下来的知识之前,我们先回顾一下,前文提到了webpack的简单配置方法,但是只详细说了下入口

大家好,又见面了,我是你们的朋友全栈君。

  前面的文章介绍了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说明安装成功。

  <span role="heading" aria-level="2">走近webpack(2)--css打包及压缩js

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

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

  <span role="heading" aria-level="2">走近webpack(2)--css打包及压缩js

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

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就可以了。

<span role="heading" aria-level="2">走近webpack(2)--css打包及压缩js

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

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

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

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

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

<span role="heading" aria-level="2">走近webpack(2)--css打包及压缩js

  然后,我们需要在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来处理图片。

  

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/124439.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 动态规划之背包问题及输出背包具体方案[通俗易懂]

    动态规划之背包问题及输出背包具体方案[通俗易懂]题型1:LintCode92.背包问题题目:在n个物品中挑选若干物品装入背包,最多能装多满?假设背包的大小为m,每个物品的大小为A[i]。分析:dp[i][j]:当背包总重量为j且目前有i个物品时,背包最多装满dp[i][j]的空间。      状态转移方程为:dp[i][j]=max{dp[i-1][j-A[i-1]]+A[i-1],dp[i-1][j]},其中dp[i-1][j-A[…

  • ip addr命令作用_ipconfig命令的功能和作用

    ip addr命令作用_ipconfig命令的功能和作用一、ifconfig命令1)配置地址:比如修改eth0网卡的ip为192.168.174.100,子网掩码为255.255.255.0ifconfigeth0192.168.174.100/24使用ifconfig修改ip会直接在内存中生效,重启系统或者重启network服务就丢失。重启服务:Centos6:ser…

  • YOLOv5学习总结(持续更新)「建议收藏」

    YOLOv5学习总结训练效果(持续更新)前言网络结构可视化yolov3yolov4yolov5核心基础内容Mosaic数据增强自适应锚框计算自适应图片缩放首先感谢江大白大佬的研究与分享,贴上链接深入浅出Yolo系列之Yolov5核心基础知识完整讲解将yolov3-v5的变化讲的很清楚,思路很清晰,值得花时间好好从头到尾读一遍。训练效果(持续更新)先贴结果,自己试了组工牌胸牌检测(yolov5s),100个epoch的mAP@.5达到0.95,效果真的不错,检测速度也很快,一张图0.009s(20

  • python装饰器详解_python三层装饰器

    python装饰器详解_python三层装饰器装饰器装饰器放在一个函数开始定义的地方,它就像一顶帽子一样戴在这个函数的头上。和这个函数绑定在一起。在我们调用这个函数的时候,第一件事并不是执行这个函数,而是将这个函数做为参数传入它头顶上这顶帽子,

  • 系统不支持curl

    系统不支持curl解决安装pinphp时出现的“系统不支持curl!”今天在本机安装phppin开源程序时,提示“系统不支持curl!”错误。由于我本机是UBUNTU系统,所以直接通过apt-get进行安装。sudo

  • java 遍历map集合_Java遍历Map对象的四种方式

    关于java中遍历map具体哪四种方式,请看下文详解吧。方式一:这是最常见的并且在大多数情况下也是最可取的遍历方式。在键值都需要时使用。Mapmap=newHashMap();for(Map.Entryentry:map.entrySet()){System.out.println(“Key=”+entry.getKey()+”,Value=”+entry.g…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号