config.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. /*
  2. * Licensed to the Apache Software Foundation (ASF) under one or more
  3. * contributor license agreements. See the NOTICE file distributed with
  4. * this work for additional information regarding copyright ownership.
  5. * The ASF licenses this file to You under the Apache License, Version 2.0
  6. * (the "License"); you may not use this file except in compliance with
  7. * the License. You may obtain a copy of the License at
  8. *
  9. * http://www.apache.org/licenses/LICENSE-2.0
  10. *
  11. * Unless required by applicable law or agreed to in writing, software
  12. * distributed under the License is distributed on an "AS IS" BASIS,
  13. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14. * See the License for the specific language governing permissions and
  15. * limitations under the License.
  16. */
  17. const path = require('path')
  18. const glob = require('globby')
  19. const webpack = require('webpack')
  20. const VueLoaderPlugin = require('vue-loader/lib/plugin')
  21. const HtmlWebpackPlugin = require('html-webpack-plugin')
  22. const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  23. const isProduction = process.env.NODE_ENV !== 'development'
  24. const resolve = dir => path.join(__dirname, '..', dir)
  25. const assetsDir = resolve('src')
  26. const distDir = resolve('dist')
  27. const viewDir = resolve('src/view')
  28. function moduleName (modules) {
  29. let filename = path.basename(modules)
  30. let parts = filename.split('.')
  31. parts.pop()
  32. filename = parts.join('.')
  33. return path.dirname(modules) + '/' + filename
  34. }
  35. const jsEntry = (() => {
  36. const obj = {}
  37. const files = glob.sync(['js/conf/*/!(_*).js'], { cwd: assetsDir })
  38. files.forEach(val => {
  39. let parts = val.split(/[\\/]/)
  40. parts.shift()
  41. parts.shift()
  42. let modules = parts.join('/')
  43. let entry = moduleName(modules)
  44. obj[entry] = val
  45. })
  46. return obj
  47. })()
  48. const minifierConfig = isProduction ? {
  49. removeComments: true,
  50. removeCommentsFromCDATA: true,
  51. collapseWhitespace: true,
  52. collapseBooleanAttributes: true,
  53. removeRedundantAttributes: true,
  54. useShortDoctype: true,
  55. minifyJS: true,
  56. removeScriptTypeAttributes: true,
  57. maxLineLength: 1024
  58. } : false
  59. const getPageEntry = view => jsEntry[view] ? view : ''
  60. // Redirect output page
  61. const pageRewriter = {
  62. 'view/home/index.*': 'index.html'
  63. }
  64. const isEmpty = o => {
  65. for (let k in o) {
  66. if (o.hasOwnProperty(k)) {
  67. return
  68. }
  69. }
  70. return true
  71. }
  72. const unixPath = v => v.replace(/\\/g, '/')
  73. const rewriterPath = p => {
  74. if (isEmpty(pageRewriter)) {
  75. return
  76. }
  77. for (let k in pageRewriter) {
  78. let regx = new RegExp(k)
  79. if (regx.test(unixPath(p))) {
  80. return pageRewriter[k]
  81. }
  82. }
  83. }
  84. const pages = glob.sync(['*/!(_*).html'], { cwd: viewDir }).map(p => {
  85. let pagePath = `${path.join(viewDir, p)}`
  86. let newPagePath = rewriterPath(pagePath)
  87. let entry = getPageEntry(p.replace('.html', ''))
  88. let chunks = ['common']
  89. if (entry) {
  90. chunks.push(entry)
  91. }
  92. return new HtmlWebpackPlugin({
  93. filename: newPagePath || path.join('view', p),
  94. template: `${path.join('src/view', p)}`,
  95. cache: true,
  96. inject: true,
  97. chunks: chunks,
  98. minify: minifierConfig
  99. })
  100. })
  101. const baseConfig = {
  102. entry: jsEntry,
  103. output: {
  104. path: distDir,
  105. publicPath: '/',
  106. filename: 'js/[name].[chunkhash:7].js'
  107. },
  108. module: {
  109. rules: [
  110. {
  111. test: /\.vue$/,
  112. loader: 'vue-loader',
  113. options: {
  114. hotReload: !isProduction
  115. }
  116. },
  117. {
  118. test: /\.js$/,
  119. exclude: /(node_modules|bower_components)/,
  120. use: [
  121. {
  122. loader: 'babel-loader',
  123. options: {
  124. cacheDirectory: true,
  125. cacheIdentifier: true
  126. }
  127. }
  128. ]
  129. },
  130. {
  131. test: /\.(sa|sc|c)ss$/,
  132. use: [
  133. {
  134. loader: MiniCssExtractPlugin.loader,
  135. options: {
  136. hmr: !isProduction,
  137. },
  138. },
  139. 'css-loader',
  140. {
  141. loader: 'postcss-loader',
  142. options: {
  143. plugins: (loader) => [
  144. require('autoprefixer')({
  145. overrideBrowserslist: [
  146. "Android 4.1",
  147. "iOS 7.1",
  148. "Chrome > 31",
  149. "ff > 31",
  150. "ie >= 8"
  151. ]
  152. }),
  153. require('cssnano')
  154. ]
  155. }
  156. },
  157. 'sass-loader'
  158. ]
  159. },
  160. {
  161. test: /\.(png|jpe?g|gif|svg|cur)(\?.*)?$/,
  162. loader: 'file-loader',
  163. options: {
  164. esModule: false,
  165. name: 'images/[name].[ext]?[hash]'
  166. }
  167. },
  168. {
  169. test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  170. loader: 'url-loader',
  171. options: {
  172. esModule: false,
  173. limit: 10000,
  174. // publicPath: distDir,
  175. name: 'font/[name].[hash:7].[ext]'
  176. }
  177. }
  178. ]
  179. },
  180. resolve: {
  181. modules: [
  182. resolve('node_modules'),
  183. resolve('src'),
  184. resolve('src/js')
  185. ],
  186. alias: {
  187. '@': resolve('src/js'),
  188. '~': resolve('src/lib'),
  189. 'jquery':'jquery/dist/jquery.min.js',
  190. 'jquery-ui': 'jquery-ui'
  191. },
  192. extensions: ['.js', 'json', '.vue', '.scss']
  193. },
  194. plugins: [
  195. new VueLoaderPlugin(),
  196. new webpack.ProvidePlugin({ vue: 'Vue', _: 'lodash',jQuery:"jquery/dist/jquery.min.js",$:"jquery/dist/jquery.min.js" }),
  197. new webpack.DefinePlugin({
  198. PUBLIC_PATH: JSON.stringify(process.env.PUBLIC_PATH ? process.env.PUBLIC_PATH : '')
  199. }),
  200. ...pages
  201. ]
  202. }
  203. module.exports = {
  204. isProduction,
  205. assetsDir,
  206. distDir,
  207. baseConfig
  208. }