webpack-插件

webpack 有着丰富的插件接口(rich plugin interface)。webpack 自身的多数功能都使用这个插件接口。这个插件接口使 webpack 变得极其灵活。

自动生成html文件

• 安装

yarn add  html-webpack-plugin -D

• webpack.config.js导入

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

• 使用

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'src', 'index.html')
        })
    ],
}

webpack-loaders

webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。

css-loader处理css文件

• 安装

npm install --save-dev style-loader css-loader

• 配置

  module: {
    // loader的规则
    rules: [
      {
        // 正则表达式，用于匹配所有的css文件
        test: /\.css$/,
        // 使用什么样的loader进行解析
        use: [ "style-loader", "css-loader"]
      }
    ]
  },

less-loader处理less文件

• 安装

npm install --save-dev less-loader less

• 配置

{
    // 匹配所有的less文件
    test: /\.less$/,
        use: [ "style-loader", "css-loader", "less-loader"]
}

file-loader处理图片文件

• 安装

npm install --save-dev file-loader

• 配置

{
    // 配置图片加载
    test: /\.(png|jpg|gif)$/,
    use: "file-loader"
}

url-loader处理图片文件

url-loader与file-loader一样，也可以处理图片，但是url-loader可以以base64编码的方式处理图片

• 安装

npm install --save-dev url-loader

• 配置

{
    // 配置图片加载
    test: /\.(png|jpg|gif)$/,
        use: [
            {
                loader: 'url-loader'
            }
        ]
}

• base64的优点

1. 精灵图的作用：减小网络请求
2. base64:减少网络请求  通过京东查看base64编码的图片

• 设置limit参数

{
    // 配置图片加载
    test: /\.(png|jpg|gif)$/,
        use: [
            {
                loader: 'url-loader',
                options: {
                    // 限定文件大小，注意：如果文件超出了大小，会自动调用file-loader，所以安装url-loader通过都要安装file-loader
                    limit: 8192
                }
            }
        ]
}

url-loader处理字体图标文件

处理字体图标文件与图片一模一样

• 配置

{
    // 配置字体图标加载
    test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
        use: [
            {
                loader: 'url-loader',
                options: {
                    // 限定文件大小
                    limit: 819200
                }
            }
        ]
}
           

babel处理高版本的ES语法

介绍

Babel 是一个 JavaScript 编译器。

今天就开始使用下一代 JavaScript 语法吧！

官网

中文网

babel可以把最新版本的语法编译成浏览器能够兼容的代码（ES5）

使用

• 安装

npm install -D babel-loader @babel/core @babel/preset-env

• 配置

{
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
        loader: 'babel-loader'
    }
}