webpack.prod.config.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. const webpack = require('webpack')
  2. const path = require('path')
  3. const HtmlWebpackPlugin = require('html-webpack-plugin') //html插件
  4. const ExtractTextPlugin = require("extract-text-webpack-plugin")//文本插件
  5. const readEntryFile = require('./webpack.common.js')
  6. const autoprefixer = require('autoprefixer')
  7. const postcssSprites = require('postcss-sprites')
  8. const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
  9. const svnpath = '../../../pub' || 'D://fed/pub'//支持相对和绝对地址
  10. const version = ''
  11. const filepath = '/zt2017/miniapplive/'
  12. const staticPath = /:\/\//.test(svnpath) ? path.joiwn(svnpath, filepath, version) : path.join(__dirname, svnpath, filepath, version)//根据相对还是绝对地址拼接成绝对地址
  13. const cdn = ['//pub.dwstatic.com', filepath, version].join('')
  14. /**
  15. * 默认入口是有vendor的 如果不需要可以去除
  16. */
  17. var entry = {
  18. vendor: ['./src/lib/rem', 'vue']
  19. }
  20. var plugins = [
  21. new webpack.optimize.CommonsChunkPlugin('vendor'),
  22. new webpack.optimize.UglifyJsPlugin(),
  23. new webpack.ProvidePlugin({
  24. _: "underscore"
  25. }),
  26. new webpack.DefinePlugin({
  27. 'process.env': {
  28. 'NODE_ENV': JSON.stringify('production')
  29. }
  30. }),
  31. new ExtractTextPlugin({
  32. filename: "css/[name]_[contenthash:6].css",
  33. allChunks:true
  34. }),
  35. ]
  36. readEntryFile().forEach(function (file) {
  37. plugins.push(new HtmlWebpackPlugin({
  38. filename: file.name + '.html',
  39. template: file.htmlentry,
  40. inject: 'body',
  41. chunksSortMode: 'manual',
  42. chunks: ['vendor', file.name]
  43. }))
  44. entry[file.name] = file.jsentry
  45. }, this);
  46. module.exports = {
  47. entry: entry,
  48. output: {
  49. publicPath: cdn,
  50. filename: 'js/[name]_[chunkhash:6].js',
  51. path: path.resolve(staticPath, '')
  52. },
  53. module: {
  54. rules: [
  55. {
  56. test: /\.vue$/,
  57. loader: 'vue-loader',
  58. exclude: /node_modules/
  59. },
  60. {
  61. test: /\.js$/,
  62. use: [{
  63. loader: 'babel-loader'
  64. }],
  65. exclude: /node_modules/,
  66. },
  67. {
  68. test: /\.css$/,
  69. use: ExtractTextPlugin.extract({
  70. fallback: "style-loader",
  71. use: "css-loader",
  72. publicPath: path.resolve(cdn, './css')
  73. })
  74. },
  75. {
  76. test: /\.scss$/, use: ExtractTextPlugin.extract({
  77. fallback: 'style-loader',
  78. publicPath: path.resolve(cdn, './css'),
  79. use: [{
  80. loader: "css-loader",
  81. }, {
  82. loader: "postcss-loader",
  83. options: {
  84. ident: 'postcss',
  85. plugins: () => [
  86. autoprefixer({
  87. browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 8', 'iOS >= 8', 'Android >= 4'],
  88. }),
  89. postcssSprites({
  90. stylesheetPath: './src/img',
  91. spritePath: path.resolve(staticPath, './img/sprite'),
  92. filterBy: [
  93. function (image) {
  94. if (image.originalUrl.indexOf('?__sprite') === -1) {
  95. return Promise.reject()
  96. }
  97. return Promise.resolve()
  98. }
  99. ]
  100. })
  101. ],
  102. },
  103. }, {
  104. loader: "sass-loader"
  105. }]
  106. })
  107. },
  108. {
  109. test: /\.html$/,
  110. use: [{
  111. loader: 'html-loader',
  112. options: {
  113. attrs: ['img:src', 'img:data-src'],
  114. minimize: false
  115. }
  116. }]
  117. },
  118. {
  119. test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
  120. loader: 'file-loader',
  121. options: {
  122. publicPath: cdn,
  123. outputPath: '/img/',
  124. name(file) {
  125. if (file.indexOf('sprite') === -1)
  126. return '[name]_[hash:6].[ext]'
  127. else
  128. return 'sprite/[name]_[hash:6].[ext]'
  129. },
  130. }
  131. },
  132. {
  133. test: /\.tmpl$/,
  134. use: 'raw-loader'
  135. }
  136. ]
  137. },
  138. // devtool: 'source-map',
  139. plugins: plugins,
  140. resolve: {
  141. alias: {
  142. 'vue$': 'vue/dist/vue.esm.js',
  143. "jsonp": path.resolve(__dirname, './src/lib/jsonp.js'),
  144. "clipboard": path.resolve(__dirname, './src/lib/clipboard/clipboard.js'),
  145. "lib": path.resolve(__dirname, './src/lib/library.js'),
  146. "extSdk": path.resolve(__dirname, './src/lib/extSdk/extSdk.js')
  147. }
  148. }
  149. }