webpack.base.conf.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. const webpack = require('webpack');
  2. const config = require('../package.json');
  3. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  4. const VueLoaderPlugin = require('vue-loader/lib/plugin');
  5. const moment = require('moment');
  6. const ProgressBarPlugin = require('progress-bar-webpack-plugin');
  7. var WebpackBuildNotifierPlugin = require('webpack-build-notifier');
  8. const isDev = process.env.NODE_ENV === 'development';
  9. var test = process.env.NODE_ENV === 'test';
  10. const path = require('path');
  11. const HappyPack = require('happypack');
  12. const os = require('os');
  13. const chalk= require('chalk');
  14. const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
  15. module.exports = {
  16. stats: {
  17. entrypoints: false,
  18. children: false
  19. },
  20. stats: 'errors-only',
  21. resolve: {
  22. extensions: ['.js', '.vue', '.json'],
  23. alias: {
  24. 'vue$': 'vue/dist/vue.esm.js',
  25. }
  26. },
  27. module: {
  28. rules: [
  29. !test ? {
  30. test: /\.(sa|sc|c)ss$/,
  31. use: [
  32. isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
  33. 'css-loader',
  34. 'postcss-loader',
  35. {
  36. loader: 'sass-loader',
  37. options: {
  38. data: `@import "./src/styles/index.scss"; `,
  39. },
  40. }
  41. ],
  42. }:{},
  43. {
  44. test: /\.svg$/,
  45. use: 'raw-loader'
  46. },
  47. {
  48. test: /\.vue$/,
  49. use: [
  50. 'cache-loader',
  51. {
  52. loader: 'vue-loader',
  53. options: {
  54. /* preLoaders: {
  55. js: 'istanbul-instrumenter-loader?esModules=true'
  56. }, */
  57. loaders: {
  58. sass: [isDev ? 'style-loader' : MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader', 'postcss-loader']
  59. }
  60. }
  61. }
  62. ]
  63. },
  64. {
  65. enforce: 'pre',
  66. test: /\.(js|vue)$/,
  67. loader: 'eslint-loader',
  68. exclude: /node_modules/
  69. },
  70. {
  71. test: /\.js$/,
  72. exclude: /node_modules/,
  73. use: ['happypack/loader?id=Babel']
  74. },
  75. {
  76. test: /\.(png|jpg|gif|webp)$/,
  77. loader: 'url-loader',
  78. options: {
  79. limit: 3000,
  80. name: 'img/[name].[ext]',
  81. }
  82. },]
  83. },
  84. plugins: [
  85. new webpack.BannerPlugin({
  86. banner: `NutUI v${config.version} - [filebase], [hash], ${moment().format()}
  87. (c) 2017-2019 JDC
  88. Released under the MIT License.`
  89. }),
  90. new HappyPack({
  91. //用id来标识 happypack处理那里类文件
  92. id: 'Babel',
  93. //如何处理 用法和loader 的配置一样
  94. loaders: [{
  95. loader: 'babel-loader?cacheDirectory=true',
  96. }],
  97. //共享进程池
  98. threadPool: happyThreadPool,
  99. //允许 HappyPack 输出日志
  100. verbose: false,
  101. }),
  102. new VueLoaderPlugin(),
  103. new ProgressBarPlugin({
  104. format: ' build [:bar] ' + chalk.green.bold(':percent') + ' (:elapsed seconds)',
  105. clear: false,
  106. width: 100
  107. }),
  108. new WebpackBuildNotifierPlugin({
  109. title: "NutUI Webpack Build",
  110. suppressSuccess: true
  111. }),
  112. new webpack.HotModuleReplacementPlugin(),
  113. new webpack.NamedModulesPlugin(),
  114. ],
  115. }