Front-end white webpack Learning (Four)

.less files and similar files .scss .css file

less-loader means less need to use plug-ins, the input terminal npm i less less-loader -Dinstallation;
sass-loader means need to use node-sass plug, the input terminal npm i node-sass sass-loader -Dmounting
Introducing inlet js file

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

less-loader configured 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']},

        ]
    }
}

9. Picture format file packaging

Picture format files are packaged need to use file-loader plug-in, terminal input npm i file-loader url-loader -Dto install url-loader
Adding to a container div index.html, set the div background: URL () properties

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

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

webpack.config.js configure url-loader for all the image properties

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'},
        ]
    }
}

Opening the web page will find a review of the elements of the original picture that has been automatically converted to base64 format.

We can be configured url-loader in

//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. Fonts icon file packaging

The icon bootstrap introduced here. First installation npm i bootstrap -D, due to the bootstrap the icon isolated as a separate item after open-iconic 4.x, so the need to install open-iconic project after installing bootstrap npm i https://github.com/iconic/open-iconic.git -D. (Not installed open-iconic not an error, but the icon can not be normal display)
index.html used icon icon

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

main.js introduced

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

webpack.config.js configure

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. Advanced Grammar pack

If you use a high-level syntax js file, for example, the ES6 / 7 grammar, webpack can not be resolved. At this point, we need to use babel-loader.
For example, we use the class keyword in main.js, in which case webpack parsing error.

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

console.log(Person.info);

babel-loader needs by babel-core, the terminal mountingnpm i babel-loader babel-core -D
- Creating .babelrc file in the root directory of the project to configure babel, babel install the relevant plug-ins required for use
- npm i babel-plugin-transform-runtime -D
- npm i babel-preset-env babel-preset-stage-0 -D

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

babel-loader configured 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'},
            //exclude 表示使用babel-loader时排除node_modules目录及其以下的文件
            {test:/\.js/,use:"babel-loader",exclude:/node_modules/}
        ]
    }
}

webpack basically come to an end use

Front-end white webpack Learning (Four)

Guess you like