@wbi/cli-service/build/webpack.dev.config.js

local service for wb-cli projects

/**
 * Created by jerry.lin-wun on 2019/1/25.
 * 开发时构建的服务器
 */
process.env.NODE_ENV = 'development'

const path = require('path')
const webpack = require('webpack')
const webpackMerge = require('webpack-merge')
const StyleLintPlugin = require('stylelint-webpack-plugin')
const PugLintPlugin = require('puglint-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const Jarvis = require('webpack-jarvis')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
const webpackBaseConfig = require('./webpack.base.config')()
const utils = require('./utils')
const HappyPack = require('happypack')
const os = require('os')
const chalk = require('chalk')
const wbConfig = utils.wbConfig

// 获取本机ip
function getIPAddress () {
  var interfaces = os.networkInterfaces()
  for (let devName in interfaces) {
    let iface = interfaces[devName]
    for (let i = 0; i < iface.length; i++) {
      let alias = iface[i]
      if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
        return alias.address
      }
    }
  }
}

const port = 7438
const myHost = getIPAddress()

// 是否使用eslint-loader
let eslintLoader = [{
  test: /\.js$/,
  include: [utils.resolve('./src')],
  enforce: 'pre', // 编译前检查
  use: ['happypack/loader?id=eslint']
}]
// 使用webpack加速构建eslint
let happypackEslint = [
  new HappyPack({
    id: 'eslint',
    loaders: [{
      loader: 'eslint-loader',
      options: {
        configFile: utils.resolveConfig('./.eslintrc.js'),
        formatter: require('eslint-friendly-formatter') // 默认的错误提示方式
      }
    }]
  })
]
if (wbConfig.closeLint && wbConfig.closeLint.eslint) {
  eslintLoader = []
  happypackEslint = []
}

// 是否使用stylelint
let stylelintPlugin = [
  new StyleLintPlugin({
    context: 'src',
    files: '**/*.scss',
    failOnError: false,
    quiet: true,
    syntax: 'scss',
    config: Object.assign({emitError: true}, require(utils.resolveConfig('./.stylelintrc.js')))
  })
]
if (wbConfig.closeLint && wbConfig.closeLint.stylelint) {
  stylelintPlugin = []
}

// 是否使用puglint
let puglintPlugin = [
  new PugLintPlugin({
    context: 'src',
    files: '**/*.pug',
    config: Object.assign({emitError: true}, require(utils.resolveConfig('./.pug-lintrc')))
  })
]
if (wbConfig.closeLint && wbConfig.closeLint.puglint) {
  puglintPlugin = []
}

// 合并多个配置项 const webpackConfig
module.exports = webpackMerge(webpackBaseConfig, {

  mode: 'development',

  // 在开启监听模式时，才有意义
  watchOptions: {
    // 不监听的文件或文件夹，支持正则匹配
    // 默认为空
    ignored: /node_modules/,
    // 监听到变化发生后会等300ms再去执行动作，防止文件更新太快导致重新编译频率太高
    // 默认为 300ms
    aggregateTimeout: 300,
    // 判断文件是否发生变化是通过不停的去询问系统指定文件有没有变化实现的
    // 默认每秒轮询1000次
    poll: 1000
  },

  entry: [
    path.resolve(__dirname, './dev-client.js'),
    'webpack-hot-middleware/client?reload=true&noInfo=true&path=http://localhost:' + port + '/__webpack_hmr',
    './src/main.js'
  ],

  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: 'assets/css/[name].css',
      chunkFilename: 'assets/css/[name].css'
    }),
    new webpack.HotModuleReplacementPlugin(),
    // 创建指示板，可以在浏览器上查看构建的信息
    // 打开浏览器窗口，输入http://localhost:7440
    new Jarvis({ port: port + 2 }),
    // 项目文件分析，分析统计数据
    new BundleAnalyzerPlugin({
      analyzerMode: 'server',
      analyzerHost: 'localhost',
      analyzerPort: port + 3, // 运行后的端口号
      reportFilename: 'report.html',
      defaultSizes: 'parsed',
      openAnalyzer: false,
      generateStatsFile: false,
      statsFilename: 'stats.json',
      statsOptions: null,
      logLevel: 'silent'
    }),
    // 命令行窗口友好提示
    new FriendlyErrorsWebpackPlugin({
      compilationSuccessInfo: {
        messages: [
          `Your application is running here:\n` +
          `${chalk.gray('---------------------------------------')}\n` +
          `     Local: ${chalk.bold.magenta(`http://localhost:${port}`)}\n` +
          `  External: ${chalk.bold.magenta(`http://${myHost}:${port}`)}\n` +
          `${chalk.gray('---------------------------------------')}`
        ],
        notes: [
          `Other helpers:\n` +
          `${chalk.gray('---------------------------------------')}\n` +
          ` Component: ${chalk.bold.magenta(`http://localhost:${port + 1}`)}\n` +
          ` Dashboard: ${chalk.bold.magenta(`http://localhost:${port + 2}`)}\n` +
          `  Analyzer: ${chalk.bold.magenta(`http://localhost:${port + 3}`)}\n` +
          `${chalk.gray('---------------------------------------')}`
        ]
      },
      onErrors: function (severity, errors) {
        // You can listen to errors transformed and prioritized by the plugin
        // severity can be 'error' or 'warning'
      },
      clearConsole: true,
      // add formatters and transformers (see below)
      additionalFormatters: [],
      additionalTransformers: []
    })
  ].concat(utils.getHtmlPluginsInDevList()).concat(happypackEslint).concat(stylelintPlugin).concat(puglintPlugin),

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'css-hot-loader',
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              ...require(utils.resolveConfig('./postcss.config')),
              sourceMap: true,
            }
          }
        ]
      },
      {
        test: /\.scss$/,
        use: [
          'css-hot-loader',
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              ...require(utils.resolveConfig('./postcss.config')),
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      },
      /*{
        test: /\.(pug|jade)$/,
        exclude: /node_modules/,
        loader: "pug-lint-wb-loader",
        options: Object.assign({
          emitError: true,
        }, require('../.pug-lintrc')),
        enforce: "pre"
      }*/
    ].concat(eslintLoader)
  },

  devtool: 'source-map', // cheap-module-eval-source-map

  devServer: {
    port
  }

})