webpack.base.conf.js 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. // 存放dev和prod配置
  2. const path = require('path');
  3. const webpack = require('webpack');
  4. const HtmlWebpackPlugin = require('html-webpack-plugin');
  5. const VueLoaderPlugin = require('vue-loader/lib/plugin');
  6. // 第三方库单独打包
  7. const AutoDllPlugin = require('autodll-webpack-plugin');
  8. module.exports = {
  9. entry: {
  10. bundle: path.resolve(__dirname, '../src/main.js')
  11. },
  12. output: {
  13. path: path.resolve(__dirname, '../dist'),
  14. filename: '[name].[hash].js'
  15. },
  16. module: {
  17. rules: [
  18. {
  19. test: /\.vue$/,
  20. loader: 'vue-loader'
  21. },
  22. {
  23. test: /\.js$/,
  24. use: ['babel-loader'],
  25. include: path.resolve(__dirname + '/src/'),
  26. exclude: /node_modules/
  27. },
  28. {
  29. test: /\.(png|svg|jpg|gif)$/,
  30. use: [
  31. 'file-loader'
  32. ]
  33. },
  34. {
  35. test: /\.(woff|woff2|eot|ttf|otf)$/,
  36. use: [
  37. 'file-loader'
  38. ]
  39. }
  40. ]
  41. },
  42. plugins: [
  43. new webpack.HashedModuleIdsPlugin(), // 解决vender后面的hash每次都改变
  44. new HtmlWebpackPlugin({
  45. template: path.resolve(__dirname, '../index.html')
  46. }),
  47. new AutoDllPlugin({
  48. inject: true, // will inject the DLL bundle to index.html
  49. debug: true,
  50. filename: '[name]_[hash].js',
  51. path: './dll',
  52. entry: {
  53. vendor: ['vue', 'vue-router', 'vuex', 'element-ui']
  54. }
  55. }), //单独打包第三方库
  56. new VueLoaderPlugin(), // 它的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块
  57. new webpack.optimize.SplitChunksPlugin() // 提取公共代码
  58. ],
  59. resolve: {
  60. extensions: ['.js', '.scss', '.css', '.vue'],// 省去后缀
  61. alias: {
  62. 'vue$': 'vue/dist/vue.esm.js', //配置别名 确保webpack可以找到.vue文件
  63. "@": path.resolve(__dirname, '../src'),
  64. "components": path.resolve(__dirname, '../src/components'),
  65. "utils": path.resolve(__dirname + '../src/utils')
  66. },
  67. modules: ['node_modules']
  68. }
  69. }