loader让webpack能够去处理那些非js文件

1.loader是什么

在webpack中默认只能打包js文件，无法实现非.js结尾的模块，这里就需要配置loader让webpack识别非js文件。配置module.具体如下：
image.png
loader执行顺序是从下至上、从右至左。
image.png
这里解析scss文件首先使用sass-loader讲scss转为css，接着css-loader再读取css文件，再由style-loader将css的内容注入到JavaScript里。
在配置Loader时需要注意：

  • use属性的值需要一个由Loader名称组成的数组，Loader的执行顺序是由后到前的；
  • 每个Loader都可以通过URL querystring的方式传入参数，例如 css-loader?minimize 中的minimize告诉css-loader要开启css压缩

    2.exclude和include

    loader中可以通过exclude和include来缩小检查范围，从而提高打包Loader运行速度
    1. {
    2. test: /\.js$/,
    3. // 排除node_modules里js文件的处理
    4. exclude: /node_modules/,
    5. // 只检查src下的js文件
    6. include: path.resolve(__dirname, 'src'),
    7. // 优先执行
    8. enforce: 'pre',
    9. loader: 'eslint-loader'
    10. }

    3.oneOf

    1. {
    2. // 以下loader只会生效一个
    3. oneOf: []
    4. }