前端小白webpack学习（四）

.less文件与.scss文件使用与.css文件相仿

less-loader使用需要借助less插件，终端输入npm i less less-loader -D安装;
sass-loader使用需要借助node-sass插件，终端输入npm i node-sass sass-loader -D安装
入口js文件中引入

import "./css/index.less"
import "./css/index.scss"

webpack.config.js中配置less-loader

module.exports = {
    ...
    module:{
        rules:[
            //loader的顺序不能颠倒，webpack使用loader的顺序是从右到左（从下到上）
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},

        ]
    }
}

9.图片格式文件打包

图片格式文件打包需要借助file-loader插件，终端输入npm i file-loader url-loader -D安装url-loader
给index.html中添加一个div容器，设置div的background:URL()属性

<div id="img"></div>

#img{
    width: 128px;
    height: 128px;
    background: url(../img/圣诞树.png);
}

webpack.config.js中给所有图片属性配置url-loader

module.exports = {
    ...
    module:{
        rules:[
            //loader的顺序不能颠倒，webpack使用loader的顺序是从右到左（从下到上）
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            {test:/\.(jpg|png|bmp|jpeg|gif)$/,use:'url-loader'},
        ]
    }
}

点开网页审查元素会发现原图片已被自动转换成base64格式。

我们可以在url-loader中进行配置

//url-loader 可以接收配置参数 
//limit 参数：若图片大小（单位：字节）大于或等于limit的值，则图片会被转换为base64格式；若图片小于limit的值，则不转换
//name 参数：设置name=[name].[ext]后，打包时将会保留文件原文件名。前面加上[hash:8]则会在原文件名前随机生成8位hash值，防止文件重名。
{test:/\.(jpg|png|bmp|jpeg|gif)$/,use:'url-loader?limit=5106&name=[hash:8]-[name].[ext]'},

10.字体图标文件打包

此处引入bootstrap中的图标。首先安装npm i bootstrap -D，由于bootstrap在4.x之后将icon分离出来作为一个单独项目open-iconic，所以在安装bootstrap之后还需安装open-iconic项目npm i https://github.com/iconic/open-iconic.git -D. （未安装open-iconic也不会报错，但是图标不能正常显示）
index.html中使用icon图标

<span class="oi oi-account-login"></span>
<span class="oi oi-account-logout"></span>

main.js中引入

//通过路径形式引入node_modules中相关的文件，可以直接省略node_modules，直接写包的名字，默认回去node_modules里找
import "bootstrap/dist/css/bootstrap.css"
import "open-iconic/font/css/open-iconic-bootstrap.css"

webpack.config.js中配置

module.exports = {
    ...
    module:{
        rules:[
            //loader的顺序不能颠倒，webpack使用loader的顺序是从右到左（从下到上）
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            {test:/\.(jpg|png|bmp|jpeg|gif)$/,use:'url-loader?limit=5106&name=[hash:8]-[name].[ext]'},
            {test:/\.(ttf|svg|woff|eot|woff2|otf)$/,use:'url-loader'},
        ]
    }
}

11.高级语法打包

如果在js文件中使用了高级语法，例如ES6/7中的语法，webpack则无法解析。此时，我们需要使用babel-loader。
例如，我们在main.js 中使用class关键字，此时webpack解析报错。

class Person {
    static info = {name:"seven",age:150}
}

console.log(Person.info);

babel-loader需要借助babel-core，终端安装npm i babel-loader babel-core -D
- 在项目根目录创建.babelrc文件用来配置babel，同时安装babel需使用的相关插件
- npm i babel-plugin-transform-runtime -D
- npm i babel-preset-env babel-preset-stage-0 -D

{
    "presets": ["env","stage-0"],
    "plugins": ["transform-runtime"]
}

webpack.config.js中配置babel-loader

module.exports = {
    ...
    module:{
        rules:[
            //loader的顺序不能颠倒，webpack使用loader的顺序是从右到左（从下到上）
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            {test:/\.(jpg|png|bmp|jpeg|gif)$/,use:'url-loader?limit=5106&name=[hash:8]-[name].[ext]'},
            {test:/\.(ttf|svg|woff|eot|woff2|otf)$/,use:'url-loader'},
            //exclude 表示使用babel-loader时排除node_modules目录及其以下的文件
            {test:/\.js/,use:"babel-loader",exclude:/node_modules/}
        ]
    }
}

webpack基本使用告一段落

前端小白webpack学习（四）

猜你喜欢