前端小白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基本使用告一段落