本文承接webpack2教程以及webpack2教程續(xù)之自動編譯，本文所說的項目目錄依舊是webpack2

在上兩篇中，我們搭建了基于webpack的vue開發(fā)環(huán)境，并且啟動了監(jiān)聽文件修改自動打包編譯

現(xiàn)在我們進(jìn)入更重要的一環(huán)，語法規(guī)范，借助于工具ESLint

ESLint

點(diǎn)擊這里，前往ESLint官網(wǎng)

點(diǎn)擊這里，前往ESLint中文網(wǎng)

下面引用自官網(wǎng)

ESLint最初是由Nicholas C. Zakas 于2013年6月創(chuàng)建的開源項目。它的目標(biāo)是提供一個插件化的javascript代碼檢測工具，它是一個以可擴(kuò)展、每條規(guī)則獨(dú)立、不內(nèi)置編碼風(fēng)格為理念編寫的一個lint工具

點(diǎn)擊這里，查看所有規(guī)則列表

所有的規(guī)則默認(rèn)都是禁用的。在配置文件中，使用"extends": "eslint:recommended"來啟用推薦的規(guī)則

安裝和配置

安裝eslint以及對應(yīng)的加載器

eslint-loader

npm i eslint eslint-loader -S

安裝eslint預(yù)定義配置規(guī)則

代碼規(guī)范(eslint-config-standard)

• eslint-config-standard // 依賴下面四個
• eslint-plugin-import
• eslint-plugin-node
• eslint-plugin-promise
• eslint-plugin-standard

npm i eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard -S

安裝可以檢測vue單組件中的script的工具

eslint-plugin-html

npm i eslint-plugin-html -S

安裝檢測結(jié)果格式化工具

eslint-friendly-formatter

npm i eslint-friendly-formatter -S

增加配置文件

在項目根目錄新增文件.eslintrc.js

.eslintrc.js

module.exports = {
  root: true,
  parserOptions: {
    sourceType: 'module'
  },
  extends: 'standard',
  // 支持檢測vue文件中的script
  plugins: [
    'html'
  ],
  // 自定義規(guī)則再次添加
  'rules': {
    // 箭頭函數(shù)只有一個參數(shù)時，可以省略圓括號
    'arrow-parens': 0,
    // 關(guān)閉不必要的轉(zhuǎn)義字符通知
    'no-useless-escape': 0
  }
}

修改webpack的配置文件

配置webpack，對js和vue文件進(jìn)行規(guī)范檢測

module.exports = {
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          cache: true,
          formatter: require('eslint-friendly-formatter')
        }
      },
      {
        enforce: 'pre',
        test: /\.vue$/,
        loader: 'eslint-loader',
        options: {
          cache: true,
          formatter: require('eslint-friendly-formatter')
        }
      }
    ]
  }
}

下面是完整的webpack配置文件

var path = require('path'),
webpack = require('webpack'),
ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  devtool: 'eval',
  entry: {
    main: './src/main.js'
  },
  resolve: {
    // 自動解析確定的擴(kuò)展
    extensions: ['.js', '.vue'],
    // 告訴 webpack 解析模塊時應(yīng)該搜索的目錄
    modules: [
      path.resolve(__dirname, 'src'),
      'node_modules'
    ],
    alias: {
      'src': path.resolve(__dirname, './src')
    }
  },
  output: {
    // 打包輸出的目錄，這里是絕對路徑，必選設(shè)置項
    path: path.resolve(__dirname, './dist'),
    // 資源基礎(chǔ)路徑
    publicPath: '/dist/',
    // 打包輸出的文件名
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          cache: true,
          formatter: require('eslint-friendly-formatter')
        }
      },
      {
        enforce: 'pre',
        test: /\.vue$/,
        loader: 'eslint-loader',
        options: {
          cache: true,
          formatter: require('eslint-friendly-formatter')
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          cacheDirectory: true
        }
      },
      {
        test: /\.css$/,
        /*
        use: [
          'style-loader',
          'css-loader'
        ]
        */
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader?minimize'
        })
      },
      {
        test: /\.less$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            { loader: "css-loader?minimize" },
            { loader: "less-loader" }
          ]
        })
      },
      {
        // 處理圖片文件
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 7186, // inline base64 if <= 7K
          name: 'static/images/[name].[ext]'
        }
      },
      {
        // 處理字體文件
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 7186, // inline base64 if <= 7K
          name: 'static/fonts/[name].[ext]'
        }
      }
    ]
  },
  plugins: [
    // https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    new ExtractTextPlugin({ filename: 'static/css/app.css', allChunks: true })
  ]
}

最后

// 啟動webpack的時候會自動進(jìn)行js規(guī)范檢測
webpack --color --progress