webpack系列——loader详述和插件(plugins)详述

1. loader

loader 用于对模块的源代码进行转换。

首先使用某些加载器之前需要安装它，

npm install --save-dev css-loader
npm install --save-dev ts-loader

然后在webpack.config.js配置文件中如下写：

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

其中test对应正则匹配哪些文件被这个loader加载处理，use表示用哪个loader

2.插件(plugins)

webpack 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！
插件目的在于解决 loader 无法实现的其他事。

记得必须要在一开始require这个插件

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;