webpack.config.js 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. const path = require('path');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');
  3. module.exports = {
  4. // 模式: development 开发模式 production 生产模式 node 无
  5. mode: 'production',
  6. // 入口文件
  7. // entry: './src/myEntry.js', //单个入口文件
  8. // entry:['./src/a.js','./src/b.js'], //多个入口文件数组写法
  9. // entry:{ //多个入口文件对象写法
  10. // hello:'./src/a.js',
  11. // hi:'./src/b.js'
  12. // },
  13. // 出口文件 : 指定打包后的文件存放位置
  14. output:{
  15. // filename:"[name]-[id].js", //打包后的文件名,[name]表示使用入口文件的名字
  16. filename:"newFile.js",
  17. clean:true, //自动删除旧的打包文件并生成新的打包文件
  18. // path:path.resolve(__dirname,'newOutput'), //path指定打包文件存放的目录,需先使用const引入path模块
  19. },
  20. // 加载器
  21. module:{
  22. rules:[
  23. {
  24. test: /\.css$/,
  25. // use的执行顺序是从后往前的,即先执行css-loader再执行style-loader
  26. use: ["style-loader", "css-loader"],
  27. // use:[
  28. // {loader:"style-loader"},
  29. // {loader:"css-loader"}
  30. // ]
  31. },
  32. {
  33. test: /\.(png|svg|jpg|jpeg|gif)$/i,
  34. type: 'asset/resource',
  35. },
  36. // babel-loader
  37. {
  38. test: /\.m?js$/,
  39. exclude: /(node_modules|bower_components)/,
  40. use: {
  41. loader: 'babel-loader',
  42. options: {
  43. presets: ['@babel/preset-env']
  44. }
  45. }
  46. }
  47. ]
  48. },
  49. plugins: [new HtmlWebpackPlugin({
  50. // 网页的title
  51. // title:"打包工具webpack"
  52. // 打包时的模板文件
  53. template:"./src/demo.html"
  54. })],
  55. // 将源码和代码进行映射
  56. devtool: 'inline-source-map',
  57. }