webpack.dev.config.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. const webpack = require('webpack')
  2. const path = require('path')
  3. const readEntryFile = require('./webpack.common.js')
  4. const HtmlWebpackPlugin = require('html-webpack-plugin')
  5. const ExtractTextPlugin = require("extract-text-webpack-plugin")
  6. const CleanWebpackPlugin = require('clean-webpack-plugin')
  7. /**
  8. * 默认入口是有vendor的 如果不需要可以去除
  9. */
  10. var entry = {
  11. vendor: ['./src/lib/rem', 'vue']
  12. }
  13. var plugins = [
  14. new webpack.HotModuleReplacementPlugin(),
  15. new CleanWebpackPlugin(['dist']),
  16. new webpack.optimize.CommonsChunkPlugin('vendor'),
  17. new webpack.ProvidePlugin({
  18. // $: "jquery",
  19. // jQuery: "jquery",
  20. // "window.jQuery": "jquery",
  21. _: "underscore"
  22. })
  23. ]
  24. readEntryFile().forEach(function (file) {
  25. plugins.push(new HtmlWebpackPlugin({
  26. filename: file.name + '.html',
  27. template: file.htmlentry,
  28. inject: 'body',
  29. chunksSortMode: 'manual',
  30. chunks: ['vendor', file.name]
  31. }))
  32. entry[file.name] = file.jsentry
  33. }, this);
  34. module.exports = {
  35. entry: entry,
  36. output: {
  37. publicPath: "/",
  38. filename: '[name].js',
  39. path: path.resolve(__dirname, 'dist')
  40. },
  41. module: {
  42. rules: [
  43. {
  44. test: /\.js$/,
  45. loader: 'babel-loader',
  46. exclude: /node_modules/
  47. },
  48. {
  49. test: /\.css$/,
  50. use: [{
  51. loader: "style-loader",
  52. }, {
  53. loader: "css-loader",
  54. options: {
  55. sourceMap: true
  56. }
  57. }]
  58. },
  59. {
  60. test: /\.scss$/,
  61. use: [{
  62. loader: "style-loader",
  63. }, {
  64. loader: "css-loader",
  65. options: {
  66. sourceMap: true
  67. }
  68. }, {
  69. loader: "postcss-loader",
  70. options: {
  71. ctx: {
  72. autoprefixer: true
  73. }, sourceMap: true
  74. }
  75. }, {
  76. loader: "sass-loader",
  77. options: {
  78. sourceMap: true
  79. }
  80. }]
  81. },
  82. // {
  83. // test: require.resolve('jquery'),
  84. // use: [{
  85. // loader: 'expose-loader',
  86. // options: 'jQuery'
  87. // }, {
  88. // loader: 'expose-loader',
  89. // options: '$'
  90. // }]
  91. // },
  92. {
  93. test: /\.html$/,
  94. use: [{
  95. loader: 'html-loader',
  96. options: {
  97. attrs: ['img:src', 'img:data-src'],
  98. minimize: false
  99. }
  100. }]
  101. },
  102. {
  103. test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
  104. loader: 'file-loader',
  105. options: {
  106. name: '[name]_[hash:6].[ext]',
  107. }
  108. },
  109. {
  110. test: /\.tmpl$/,
  111. use: 'ejs-loader'
  112. }
  113. ]
  114. },
  115. devtool: 'inline-source-map',
  116. devServer: {
  117. contentBase: './dist',
  118. host: '127.0.0.1',
  119. hot: true,
  120. disableHostCheck: true
  121. },
  122. plugins: plugins,
  123. resolve: {
  124. alias: {
  125. 'vue$': 'vue/dist/vue.esm.js',
  126. "jsonp": path.resolve(__dirname, './src/lib/jsonp.js')
  127. }
  128. }
  129. }