webpack.base1.js 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. var path = require('path');
  2. var webpack = require('webpack');
  3. const { VueLoaderPlugin } = require('vue-loader');
  4. const ESLintPlugin = require('eslint-webpack-plugin');
  5. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  6. module.exports = {
  7. module: {
  8. rules: [
  9. {
  10. test: /\.vue$/,
  11. loader: 'vue-loader',
  12. },
  13. {
  14. // 使用babel-loader处理js文件,会将es5以上的语法进行转义(无法转义es6 API)
  15. test: /\.js$/, // 处理后缀名为js的文件
  16. loader: 'babel-loader', // 使用babel-loader进行处理
  17. exclude: /node_modules/, //排除node_modules下的文件
  18. include: [path.resolve(__dirname, 'packages'), path.resolve(__dirname, 'examples')],
  19. // options: {
  20. // presets: ["@babel/env"]
  21. // }
  22. },
  23. {
  24. test: /\.css$/,
  25. use: (process.env.NODE_ENV === 'production') ? [
  26. {
  27. loader: MiniCssExtractPlugin.loader,
  28. options: {
  29. publicPath: '../',
  30. },
  31. },
  32. 'css-loader'] : ['style-loader', 'css-loader'],
  33. },
  34. {
  35. test: /\.(png|jpg|gif|svg)$/,
  36. loader: 'file-loader',
  37. options: {
  38. name: '[name].[ext]?[hash]',
  39. },
  40. },
  41. ],
  42. },
  43. resolve: {
  44. alias: {
  45. '@': path.resolve(__dirname, 'packages'),
  46. },
  47. extensions: ['*', '.js', '.vue', '.json'],
  48. },
  49. performance: {
  50. hints: false,
  51. },
  52. // 不把第三方库打包到bundle中
  53. externals: {
  54. jQuery: 'window.$',
  55. jquery: 'window.$',
  56. $: 'window.$',
  57. bootstrap: 'bootstrap',
  58. dayjs: 'dayjs',
  59. },
  60. plugins: [
  61. new VueLoaderPlugin(),
  62. new ESLintPlugin({
  63. extensions: ['js', 'vue'],
  64. // 自动修复。
  65. // 自从eslint推出--fix命令后,如果觉得eslint格式化规则已经够用的话,其实也可以不用prettier了。
  66. fix: true,
  67. }),
  68. ],
  69. };