webpack插件

TypeScript+Webpack环境搭建

webpack 插件系列

构建成功，触发系统通知

webpack-build-notifier插件，使用方法示例

// webpack.config.js
const WebpackBuildNotifierPlugin = require('webpack-build-notifier');

module.exports = {
  // ...
  plugins: [
    new WebpackBuildNotifierPlugin({
      title: "My Project Webpack Build",
      // logo: path.resolve("./img/favicon.png"),
      suppressSuccess: true
    })
  ]
};

构建过程友好日志

friendly-errors-webpack-plugin插件，能够将构建过程中在控制台产生的不需要关心的日志信息清理，并自定义输出构建成功的提示。eg：

// webpack.config.js
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
module.exports = {
  devServer: {
    // ...
    quiet: true
  },
  // ...
  plugins: [
    new FriendlyErrorsWebpackPlugin({
      compilationSuccessInfo: {
        messages: ['You application is running here http://localhost:3000'],
        notes: ['Some additionnal notes to be displayed unpon successful compilation']
      },
      onErrors: (severity, errors) => {
      },
      // should the console be cleared between each compilation?
      // default is true
      clearConsole: true
    }),
  ]
};

loader

typescript loader

awesome-typescript-loader loader,用于处理ts代码。eg：

// webpack.config.js
const { CheckerPlugin } = require('awesome-typescript-loader')
 
module.exports = {
 
  // Currently we need to add '.ts' to the resolve.extensions array.
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  },
 
  // Source maps support ('inline-source-map' also works)
  devtool: 'source-map',
 
  // Add the loader for .ts files.
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'awesome-typescript-loader'
      }
    ]
  },
  plugins: [
      new CheckerPlugin()
  ]
};