webpack.config.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. const path = require('path');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');
  3. /*const HtmlWebpackInlineSourcePlugin=require('html-webpack-inline-source-plugin');*/
  4. const CleanWebpackPlugin = require('clean-webpack-plugin') // 清空打包目录的插件
  5. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  6. const CopyWebpackPlugin = require('copy-webpack-plugin');
  7. const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
  8. const webpack = require('webpack');
  9. const proxyHost = "http://192.168.2.236:5050";
  10. module.exports = {
  11. entry: {
  12. index: path.resolve(__dirname, 'src/js', 'index.js'),
  13. vendor: 'lodash'// 多个页面所需的公共库文件,防止重复打包带入
  14. },
  15. output: {
  16. publicPath: '/', //这里要放的是静态资源CDN的地址
  17. path: path.resolve(__dirname, 'dist'),
  18. filename: 'js/[name].js'
  19. },
  20. resolve: {
  21. extensions: [".js", ".css", ".json"],
  22. alias: {} //配置别名可以加快webpack查找模块的速度
  23. },
  24. plugins: [// 多入口的html文件用chunks这个参数来区分
  25. new HtmlWebpackPlugin({
  26. title: 'index',
  27. template: path.resolve(__dirname, 'src/html', 'index.html'),
  28. filename: 'index.html',
  29. chunks: ['index', 'vendor', 'common'],
  30. hash: true, //防止缓存
  31. inject: true,
  32. minify: {
  33. removeAttributeQuotes: true, //压缩 去掉引号
  34. removeComments: true, //移除HTML中的注释
  35. collapseWhitespace: true //删除空白符与换行符
  36. }
  37. }),
  38. new CopyWebpackPlugin([
  39. {
  40. from:'src/resource',
  41. to:path.resolve(__dirname,'dist','resource'),
  42. flatten:true, //false会拷贝原始文件夹路径
  43. }
  44. ]),
  45. new MiniCssExtractPlugin({
  46. filename: 'css/[name].css',
  47. chunkFilename: '[id].css'
  48. }),
  49. new webpack.HotModuleReplacementPlugin(),
  50. new CleanWebpackPlugin()
  51. ],
  52. optimization: { //webpack4.x的最新优化配置项,用于提取公共代码
  53. minimizer: [
  54. new UglifyJsPlugin({
  55. uglifyOptions: {
  56. ie8: true,
  57. compress: {
  58. properties: false,
  59. warnings: false
  60. },
  61. mangle: {
  62. screw_ie8: false,
  63. except: ['e']
  64. },
  65. output: {
  66. beautify: true
  67. },
  68. sourceMap: false
  69. }
  70. })
  71. ],
  72. splitChunks: {
  73. cacheGroups: {
  74. commons: {
  75. chunks: "initial",
  76. name: "common",
  77. minChunks: 2,
  78. maxInitialRequests: 5, // The default limit is too small to showcase the effect
  79. minSize: 0, // This is example is too small to create commons chunks
  80. reuseExistingChunk: true // 可设置是否重用该chunk
  81. }
  82. }
  83. }
  84. },
  85. module: {
  86. rules: [
  87. {
  88. test: /.js$/,
  89. enforce: 'post',
  90. loader: 'es3ify-loader'
  91. },
  92. {
  93. test: /\.m?js$/,
  94. exclude: /(node_modules|bower_components)/,
  95. use: {
  96. loader: 'babel-loader',
  97. options: {
  98. presets:['@babel/preset-env']
  99. }
  100. }
  101. },
  102. {
  103. test: /\.less$/,
  104. use: [
  105. {
  106. loader: 'style-loader', // creates style nodes from JS strings
  107. },
  108. {
  109. loader: 'css-loader', // translates CSS into CommonJS
  110. },
  111. {
  112. loader: 'less-loader', // compiles Less to CSS
  113. },
  114. ],
  115. },
  116. {
  117. test:/\.(png|gif|jpg|jpeg|svg|eot|ttf|woff|woff2)$/,
  118. use:[{
  119. loader:'url-loader',
  120. options:{
  121. limit:10240,
  122. esModule:false,
  123. name:'[name]_[hash:6].[ext]',
  124. outputPath:'images/'
  125. }
  126. }],
  127. exclude:/node_modules/
  128. },{
  129. test:/.html$/,
  130. use:'html-withimg-loader'
  131. }
  132. ]
  133. },
  134. // devtool: 'cheap-module-eval-source-map', //开发环境cheap-module-eval-source-map //生产环境cheap-module-source-map
  135. mode: 'development',
  136. devServer: {
  137. contentBase: "./dist", //静态文件根目录
  138. proxy: {
  139. '/api': proxyHost
  140. },
  141. hot: true,
  142. openPage:'index.html'
  143. }
  144. }