webpack的loader和插件plugin

loader整体介绍

在webpack看来 一切皆模块，图片，样式文件，js文件.... 。 但是webpack默认只能处理js模块，对于非js的内容，例如css, less文件，图片文件等等 它就需要一些帮手来处理了。这些帮手就是loader。

loader处理css文件

创建.css文件.先搭个简单架子

项目名
├── index.html
├── src
│   ├── css
│   │   ├── public.css
│   │   └── style.css
│   └── js
│       ├── main.js
│       ├── tool.js
│       └── tooles6.js
└── package.json

两个css文件里随便写点div样式,html里面写个div

style.css使用 @import "public.css" 引入public.css文件

算了我还是写一下简单点的代码吧

style.css内容:

@import "public.css";
div {
  border:4px solid #ccc;
  height: 200px;
  margin:50px auto;
}

在.js中导入css

自已的main.js，在 src/js/main.js中，引入css

// nodejs中的模块化
const { updateDom } = require('./tool')
// es6中的模块化
import {log} from './tooles6'
//引入css文件
import '../css/style.css'
updateDom ('app','index.html')
log('test')
});

再次，打包代码，会报错，因为webpack解读不了css文件,需要导入loader来帮忙

安装并使用css-loader

安装

npm i css-loader -D

在配置文件中使用

修改webpack.config.js文件，添加module

const path = require('path')
module.exports = {
  mode: 'development',
  entry:'./src/js/main.js',
  output:{
    path:path.resolve(__dirname, './build'),
    filename:'bundle.js'
  },
  module:{ 
    rules:[ // 规则
      {
        test: /\.css$/, // 正则测试
        use: ['css-loader'] // loader
      }
    ]
  }
}

再次打包

它不会报错。但是，页面上也并没有出现样式的效果。打包之后的文件中并没有包含css代码。

css-loader只是能让你在.js中通过import来引入.css，如果你希望引入的css代码最终以style标签的方式插入到html页面中，则还需要安装一个loader:style-loader

安装

npm i style-loader -D

重新再配置一下

const path = require('path')
module.exports = {
  mode: 'development',
  entry:'./src/js/main.js',
  output:{
    publicPath:'https://www.baidu.com',
    path:path.resolve(__dirname, './build'),
    filename:'bundle.js'
  },
  module:{ // 处理非js模块
    rules:[ // 规则
      {
        test: /\.css$/, // 正则测试
        use: ['style-loader','css-loader']// loader style-loader一定要写在前面
      }
    ]
  }
}

重点: 在有多个loader的情况下，use数组中的loader执行顺序是从右到左的过程

loader处理less文件

如果希望处理less文件，则还需要去安装额外的包。

在src目录的less目录下创建 index.less，

项目名
├── index.html
├── src
│   ├── less
│   │   └── index.less
│   ├── css
│   │   ├── public.css
│   │   └── style.css
│   └── js
│       ├── main.js
│       ├── tool.js
│       └── tooles6.js
└── package.json

随便写点内容:

@import "../css/style.css";

  div {
    color: red;
  }

在.js中引用.less

在src/js/main.js文件中引入less,不要再js里直接引入css了

// nodejs中的模块化
const { updateDom } = require('./tool')
// es6中的模块化
import {log} from './tooles6'
//引入less文件
 import '../less/index.less'
updateDom ('app','index.html')
log('test')

安装包

npm i less-loader less -D

这是两个包

• less 用来把less-->css
• less-loader用来加载less文件

配置模块

module.exports = {
    // 非js模块，在这里处理
    module: {
        rules: [ // 规则
            {
                test: /\.css$/,   // 正则匹配，以.css结尾的文件
                use: ['style-loader','css-loader'] // 匹配成功，使用指定的loader
            },
            {
                test: /\.less$/,     // 正则匹配，以.less结尾的文件
                 use: ['style-loader','css-loader','less-loader'] // 匹配成功，使用指定的loader
             }
        ]
    }
}

图片的使用只要配置一下就可以,不用导包

module: {
    rules: [ 
        // ...省略其他
        {
            test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图片文件
            type: 'asset' // 在导出一个 data URI 和一个单独的文件之间自动选择
        }
    ]
}

plugin整体说明

webpack中除了loader之外，还有一个核心概念：plugin，中文就是插件。它可以用来增强webpack的功能。

html-webpack-plugin

功能：把我们自已写的.html文件复制到指定打包出口目录下，并引入相关的资源代码。

下载安装

命令：npm i html-webpack-plugin -D

在webpack.config.js中，做两件事：

1. 引入插件

    const HtmlWebpackPlugin = require('html-webpack-plugin')
    
   

2. 添加一个plugins配置

const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入nodejs中的核心模块
const path = require('path') 
console.log(path.join(__dirname,'/build'))
module.exports = {
    mode: "production",
    entry: './src/js/main.js', // 入口文件
    output: {
        path: path.join(__dirname,'/build'),
        filename: "bundle.js" // 设置出口文件的名字。默认情况下，它叫main.js
    },
    // 非js模块，在这里处理
    module: {
        rules: [ // 规则
            {
                test: /\.css$/,     // 正则匹配，以.css结尾的文件
                // 如果发现是.css文件，则由如下两个loader来处理
                // 处理的顺序是   从右向左
                // css-loader: 作用是允许.js中引入.css
                // style-loader:作用是在.html上创建style标签，把css代码输入进去

                use: ['style-loader','css-loader'] // 匹配成功，使用指定的loader
            },
            {
                test: /\.less$/,     // 正则匹配，以.less结尾的文件
                // 如果发现是.less文件，则由如下三个loader来处理
                // 处理的顺序是   从右向左
                // less-loader: 作用是加载less文件，会帮你less转成css
                // css-loader: 作用是允许.js中引入.css
                // style-loader:作用是在.html上创建style标签，把css代码输入进去
                
                // use: ['style-loader','css-loader','less-loader'] // 匹配成功，使用指定的loader
                // MiniCssExtractPlugin.loader :把css放在文件中而不是style中
                use: [{loader: MiniCssExtractPlugin.loader},'css-loader','less-loader']
                
            },
            {
                test:/\.(png|svg)$/,// 正则匹配，以.png结尾的文件, 以.svg结尾的文件
                // use:['url-loader'] // 匹配成功，使用指定的loader
                use: [
                    {
                        loader:'url-loader',
                        options:{
                            limit: 3 * 1024 // 限制大小为3k
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({ // 打包输出HTML
            minify: { // 压缩HTML文件
              removeComments: true, // 移除HTML中的注释
              collapseWhitespace: true, // 删除空白符与换行符
              minifyCSS: true// 压缩内联css
            },
            filename: 'index.html',
            template: path.resolve('./index.html') // 指定模块的位置
          })
    ]
}

1. 打包测试

• 它会把template中指定的.html文件复制（压缩）到出口文件夹
• 还会自动附上打包之后.css和 .js代码

clean-webpack-plugin

在生成打包文件之前，把目录清空掉。

安装

npm i clean-webpack-plugin -D

修改配置文件webpack.config.js

1.引入插件

const HtmlWebpackPlugin = require('html-webpack-plugin');

2. 添加一个plugins配置

plugins:[
        new CleanWebpackPlugin()，
        其它...
]

webpack实时打包

工具：[webpack-dev-server]

• npm官网

• 配置手册 注意：

• 项目开发都是对src目录内部的文件进行更新，不要去修改dist打包好的文件

• 现在对src内部的任何文件做修改操作后，都需要重新打包，才可以看到对应效果

步骤

1. 安装

npm i webpack-dev-server  -D

1. 在webpack.config.js中做如下配置\

module.exports = {
    // 其他省略....
  
    // 配置 webpack-dev-server的选项
    devServer: {
        host: '127.0.0.1',  // 配置启动ip地址
        port: 10088,  // 配置端口
        open: true  // 配置是否自动打开浏览器
    }
}

1. 在package.json中补充一个script

"scripts": {
+    "dev": "webpack-dev-server",  
   // 它默认会找webpack.config.js文件
   
   "build": "webpack-dev-server --config  webpack.config.js" 
    // 指定使用webpack.config.js配置文件文件
},

1. 启动命令 现在通过 npm run dev就可以实现 实时打包、实时编译、实时浏览器查看效果了。它会自动打开一个浏览器窗口。
2. 测试

• • 修改.js代码，
  • 修改.css代码，检查是否会重启 注意：

浏览器看到的实时效果是服务器通过“内存”提供的，没有物理文件，也不会生成dist目录