和我一起学习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()
]

相关推荐