설명 없음

webpack.config.base.js 3.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. const path = require('path');
  2. const process = require('process');
  3. const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
  4. const TSConfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
  5. const webpack = require('webpack');
  6. const rootPath = process.cwd();
  7. const packageName = require(path.resolve(rootPath, 'package.json'));
  8. const buildEnv = {
  9. rootPath,
  10. packageName,
  11. src: path.resolve(rootPath, './src'),
  12. public: path.resolve(rootPath, './public'),
  13. build: path.resolve(rootPath, './build')
  14. };
  15. const moduleCSSLoader = {
  16. loader: 'css-loader',
  17. options: {
  18. modules: false,
  19. sourceMap: false,
  20. importLoaders: 2,
  21. localIdentName: '[name]__[local]'
  22. }
  23. };
  24. const lessLoader = {
  25. loader: 'less-loader',
  26. options: {
  27. modifyVars: {
  28. 'primary-color': '#5d4bff'
  29. },
  30. javascriptEnabled: true,
  31. paths: [path.resolve(rootPath, './node_modules')]
  32. }
  33. };
  34. const fontsOptions = {
  35. limit: 8192,
  36. mimetype: 'application/font-woff',
  37. name: 'fonts/[name].[ext]'
  38. };
  39. module.exports = {
  40. context: rootPath,
  41. entry: {
  42. index: path.resolve(buildEnv.rootPath, './example/index.ts')
  43. },
  44. resolve: {
  45. alias: {
  46. systemjs: path.resolve(rootPath, './node_modules/systemjs/dist/system-production.js')
  47. },
  48. extensions: ['.ts', '.tsx', '.js', '.jsx', '.css', 'less'],
  49. plugins: [new TSConfigPathsPlugin()]
  50. },
  51. output: {
  52. path: buildEnv.build,
  53. // 设置所有资源的默认公共路径,Webpack 会自动将 import 的资源改写为该路径
  54. publicPath: '/',
  55. filename: '[name].js',
  56. sourceMapFilename: '[name].map',
  57. globalObject: 'this' // 避免全局使用 window
  58. },
  59. module: {
  60. rules: [
  61. {
  62. test: /.*ts-worker.*/,
  63. use: ['workerize-loader', 'ts-loader']
  64. },
  65. {
  66. test: /\.(ts|tsx)?$/,
  67. loader: 'awesome-typescript-loader',
  68. exclude: /node_modules/,
  69. options: {
  70. useBabel: true
  71. }
  72. },
  73. {
  74. test: /\.(png|jpg|gif)$/,
  75. use: [
  76. {
  77. loader: 'url-loader',
  78. options: {
  79. limit: 8192,
  80. name: 'images/[name].[ext]'
  81. }
  82. }
  83. ]
  84. },
  85. {
  86. test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
  87. use: [
  88. {
  89. loader: 'url-loader',
  90. options: fontsOptions
  91. }
  92. ]
  93. },
  94. {
  95. test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
  96. use: [
  97. {
  98. loader: 'file-loader',
  99. options: fontsOptions
  100. }
  101. ]
  102. },
  103. {
  104. test: /\.css$/,
  105. use: ['style-loader', 'css-loader'],
  106. include: [/node_modules/, buildEnv.src]
  107. },
  108. {
  109. test: /\.less$/,
  110. use: ['style-loader', moduleCSSLoader, lessLoader],
  111. exclude: /node_modules/
  112. },
  113. {
  114. test: /\.less$/,
  115. use: ['style-loader', 'css-loader', lessLoader],
  116. include: /node_modules/
  117. },
  118. { test: /\.svg$/, loader: 'svg-inline-loader' }
  119. ]
  120. },
  121. plugins: [
  122. new ForkTsCheckerWebpackPlugin({ checkSyntacticErrors: true, tslint: true }),
  123. new webpack.WatchIgnorePlugin([/less\.d\.ts$/]),
  124. new webpack.IgnorePlugin(/\.js\.map$/)
  125. ],
  126. // 定义非直接引用依赖,使用方式即为 var $ = require("jquery")
  127. externals: {
  128. window: 'window',
  129. jquery: '$'
  130. },
  131. extra: {
  132. moduleCSSLoader,
  133. lessLoader,
  134. buildEnv
  135. }
  136. };