使用Loader

webpack把一切文件看作模块，CSS文件也不例外。

require('./main.css');
const show = require('./show.js');
show('webpack')

但要注意webpack不支持解析css文件，需要使用webpack的Loader机制。

const path = require('path');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
  entry: './main.js',
  mode: "development",
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist')
  },
  module: {
    rules: [
      {
        // 用正则去匹配要用该loader转换的css文件
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
        exclude: /node_modules/
      }
    ]

  },
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

Loader可以看作具有文件转换功能的翻译员，配置里的module.rules数组配置了一组规则，告诉webpack在遇到哪些文件时使用哪些Loader去加载和转换。
上面的配置告诉webpack在遇到.css结尾的文件时先使用css-loader读取css文件，再交给style-loader把css内容注入到JavaScript里。

在配置Loader时需要注意的是：

• use属性的值需要是一个由Loader名称组成的数组，Loader的执行顺序是由后向前的
• 可以通过URL querystring的方式给Loader传入属性，例如：css-loader?minimize
• 也可以通过Object方式给Loader传入属性

  use: [
  'style-loader',
  {
    loader: 'css-loader',
    options: {
      minimize: true
    }
  }
  ]