webpack-loader/plugins

webpack-loader/plugins

loader 用于对模块的源代码进行代码转换, 在 import 或"加载"模块时预处理文件。

1. 配置loader的三种方式

1.配置 module.exports -> module -> rules。loader 从右到左地取值/执行; 在下面的示例中，从 sass-loader 开始执行，然后继续执行 css-loader，最后以 style-loader 为结束。

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

2.内联；不推荐使用

3.通过命令行cli传参使用loader；

4.配置中的操作符
!: 将资源中的 loader 分开
?: 传递查询参数 ?key=value&foo=bar 或者 ?{"key":"value","foo":"bar"}

2. webpack Loaders

3. awesome-webpack 列表

2. 配置plugins(webpack.config.js)

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

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
      },
    ],
  },
  plugins: [
    // 用于自定义编译过程中的进度报告
    new webpack.ProgressPlugin(),
    // HtmlWebpackPlugin 以template作为模板，生成一个 HTML 文件，并在其中使用 script 引入一个名为 my-first-webpack.bundle.js 的 JS 文件
    new HtmlWebpackPlugin({ template: './src/index.html' }),
  ],
};