webpack.config.js文件配置

 

const path=require('path');

module.export={

   extry:path.join(__dirname,'./src/main.js'),// 打包哪个文件
   output:{// 输出文件相关配置
    path:path.join(__dirname,'./dist'),// 指定打包好的文件，输出到哪个目录中去
    filename:'bundle.js'// 指定输出文件的名称
   },
   devServer:{
    // dev-server也可以直接在package.json文件中配置
    open:true,//自动打开
    port:3000,// 设置启动运行端口
    contentBase:'src',// 指定托管的根目录
    hot:true//启用热更新的第一步
  },
  plugins:[// 配置插件的节点
   new webpack.HotModuleReplacementPlugin(),// new一个热更新的模块
   new htmlWebpackPlugin({// 创建一个在内存中生成HTML页面的插件
   template:path.join(__dirname,'./src/index.html'),// 指定模块页面，将来会根据指定的页面路径，去生成内存中的页面
    filename:'index.html'// 指定生成的页面结果
   
   })
  ],
  module:{// 第三方模块支持
   rules:[
       {test:/\.css$/,use:['style-loader','css-loader']},// 调用loader的时候，是从后往前调用的，
       {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
       {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=7631&name=[hash:8]-[name].[ext]'},
       // 处理图片路径的loader,limit给定的值，是图片的大学，单位是Byte,如果图片大小大于或等于limit值，则不会被转为base64格式的字符串，
       // 如果图片小于给定的limit值，则会被转为base64的字符串，hash值是为了避免图片名相同
       {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},
       {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},// 配置babelrc来转换高级的ws语法，同时需要新建文件.babec来声明
  }
  
}