webpack.prod.config.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  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.join(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/global_[contenthash:6].css"
  33. }),
  34. ]
  35. readEntryFile().forEach(function (file) {
  36. plugins.push(new HtmlWebpackPlugin({
  37. filename: file.name + '.html',
  38. template: file.htmlentry,
  39. inject: 'body',
  40. chunksSortMode: 'manual',
  41. chunks: ['vendor', file.name],
  42. }))
  43. entry[file.name] = file.jsentry
  44. }, this);
  45. module.exports = {
  46. entry: entry,
  47. output: {
  48. publicPath: cdn,
  49. filename: 'js/[name]_[chunkhash:6].js',
  50. path: path.resolve(staticPath, '')
  51. },
  52. module: {
  53. rules: [
  54. {
  55. test: /\.vue$/,
  56. loader: 'vue-loader',
  57. exclude: /node_modules/
  58. },
  59. {
  60. test: /\.js$/,
  61. use: [{
  62. loader: 'babel-loader'
  63. }],
  64. exclude: /node_modules/,
  65. },
  66. {
  67. test: /\.css$/,
  68. use: ExtractTextPlugin.extract({
  69. fallback: "style-loader",
  70. use: "css-loader",
  71. publicPath: path.resolve(cdn, './css')
  72. })
  73. },
  74. {
  75. test: /\.scss$/, use: ExtractTextPlugin.extract({
  76. fallback: 'style-loader',
  77. publicPath: path.resolve(cdn, './css'),
  78. use: [{
  79. loader: "css-loader",
  80. }, {
  81. loader: "postcss-loader",
  82. options: {
  83. ident: 'postcss',
  84. plugins: () => [
  85. autoprefixer({
  86. browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 8', 'iOS >= 8', 'Android >= 4'],
  87. }),
  88. postcssSprites({
  89. stylesheetPath: './src/img',
  90. spritePath: path.resolve(staticPath, './img/sprite'),
  91. filterBy: [
  92. function (image) {
  93. if (image.originalUrl.indexOf('?__sprite') === -1) {
  94. return Promise.reject()
  95. }
  96. return Promise.resolve()
  97. }
  98. ]
  99. })
  100. ],
  101. },
  102. }, {
  103. loader: "sass-loader"
  104. }]
  105. })
  106. },
  107. {
  108. test: /\.html$/,
  109. use: [{
  110. loader: 'html-loader',
  111. options: {
  112. attrs: ['img:src', 'img:data-src'],
  113. minimize: false
  114. }
  115. }]
  116. },
  117. {
  118. test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
  119. loader: 'file-loader',
  120. options: {
  121. publicPath: cdn,
  122. outputPath: '/img/',
  123. name(file) {
  124. if (file.indexOf('sprite') === -1)
  125. return '[name]_[hash:6].[ext]'
  126. else
  127. return 'sprite/[name]_[hash:6].[ext]'
  128. },
  129. }
  130. },
  131. {
  132. test: /\.tmpl$/,
  133. use: 'raw-loader'
  134. }
  135. ]
  136. },
  137. // devtool: 'source-map',
  138. plugins: plugins,
  139. resolve: {
  140. alias: {
  141. 'vue$': 'vue/dist/vue.esm.js',
  142. "jsonp": path.resolve(__dirname, './src/lib/jsonp.js')
  143. }
  144. }
  145. }