和我一起学习Webpack4.0（二） —— Webpack核心

一、Loader

1.什么是Loader？

Loader是一种打包方案，webpack不知道除了.js后缀结尾的其他文件该怎么打包，所以要使用Loader来告诉webpack。

要使用Loader首先要进行安装，然后在webpack.config.js里进行配置，类似这样：

npm install url-loader -D

const path = require('path');

module.exports = {
  mode: 'production',
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  modules: {
    rules: [{
      test: /\.png$/,
      use: 'url-loader'
    }]
  }
};

2.图片打包(file-loader, url-loader)

file-loader的作用是将文件进行处理后，移动到打包后的文件夹中。一般用来处理图片文件。

url-loader相当于file-loader的升级版，可以将图片地址用base64的形式返回。

首先安装：

npm install file-loader url-loader -D

配置webpack.config.js：

module: {
  rules: [{
    test: /\.png$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: '[name]-[hash].[ext]',
      outputPath: 'image/'
    }
  }]
}

这个示例是指匹配以.png结尾的文件，使用url-loader， limit 代表小于这个byte的图片将打包为base64并直接插入js代码中，而大于这个值的图片将以文件的形式打包到指定文件夹。 name 配置指的是以什么形式显示打包后的文件夹名，有很多配置项可在官网中查看，[name]是指原文件名，[hash]是哈希值，[ext]是原后缀名。 outputPath 就是打包后的指定位置。

3.样式打包(css-loader, style-loader)

css-loader的作用是分析各个css文件间的关系，然后合并成一个css。

style-loader的作用是将这个处理后的css挂载到页面的head里。

安装：

npm install css-loader style-loader -D

配置webpack.config.js：

module: {
  rules: [{
    test: /\.css$/,
    loader: ['style-loader', 'css-loader']
  }]
}

如果项目中用到sass、less、stylus等css扩展语言，以sass为例，则需要安装sass-loader，node-sass：

npm install sass-loader node-sass -D

配置webpack.config.js：

module: {
  rules: [{
    test: /\.scss$/,
    loader: ['style-loader', 'css-loader', 'sass-loader']
  }]
}

在webpack的配置中，loader是有执行顺序的，从右到左（或从下到上）依次执行，首先由sass-loader将sass转为css，然后css-loader处理css文件间的关系，最后由style-loader挂载到页面中。

4.字体打包(file-loader, url-loader)

字体打包的过程和图片非常类似，只是稍微改一下配置就可以了：

module: {
  rules: [{
    test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
    loader: 'url-loader'
  }]
}

二、Plugins

Plugins可以在webpack运行到某一时刻的时候，帮我们做一些事情。

1.Html-webpack-plugin

我们每次打包的时候，入口的html文件并没有被打包到指定文件夹中，所以我们需要借助这个plugins来帮我们做这件事。

npm install html-webpack-plugin -D

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

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      test: /\.png$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: '[name].[ext]'
      }
    },{
      test: /\.scss$/,
      loader: ['style-loader', 'css-loader', 'sass-loader']
    },{
      test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
      loader: 'url-loader'
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  ]
};

如果指定template就会把原本的html加入一个script标签然后打包，如果不指定这个plugins就会在打包后的文件夹中自动生成一个html文件。

2.clean-webpack-plugin

这个plugin可以在打包前把旧的打包文件夹删除掉。

npm install clean-webpack-plugin -D

plugins: [
  new HtmlWebpackPlugin({
    template: './index.html'
  }),
  new CleanWebpackPlugin()
]