webpack.config.js 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. const path = require('path');
  2. const htmlPlugin= require('html-webpack-plugin');
  3. const PurifyCSSPlugin = require("purifycss-webpack");
  4. const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
  5. const glob = require('glob');
  6. var website ={
  7. publicPath:"http://localhost:1717/"
  8. }
  9. module.exports={
  10. //入口文件的配置项
  11. entry:{
  12. entry:'./src/index.js'
  13. },
  14. //出口文件的配置项
  15. output:{
  16. //打包的路径文职
  17. path:path.resolve(__dirname,'dist'),
  18. //打包的文件名称
  19. filename:'[name]-bundle.js',
  20. publicPath:website.publicPath
  21. },
  22. //模块:例如解读CSS,图片如何转换,压缩
  23. module:{
  24. rules: [
  25. {
  26. test: /\.css/,
  27. exclude:/node_modules/,
  28. use: ["style-loader","css-loader", "postcss-loader"],
  29. },{
  30. test:/\.(png|jpg|gif)/ ,
  31. use:[{
  32. loader:'url-loader',
  33. options:{
  34. limit:5000,
  35. outputPath:'images/',
  36. }
  37. }]
  38. },{
  39. test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  40. loader: 'url-loader',
  41. options: {
  42. limit: 10000
  43. }
  44. },{
  45. test: /\.(htm|html)$/i,
  46. use:[ 'html-withimg-loader']
  47. },{
  48. test:/\.(jsx|js)$/,
  49. use:{
  50. loader:'babel-loader'
  51. },
  52. exclude:/node_modules/
  53. }
  54. ]
  55. },
  56. //插件,用于生产模版和各项功能
  57. plugins:[
  58. new htmlPlugin({
  59. minify:{
  60. removeAttributeQuotes:true
  61. },
  62. hash:true,
  63. template:'./src/index.html'
  64. }),
  65. new UglifyJsPlugin({
  66. uglifyOptions: {
  67. ie8: true
  68. }
  69. }),
  70. new PurifyCSSPlugin({
  71. // Give paths to parse for rules. These should be absolute!
  72. paths: glob.sync(path.join(__dirname, 'src/*.html')),
  73. })
  74. ],
  75. //配置webpack开发服务功能
  76. devServer:{
  77. //设置基本目录结构
  78. contentBase:path.resolve(__dirname,'dist'),
  79. //服务器的IP地址,可以使用IP也可以使用localhost
  80. host:'localhost',
  81. //服务端压缩是否开启
  82. compress:true,
  83. //配置服务端口号
  84. port:1717
  85. }
  86. }