资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/Webpack 4.X 从入门到精通 - module（四）

Webpack 4.X 从入门到精通 - module（四）

harryhappy / 802人阅读

摘要：这就需要把文件多带带拎出来，那需要一个插件来配合才能完成版本需要以上，低版本请使用使用步骤安装在里引入模块写入陈学辉文件目录会放入里写入代替执行命令后可以看到目录里已经多了一个文件夹，这个文件夹里放了一个文件。

概念

在webpack中任何一个东西都称为模块，js就不用说了。一个css文件，一张图片、一个less文件都是一个模块，都能用导入模块的语法（commonjs的require，ES6的import）导入进来。webpack自身只能读懂js类型的文件，其它的都不认识。但是webpack却能编译打包其它类型的文件，像ES6、JSX、less、typeScript等，甚至css、images也是Ok的，而想要编译打包这些文件就需要借助loader

loader就像是一个翻译员，浏览器不是不认识这些东西么?那好交给loader来办，它能把这些东西都翻译成浏览器认识的语言。loader描述了webpack如何处理非js模块，而这些模块想要打包loader必不可少，所以它在webpack里显得异常重要。loader跟插件一样都是模块，想要用它需要先安装它，使用的时候把它放在module.rules参数里，rules翻译过来的意思就是规则，所以也可以认为loader就是一个用来处理不同文件的规则

文件目录

这节课需要用到图片跟样式，所以我要按传统的目录结构来创建目录，目录如下
结构目录

处理CSS 所需loader 
style-loader   //把处理完的css放到style标签里
css-loader     //处理css
安装 
npm i style-loader css-loader -D
index.css文件内容如下： 
#box{
    width: 800px;
    height: 500px;
    border: 5px solid #999;
    color: #00f;
    background: green;
}
index.js文件内容如下： 
import "../css/index.css";    //两个点是找上级目录

通过前面的课程大家要明白，webpack的入口文件是index.js，如果要处理其它类型的文件，就需要在入口文件里把其它类型的文件导入进来，而在webpack中所有文件都是模块，所以可以使用require或者import导入其它文件

package.json文件内容如下： 
{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "build": "webpack --mode production",
    "dev": "webpack-dev-server --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.21.0",
    "webpack": "^4.16.3",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }
}
webpack.package.json文件内容如下： 
const path=require("path");
const HtmlWebpackPlugin=require("html-webpack-plugin");

module.exports={
    entry:{
        index:"./src/js/index.js",
    },
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"[name].bundle.js"
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:"陈学辉",
            template:"./src/template.html",
            filename:"index.html",
        })
    ],
    devServer:{
        host:"localhost",
        port:1573,
        open:true,
    },
    module:{
        rules:[
            {
                test:/.css$/,  //以点开始css结尾的文件
                use:["style-loader","css-loader"]   //顺序不能搞错
            }
        ]
    },
}

执行命令npm run dev后就可以看到效果

说明




rules里的数据类型为对象，每一个loader都是一个对象



test表示loader要处理什么类型的文件，这里用了一个正则去匹配文件类型



use表示要使用哪个loader，它的值是个数组，loader的使用顺序是从后往前



这个loader的意思为，在入口文件里找到.css类型的文件，先拿css-loader去处理成浏览器认识的css，再拿style-loader把处理后的css放在页面的style标签里

css-loader其它配置：https://www.webpackjs.com/loa...
style-loader其它配置：https://www.webpackjs.com/loa...

多带带提取CSS

执行命令npm run build后，在dist目录里只有两个文件，一个index.bundle.js一个index.html文件，并没有css文件，同时打开index.html源码后也没有发现有css的内容。这是因为style-loader的作用，它把css一同打包到了js文件里，js文件在能过DOM动态创建style标签并添加到页面里。所以css的内容已经放到了index.bundle.js里。

这种形式只有当文件内容不多的时候可以使用，如果CSS的内容以及JS的内容非常的多，把两块都打包到一个文件里就会增加文件的体积，用户打开页面的时候下载速度会受影响，同减肥影响用户体验。这就需要把CSS文件多带带拎出来，那需要一个插件来配合loader才能完成

mini-css-extract-plugin

webpack版本需要4.3以上，低版本请使用extract-text-webpack-plugin
使用步骤：
1、安装

npm i mini-css-extract-plugin -D

2、在webpack.config.js里引入模块

const MiniCssExtractPlugin=require("mini-css-extract-plugin");

3、写入plugins

plugins:[
    new HtmlWebpackPlugin({
        title:"陈学辉",
        template:"./src/template.html",
        filename:"index.html",
    }),
    new MiniCssExtractPlugin({
        filename:"css/index.css"    //文件目录会放入output.path里
    }),
]

4、写入loader

module:{
    rules:[
        {
            test:/.css$/,
            use:[MiniCssExtractPlugin.loader,"css-loader"]  //代替style-loader
        }
    ]
}

执行命令npm run build后可以看到dist目录里已经多了一个css文件夹，这个文件夹里放了一个index.css文件。打开index.html源码看到css文件已经通过link标签引入，这些功能都是mini-css-extract-plugin所做的

mini-css-extract-plugin其它配置：https://github.com/webpack-co...

处理图片 所需loader 
file-loader   //解析地址
url-loader    //把图片地址解析成base64
安装 
npm i file-loader url-loader -D
index.css文件内容如下： 
#box{
    width: 800px;
    height: 500px;
    border: 5px solid #999;
    color: #00f;
    /*background: green;*/
    
    background: url(../images/img_01.jpg);  //背景改成了图片
}
index.js文件内容如下： 
import "../css/index.css";    //两个点是找上级目录
webpack.package.json文件内容如下： 
const path=require("path");
const HtmlWebpackPlugin=require("html-webpack-plugin");

module.exports={
    entry:{
        index:"./src/js/index.js",
    },
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"[name].bundle.js"
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:"陈学辉",
            template:"./src/template.html",
            filename:"index.html",
        })
    ],
    devServer:{
        host:"localhost",
        port:1573,
        open:true,
    },
    module:{
        rules:[
            {
                test:/.css$/,  //以点开始css结尾的文件
                use:[
                    //这是一个loader，如果loader需要给参数，就写成对象的形式
                    {
                        loader:MiniCssExtractPlugin.loader, //loader是哪个
                        options:{   //所有的配置参数都要放在这个对象里面
                            publicPath:"../"    //这个表示在css文件里但凡用到地址的地方在其前面加个目录"../"，这个是为了能找到图片
                        }
                    },
                    "css-loader"    //这个loader没有其它选项就直接写
                ]
            },
            {
                test:/.(jpg|png|gif)$/,    //找到三种格式中的任意一种
                use:["file-loader"]
            }
        ]
    },
}

执行命令npm run dev后就可以看到效果

说明




loader既可以写成字符串的形式，也可以写成对象的形式。如果这个loader需要给一些配置，那就需要写成对象的形式，所有的配置放到options里


这里一定要注意第一个loader的use属性，它里面放的是一个个loader，每个loader的值既可以是对象形式，又可以是字符串形式

file-loader其它配置：https://www.webpackjs.com/loa...

在HTML文件中使用图片

index.js文件内容如下：

import "../css/index.css";

import img1 from "../images/img_01.jpg";
import img2 from "../images/img_02.jpg";

const loadImg=img=>{
    const newImg=new Image();
    newImg.onload=()=>document.body.appendChild(newImg);
    newImg.src=img;
};

loadImg(img1);
loadImg(img2);
webpack.package.json文件内容如下： 
const path=require("path");
const HtmlWebpackPlugin=require("html-webpack-plugin");
const MiniCssExtractPlugin=require("mini-css-extract-plugin");

module.exports={
    entry:{
        index:"./src/js/index.js",
    },
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"[name].bundle.js"
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:"陈学辉",
            template:"./src/template.html",
            filename:"index.html",
        }),
        new MiniCssExtractPlugin({
            filename:"css/index.css"
        }),
    ],
    devServer:{
        host:"localhost",
        port:1573,
        open:true,
    },
    module:{
        rules:[
            {
                test:/.css$/,
                use:[
                    {
                        loader:MiniCssExtractPlugin.loader,
                        options:{
                            publicPath:"../"
                        }
                    },
                    "css-loader"
                ]
            },
            {
                test:/.(jpg|png|gif)$/,
                //use:["file-loader"]
                use:[
                    {
                        loader:"url-loader",    //把图片转成base64
                        options:{
                            limit:50*1024,    //小于50k就会转成base64
                            outputPath: "images"
                        }
                    }
                ]
                
                //use:"url-loader?limit=50000&outputPath=images"    //loader的另一种写法，与get请求方式相同
            }
        ]
    },
}

执行命令npm run dev后就可以看到效果

说明




url-loader的作用是把图片转成base64，它同样可以给配置参数



limit的作用是小于这个值就会转base64



只用了url-loader，并没有用file-loader，说明url-loader里已经包含了file-loader的功能



loader还可以写成地址的形式，与get的请求方式相同


url-loader其它配置：https://www.webpackjs.com/loa...

资料下载：https://pan.baidu.com/s/1tgNt...

下一篇：Webpack 4.X 从入门到精通 - loader（五）

超融合服务器 专线服务 前端从入门到精通 云计算从入门到精通 html从入门到精通 python从入门到精通

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96925.html

相关文章

  • Webpack 4.X 从入门到精通 - devServer与mode（三）

    摘要：同时它还提供了自动刷新热更新等功能，使开发变得非常方便。的到来减少了很多的配置，它内置了很多的功能。 上一篇文章里详细介绍了一下插件的用法，这一篇文章接着丰富module.exports里的属性。如今的前端发展已经非常迅速了，伴随而来的是开发模式的转变。现在已经不再是写个静态页面并放在浏览器里打开预览一下了。在实际的开发中会经常需要使用http服务器，比如之前的ajax，想要看到效果就...

    王伟廷 评论0 收藏0

  • Webpack 4.X 从入门到精通 - loader（五）

    摘要：处理与的语法大部分已经被各在浏览器所支持，当然除了万恶的，但是部分新增很遗憾并不被浏览器所支持比如内置对象新增的一些方法和对象等。但是在这里却不需要，是因为的里已经把内容添上了，就不需要创建文件了源码下载下一篇从入门到精通第三方库六 通过上一篇文章相信大家已经明白了loader的概念。那这篇文章继续介绍一些常用loader，并展现它的强大之处 处理less less与sass的功能都一...

    Me_Kun 评论0 收藏0

  • Webpack 4.X 从入门到精通 - 第三方库（六）

    摘要：在开发的时候会时常用到第三方的库或者框架，比如耳熟能详的。使用第三方库在入口文件当中直接导入安装目录结构如图内容如下内容如下陈学辉内容如下这是自带的内容如下内容如下引入后打开页面会看到最后一个标签有了一个绿色的背景。 在开发的时候会时常用到第三方的库或者框架，比如耳熟能详的jquery。借助它们能提高开发效率，但是如何在webpack中使用呢。这篇文章介绍两个东西，如何使用第三方库以及...

    dunizb 评论0 收藏0

  • Webpack入门到精通（1）

    前言 什么是webpack 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。webpack 有哪些功能(代码转换 文件优化 代码分割 模块合并 自...

    wangbinke 评论0 收藏0

  • Webpack入门到精通（1）

    前言 什么是webpack 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 webpack 有哪些功能(代码转换 文件优化 代码分割 模块合并 ...

    SunZhaopeng 评论0 收藏0

发表评论

登陆后可评论

0条评论

harryhappy

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<