webpack.base.conf.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. "use strict";
  2. const path = require("path");
  3. const utils = require("./utils");
  4. const config = require("../config");
  5. const vueLoaderConfig = require("./vue-loader.conf");
  6. function resolve(dir) {
  7. return path.join(__dirname, "..", dir);
  8. }
  9. const createLintingRule = () => ({
  10. test: /\.(js|vue)$/,
  11. loader: "eslint-loader",
  12. enforce: "pre",
  13. include: [resolve("src"), resolve("test")],
  14. options: {
  15. fix: true,
  16. formatter: require("eslint-friendly-formatter"),
  17. emitWarning: !config.dev.showEslintErrorsInOverlay
  18. }
  19. });
  20. module.exports = {
  21. context: path.resolve(__dirname, "../"),
  22. entry: {
  23. app: "./src/main.js"
  24. },
  25. output: {
  26. path: config.build.assetsRoot,
  27. filename: "[name].js",
  28. publicPath:
  29. process.env.NODE_ENV === "production"
  30. ? config.build.assetsPublicPath
  31. : config.dev.assetsPublicPath
  32. },
  33. resolve: {
  34. extensions: [".js", ".vue", ".json", ".less"],
  35. alias: {
  36. vue$: "vue/dist/vue.esm.js",
  37. "@": resolve("src")
  38. }
  39. },
  40. module: {
  41. rules: [
  42. ...(config.dev.useEslint ? [createLintingRule()] : []),
  43. {
  44. test: /\.vue$/,
  45. loader: "vue-loader",
  46. options: vueLoaderConfig
  47. },
  48. {
  49. test: /\.less$/,
  50. loader: "vue-loader",
  51. options: vueLoaderConfig
  52. },
  53. {
  54. test: /\.js$/,
  55. loader: "babel-loader",
  56. include: [
  57. resolve("src"),
  58. resolve("test"),
  59. resolve("node_modules/webpack-dev-server/client")
  60. ],
  61. options: {//如果有这个设置则不用再添加.babelrc文件进行配置
  62. "babelrc": false,// 不采用.babelrc的配置
  63. "plugins": [
  64. "dynamic-import-webpack"
  65. ]
  66. }
  67. },
  68. {
  69. test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  70. loader: "url-loader",
  71. options: {
  72. limit: 10000,
  73. name: utils.assetsPath("img/[name].[hash:7].[ext]")
  74. }
  75. },
  76. {
  77. test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
  78. loader: "url-loader",
  79. options: {
  80. limit: 10000,
  81. name: utils.assetsPath("media/[name].[hash:7].[ext]")
  82. }
  83. },
  84. {
  85. test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  86. loader: "url-loader",
  87. options: {
  88. limit: 10000,
  89. name: utils.assetsPath("fonts/[name].[hash:7].[ext]")
  90. }
  91. }
  92. ]
  93. },
  94. node: {
  95. // prevent webpack from injecting useless setImmediate polyfill because Vue
  96. // source contains it (although only uses it if it's native).
  97. setImmediate: false,
  98. // prevent webpack from injecting mocks to Node native modules
  99. // that does not make sense for the client
  100. dgram: "empty",
  101. fs: "empty",
  102. net: "empty",
  103. tls: "empty",
  104. child_process: "empty"
  105. }
  106. };