webpack.dev.config.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  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. _: "underscore"
  19. })
  20. ]
  21. readEntryFile().forEach(function (file) {
  22. plugins.push(new HtmlWebpackPlugin({
  23. filename: file.name + '.html',
  24. template: file.htmlentry,
  25. inject: 'body',
  26. chunksSortMode: 'manual',
  27. chunks: ['vendor', file.name]
  28. }))
  29. entry[file.name] = file.jsentry
  30. }, this);
  31. module.exports = {
  32. entry: entry,
  33. output: {
  34. publicPath: "/",
  35. filename: '[name].js',
  36. path: path.resolve(__dirname, 'dist')
  37. },
  38. module: {
  39. rules: [
  40. {
  41. test: /\.vue$/,
  42. loader: 'vue-loader',
  43. exclude: /node_modules/
  44. },
  45. {
  46. test: /\.js$/,
  47. loader: 'babel-loader',
  48. exclude: /node_modules/
  49. },
  50. {
  51. test: /\.css$/,
  52. use: [{
  53. loader: "style-loader",
  54. }, {
  55. loader: "css-loader",
  56. options: {
  57. sourceMap: true
  58. }
  59. }]
  60. },
  61. {
  62. test: /\.scss$/,
  63. use: [{
  64. loader: "style-loader",
  65. }, {
  66. loader: "css-loader",
  67. options: {
  68. sourceMap: true
  69. }
  70. }, {
  71. loader: "postcss-loader",
  72. options: {
  73. ctx: {
  74. autoprefixer: true
  75. }, sourceMap: true
  76. }
  77. }, {
  78. loader: "sass-loader",
  79. options: {
  80. sourceMap: true
  81. }
  82. }]
  83. },
  84. {
  85. test: /\.html$/,
  86. use: [{
  87. loader: 'html-loader',
  88. options: {
  89. attrs: ['img:src', 'img:data-src'],
  90. minimize: false
  91. }
  92. }]
  93. },
  94. {
  95. test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
  96. loader: 'file-loader',
  97. options: {
  98. name: '[name]_[hash:6].[ext]',
  99. }
  100. },
  101. {
  102. test: /\.tmpl$/,
  103. use: 'ejs-loader'
  104. }
  105. ]
  106. },
  107. devtool: 'inline-source-map',
  108. devServer: {
  109. contentBase: './dist',
  110. host: '127.0.0.1',
  111. hot: true,
  112. disableHostCheck: true
  113. },
  114. plugins: plugins,
  115. resolve: {
  116. alias: {
  117. 'vue$': 'vue/dist/vue.esm.js',
  118. "jsonp": path.resolve(__dirname, './src/lib/jsonp.js')
  119. }
  120. }
  121. }