webpack.base.js 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. const VueLoaderPlugin = require('vue-loader/lib/plugin');
  2. // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  3. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  4. module.exports = {
  5. module: {
  6. rules: [
  7. {
  8. test: /\.vue$/,
  9. loader: 'vue-loader',
  10. options: {
  11. loaders: {
  12. scss: 'style-loader!css-loader!sass-loader'
  13. },
  14. },
  15. },
  16. {
  17. test: /\.css$/,
  18. use:[
  19. {
  20. loader: MiniCssExtractPlugin.loader,
  21. options: {
  22. hmr: process.env.NODE_ENV === 'development',
  23. },
  24. },
  25. 'css-loader',
  26. ]
  27. },
  28. {
  29. test: /\.js$/,
  30. exclude: /node_modules/,
  31. use: {
  32. loader: 'babel-loader',
  33. options: {
  34. presets: [
  35. ['@babel/preset-env']
  36. ]
  37. }
  38. }
  39. },
  40. {
  41. test: /\.(png|jpg|gif|svg|woff|ttf)$/,
  42. loader: 'file-loader',
  43. options: {
  44. name: '[name].[ext]?[hash]'
  45. }
  46. }
  47. ]
  48. },
  49. plugins: [
  50. new MiniCssExtractPlugin({
  51. // Options similar to the same options in webpackOptions.output
  52. // all options are optional
  53. filename: '[name]/main.css',
  54. ignoreOrder: false, // Enable to remove warnings about conflicting order
  55. }),
  56. new VueLoaderPlugin(),
  57. // new BundleAnalyzerPlugin(),
  58. ]
  59. };