base.js 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
  1. const { semver, loadModule } = require('@vue/cli-shared-utils')
  2. module.exports = (api, options) => {
  3. api.chainWebpack(webpackConfig => {
  4. const isLegacyBundle = process.env.VUE_CLI_MODERN_MODE && !process.env.VUE_CLI_MODERN_BUILD
  5. const resolveLocal = require('../util/resolveLocal')
  6. const getAssetPath = require('../util/getAssetPath')
  7. const inlineLimit = 4096
  8. const genAssetSubPath = dir => {
  9. return getAssetPath(
  10. options,
  11. `${dir}/[name]${options.filenameHashing ? '.[hash:8]' : ''}.[ext]`
  12. )
  13. }
  14. const genUrlLoaderOptions = dir => {
  15. return {
  16. limit: inlineLimit,
  17. // use explicit fallback to avoid regression in url-loader>=1.1.0
  18. fallback: {
  19. loader: require.resolve('file-loader'),
  20. options: {
  21. name: genAssetSubPath(dir)
  22. }
  23. }
  24. }
  25. }
  26. webpackConfig
  27. .mode('development')
  28. .context(api.service.context)
  29. .entry('app')
  30. .add('./src/main.js')
  31. .end()
  32. .output
  33. .path(api.resolve(options.outputDir))
  34. .filename(isLegacyBundle ? '[name]-legacy.js' : '[name].js')
  35. .publicPath(options.publicPath)
  36. webpackConfig.resolve
  37. // This plugin can be removed once we switch to Webpack 6
  38. .plugin('pnp')
  39. .use({ ...require('pnp-webpack-plugin') })
  40. .end()
  41. .extensions
  42. .merge(['.mjs', '.js', '.jsx', '.vue', '.json', '.wasm'])
  43. .end()
  44. .modules
  45. .add('node_modules')
  46. .add(api.resolve('node_modules'))
  47. .add(resolveLocal('node_modules'))
  48. .end()
  49. .alias
  50. .set('@', api.resolve('src'))
  51. webpackConfig.resolveLoader
  52. .plugin('pnp-loaders')
  53. .use({ ...require('pnp-webpack-plugin').topLevelLoader })
  54. .end()
  55. .modules
  56. .add('node_modules')
  57. .add(api.resolve('node_modules'))
  58. .add(resolveLocal('node_modules'))
  59. webpackConfig.module
  60. .noParse(/^(vue|vue-router|vuex|vuex-router-sync)$/)
  61. webpackConfig.module
  62. .rule('mjs')
  63. .test(/\.mjs$/)
  64. .include
  65. .add(/node_modules/)
  66. .end()
  67. .type('javascript/auto')
  68. // js is handled by cli-plugin-babel ---------------------------------------
  69. // vue-loader --------------------------------------------------------------
  70. // try to load vue in the project
  71. // fallback to peer vue package in the instant prototyping environment
  72. const vue = loadModule('vue', api.service.context) || loadModule('vue', __dirname)
  73. if (vue && semver.major(vue.version) === 2) {
  74. // for Vue 2 projects
  75. const partialIdentifier = {
  76. 'vue-loader': require('vue-loader/package.json').version,
  77. '@vue/component-compiler-utils': require('@vue/component-compiler-utils/package.json').version
  78. }
  79. try {
  80. partialIdentifier['vue-template-compiler'] = require('vue-template-compiler/package.json').version
  81. } catch (e) {
  82. // For Vue 2.7 projects, `vue-template-compiler` is not required
  83. }
  84. const vueLoaderCacheConfig = api.genCacheConfig('vue-loader', partialIdentifier)
  85. webpackConfig.resolve
  86. .alias
  87. .set(
  88. 'vue$',
  89. options.runtimeCompiler
  90. ? 'vue/dist/vue.esm.js'
  91. : 'vue/dist/vue.runtime.esm.js'
  92. )
  93. webpackConfig.module
  94. .rule('vue')
  95. .test(/\.vue$/)
  96. .use('cache-loader')
  97. .loader(require.resolve('cache-loader'))
  98. .options(vueLoaderCacheConfig)
  99. .end()
  100. .use('vue-loader')
  101. .loader(require.resolve('vue-loader'))
  102. .options(Object.assign({
  103. compilerOptions: {
  104. whitespace: 'condense'
  105. }
  106. }, vueLoaderCacheConfig))
  107. webpackConfig
  108. .plugin('vue-loader')
  109. .use(require('vue-loader').VueLoaderPlugin)
  110. } else if (vue && semver.major(vue.version) === 3) {
  111. // for Vue 3 projects
  112. const vueLoaderCacheConfig = api.genCacheConfig('vue-loader', {
  113. 'vue-loader': require('vue-loader-v16/package.json').version,
  114. '@vue/compiler-sfc': require('@vue/compiler-sfc/package.json').version
  115. })
  116. webpackConfig.resolve
  117. .alias
  118. .set(
  119. 'vue$',
  120. options.runtimeCompiler
  121. ? 'vue/dist/vue.esm-bundler.js'
  122. : 'vue/dist/vue.runtime.esm-bundler.js'
  123. )
  124. webpackConfig.module
  125. .rule('vue')
  126. .test(/\.vue$/)
  127. .use('cache-loader')
  128. .loader(require.resolve('cache-loader'))
  129. .options(vueLoaderCacheConfig)
  130. .end()
  131. .use('vue-loader')
  132. .loader(require.resolve('vue-loader-v16'))
  133. .options({
  134. ...vueLoaderCacheConfig,
  135. babelParserPlugins: ['jsx', 'classProperties', 'decorators-legacy']
  136. })
  137. .end()
  138. .end()
  139. webpackConfig
  140. .plugin('vue-loader')
  141. .use(require('vue-loader-v16').VueLoaderPlugin)
  142. // feature flags <http://link.vuejs.org/feature-flags>
  143. webpackConfig
  144. .plugin('feature-flags')
  145. .use(require('webpack').DefinePlugin, [{
  146. __VUE_OPTIONS_API__: 'true',
  147. __VUE_PROD_DEVTOOLS__: 'false'
  148. }])
  149. }
  150. // static assets -----------------------------------------------------------
  151. webpackConfig.module
  152. .rule('images')
  153. .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
  154. .use('url-loader')
  155. .loader(require.resolve('url-loader'))
  156. .options(genUrlLoaderOptions('img'))
  157. // do not base64-inline SVGs.
  158. // https://github.com/facebookincubator/create-react-app/pull/1180
  159. webpackConfig.module
  160. .rule('svg')
  161. .test(/\.(svg)(\?.*)?$/)
  162. .use('file-loader')
  163. .loader(require.resolve('file-loader'))
  164. .options({
  165. name: genAssetSubPath('img')
  166. })
  167. webpackConfig.module
  168. .rule('media')
  169. .test(/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/)
  170. .use('url-loader')
  171. .loader(require.resolve('url-loader'))
  172. .options(genUrlLoaderOptions('media'))
  173. webpackConfig.module
  174. .rule('fonts')
  175. .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/i)
  176. .use('url-loader')
  177. .loader(require.resolve('url-loader'))
  178. .options(genUrlLoaderOptions('fonts'))
  179. // Other common pre-processors ---------------------------------------------
  180. const maybeResolve = name => {
  181. try {
  182. return require.resolve(name)
  183. } catch (error) {
  184. return name
  185. }
  186. }
  187. webpackConfig.module
  188. .rule('pug')
  189. .test(/\.pug$/)
  190. .oneOf('pug-vue')
  191. .resourceQuery(/vue/)
  192. .use('pug-plain-loader')
  193. .loader(maybeResolve('pug-plain-loader'))
  194. .end()
  195. .end()
  196. .oneOf('pug-template')
  197. .use('raw')
  198. .loader(maybeResolve('raw-loader'))
  199. .end()
  200. .use('pug-plain-loader')
  201. .loader(maybeResolve('pug-plain-loader'))
  202. .end()
  203. .end()
  204. // shims
  205. webpackConfig.node
  206. .merge({
  207. // prevent webpack from injecting useless setImmediate polyfill because Vue
  208. // source contains it (although only uses it if it's native).
  209. setImmediate: false,
  210. // process is injected via DefinePlugin, although some 3rd party
  211. // libraries may require a mock to work properly (#934)
  212. process: 'mock',
  213. // prevent webpack from injecting mocks to Node native modules
  214. // that does not make sense for the client
  215. dgram: 'empty',
  216. fs: 'empty',
  217. net: 'empty',
  218. tls: 'empty',
  219. child_process: 'empty'
  220. })
  221. const resolveClientEnv = require('../util/resolveClientEnv')
  222. webpackConfig
  223. .plugin('define')
  224. .use(require('webpack').DefinePlugin, [
  225. resolveClientEnv(options)
  226. ])
  227. webpackConfig
  228. .plugin('case-sensitive-paths')
  229. .use(require('case-sensitive-paths-webpack-plugin'))
  230. // friendly error plugin displays very confusing errors when webpack
  231. // fails to resolve a loader, so we provide custom handlers to improve it
  232. const { transformer, formatter } = require('../util/resolveLoaderError')
  233. webpackConfig
  234. .plugin('friendly-errors')
  235. .use(require('@soda/friendly-errors-webpack-plugin'), [{
  236. additionalTransformers: [transformer],
  237. additionalFormatters: [formatter]
  238. }])
  239. const TerserPlugin = require('terser-webpack-plugin')
  240. const terserOptions = require('./terserOptions')
  241. webpackConfig.optimization
  242. .minimizer('terser')
  243. .use(TerserPlugin, [terserOptions(options)])
  244. })
  245. }