前端开发系列之Webpack(三):Preloaders

Preloaders

Preloader就是在调用loader之前需要调用的loader, 他不做任何代码的转换,只是进行检查。

JSHint

我们比较常用的一个Preloader就是JSHint, 对我们JS代码进行检查.

接之前代码:

  1. 安装jshint-loader

    1
    npm install jshint jshint-loader --save-dev
  2. 修改 webpack.config.jshint

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    module.exports = {
    entry: './main.js',
    output: {
    filename: 'bundle.js'
    },
    module: {
    preLoaders: [
    {
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'jshint'
    }
    ],

    loaders: [
    {
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel',
    query: {
    presets: [
    'es2015'
    ]
    }
    },
    {
    test: /\.less$/,
    exclude: /node_modules/,
    loader: 'style!css!less'
    },
    {
    test: /\.(jpg|jpeg|png|gif)$/,
    include: /images/,
    loader: 'url'
    }

    ],
    }

    };

  3. 指定JSHint使用es6.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    module: {
    preLoaders: [
    ...
    ],
    loaders: [
    ...
    ]
    },
    jshint: {
    esversion: 6
    }
  4. 删掉hello.js里的一个;号,然后重启webpack-dev-server

1
2
3
4
5
6
7
8
9
10
WARNING in ./hello.js
jshint results in errors
'let' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz). @ line 1 char 1
let hello=(name)=>{

'arrow function syntax (=>)' is only available in ES6 (use 'esversion: 6'). @ line 1 char 16
let hello=(name)=>{

Missing semicolon. @ line 3 char 2
}
Author

王德水

Posted on

2016-07-20

Updated on

2021-01-05

Licensed under

版权:本文版权归作者所有,转载需经作者同意。

Comments