webpack.config.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. const path = require('path')
  2. const webpack = require('webpack')
  3. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  4. const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
  5. const bundleOutputDir = './wwwroot/dist'
  6. const VueLoaderPlugin = require('vue-loader/lib/plugin')
  7. module.exports = () => {
  8. // console.log('Building for \x1b[33m%s\x1b[0m', process.env.NODE_ENV)
  9. const isDevBuild = !(process.env.NODE_ENV && process.env.NODE_ENV === 'production')
  10. const extractCSS = new MiniCssExtractPlugin({
  11. filename: 'style.css'
  12. })
  13. return [{
  14. mode: (isDevBuild ? 'development' :'production' ),
  15. stats: { modules: false },
  16. entry: { 'main': './ClientApp/boot-app.js' },
  17. resolve: {
  18. extensions: ['.js', '.vue'],
  19. alias: isDevBuild ? {
  20. 'vue$': 'vue/dist/vue',
  21. 'components': path.resolve(__dirname, './ClientApp/components'),
  22. 'views': path.resolve(__dirname, './ClientApp/views'),
  23. 'utils': path.resolve(__dirname, './ClientApp/utils'),
  24. 'api': path.resolve(__dirname, './ClientApp/store/api'),
  25. '@': path.resolve(__dirname, './ClientApp'),
  26. }: {
  27. 'components': path.resolve(__dirname, './ClientApp/components'),
  28. 'views': path.resolve(__dirname, './ClientApp/views'),
  29. 'utils': path.resolve(__dirname, './ClientApp/utils'),
  30. 'api': path.resolve(__dirname, './ClientApp/store/api'),
  31. '@': path.resolve(__dirname, './ClientApp'),
  32. }
  33. },
  34. output: {
  35. path: path.join(__dirname, bundleOutputDir),
  36. filename: '[name].js',
  37. publicPath: '/dist/'
  38. },
  39. module: {
  40. rules: [
  41. { test: /\.vue$/, include: /ClientApp/, use: 'vue-loader' },
  42. { test: /\.js$/, include: /ClientApp/, use: 'babel-loader' },
  43. { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : [MiniCssExtractPlugin.loader, 'css-loader'] },
  44. { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },
  45. { test: /\.(eot|ttf|woff|woff2)$/, loader: 'file-loader' },
  46. { test: /\.less$/, use: [{ loader: "style-loader"}, {loader: "css-loader"}, {loader: "less-loader", options: { javascriptEnabled: true }}] }
  47. ]
  48. },
  49. plugins: [
  50. new VueLoaderPlugin(),
  51. new webpack.DllReferencePlugin({
  52. context: __dirname,
  53. manifest: require('./wwwroot/dist/vendor-manifest.json')
  54. })
  55. ].concat(isDevBuild ? [
  56. new webpack.SourceMapDevToolPlugin({
  57. filename: '[file].map', // Remove this line if you prefer inline source maps
  58. moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
  59. })
  60. ] : [
  61. extractCSS,
  62. new OptimizeCSSPlugin({
  63. cssProcessorOptions: {
  64. safe: true
  65. }
  66. })
  67. ])
  68. }]
  69. }