webpack3最新版本配置研究（二）loader

最新推荐文章于 2023-02-14 14:58:49 发布

Wz1135640

最新推荐文章于 2023-02-14 14:58:49 发布

阅读量527

点赞数

接上面的loader

url-loader
现在来我们来试试加载图片，第一件事情肯定是安装对应的loader，可以将小图片转换成base64，减少请求
npm install url-loader file-loader –save-dev

//修改index.html加两个div，背景图片设置成两张图片，一个小的，一个大的
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
  <div id="parent">
    <div id="a"></div>
    <div id="b"></div>
  </div>
</body>
<script src="bundle.js"></script>
</html>

//index.css增加
#parent{
  color: red;
}

#a{
   background-image: url(img/1.png);
   height:10px;
   width:10px;
}

#b{
   background-image: url(img/avatar.jpg) ;
   background-size:100% 100%;
   height:50px;
   width:50px; 
}

//增加webpack.config.js中的loader
module: {
  rules: [
     {
       test: /\.js|jsx$/, //是一个正则，代表js或者jsx后缀的文件要使用下面的loader
       loader: "babel-loader"
     },
     {
       test: /\.css$/,
       loader: "style-loader!css-loader"//添加对样式表的处理
     },
     {
       test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
       loader: "url-loader?limit=8192&name=build/img/[name].[hash:8].[ext]"
     }
   ]
 }
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

新建一个img文件夹，在里面放置一个小于8k的图片1.png，一个大于8k的图片avatar.jpg，修改好之后输入npm run webpack，可以看到小于8k的图片被转换成了base64，而大的图则通过file-loader直接引入了图片，并加上了hash的值
这里写图片描述

sass-loader
先安装下相关的依赖 npm install –save-dev sass-loader node-sass //需要两个一起装，单装一个node-sass好像会报错

//新建一个scss文件夹新建一个index.scss文件,注意是scss，scss，scss
$length: 50px;
#a{
    width: $length;
    height: $length;
}

//index.js中增加scss的引用
require('./scss/index.scss');

webpack.config.js
module: {
  rules: [
     {
       test: /\.js|jsx$/, //是一个正则，代表js或者jsx后缀的文件要使用下面的loader
       loader: "babel-loader"
     },
     {
       test: /\.scss$/,
       loader: 'style-loader!css-loader!sass-loader'
     },
     {
       test: /\.css$/,
       loader: "style-loader!css-loader"//添加对样式表的处理
     },
     {
       test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
       loader: "url-loader?limit=8192&name=build/img/[name].[hash:8].[ext]"
     }
   ],
 }
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

继续npm run webpack，可以发现scss文件被打包打进去了，宽高40px替换掉了之前的10px

less-loader
npm install less less-loader –save-dev

//新建一个less文件夹新建一个index.less文件
@borderlength: 2px;
#b{
    border: @borderlength solid red;
}

//index.js中引入less文件
require('./less/index.less');

//webpack.cofig
module: {
 rules: [
    {
      test: /\.js|jsx$/, //是一个正则，代表js或者jsx后缀的文件要使用下面的loader
      loader: "babel-loader"
    },
    {
      test: /\.scss$/,
      loader: 'style-loader!css-loader!sass-loader'
    },
    {
      test: /\.less$/,
      loader: 'style-loader!css-loader!less-loader'
    },
    {
      test: /\.css$/,
      loader: "style-loader!css-loader"//添加对样式表的处理
    },
    {
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
      loader: "url-loader?limit=8192&name=build/img/[name].[hash:8].[ext]"
    }
  ],
}
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

json-loader
npm install json-loader –save-dev

// webpack.config.js中增加
module: {
  rules: [
    {test: /\.json$/,loader: 'json'},
  ]
}
 
 1
2
3
4
5
6

postcss
postcss感觉弄起来还是有点复杂的
npm install postcss-loader autoprefixer –save-dev

//新建一个postcss。config.js的配置文件
module.exports = {
    plugins: [
      require('autoprefixer')
    ]
}

//修改webpack.config.js中需要使用postcss的css文件中的loader，以scss为例
//头部因如下
const autoprefixer = require('autoprefixer');

//修改module
{
  test: /\.scss$/,
  // loader: 'style-loader!css-loader!sass-loader!postcss-loader'
  use: [
    { loader: 'style-loader'},
    { loader: 'css-loader'},
    {
      loader: 'postcss-loader',
      options: {
        plugins: () => [autoprefixer(
          { browsers: ['iOS >= 7', 'Android >= 4.1', 
             'last 10 Chrome versions', 'last 10 Firefox versions', 
             'Safari >= 6', 'ie > 8'] 
          }
        )],
      },
    },
    'sass-loader'
  ]
}

//index.scss中随便加点需要兼容的css样式
$radius: 10px;
#b{
    display:flex;
    border-radius: $radius;
    transform: scale(0.8);
}
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

用webpack打包之后生成的头部自动打上了一些兼容的css，是不是很方便呢？
这里写图片描述

webpack.config.js汇总

const autoprefixer = require('autoprefixer');
module.exports = {
  entry: __dirname + "/index.js",
  output:{
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js|jsx$/, //是一个正则，代表js或者jsx后缀的文件要使用下面的loader
        loader: "babel-loader"
      },
      {
        test: /\.scss$/,
        // loader: 'style-loader!css-loader!sass-loader!postcss-loader'
        use: [
          { loader: 'style-loader'},
          { loader: 'css-loader'},
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [autoprefixer(
                { browsers: ['iOS >= 7', 'Android >= 4.1', 'last 10 Chrome versions', 'last 10 Firefox versions', 'Safari >= 6', 'ie > 8'] }
              )],
            },
          },
          'sass-loader'
        ]
      },
      {
        test: /\.less$/,
        loader: 'style-loader!css-loader!less-loader'
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: "url-loader?limit=8192&name=build/img/[name].[hash:8].[ext]"
      }
    ],
  }
}
我有一个还不错的订阅号，里面有很多it学习资料以及最新资讯，可以微信搜索“itheimaCS”关注，等待你的到来，不要迷路了。


 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

Wz1135640

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack3最新版本配置研究（二）loader

接上面的loaderurl-loader 现在来我们来试试加载图片，第一件事情肯定是安装对应的loader，可以将小图片转换成base64，减少请求 npm install url-loader file-loader –save-dev//修改index.html加两个div，背景图片设置成两张图片，一个小的，一个大的html lang="en">head> m
复制链接

扫一扫