let htmlWebpckPlugin= require('html-webpack-plugin');//该组件能将src下面提定的html文件与打包后在js文件打包在一起
module.exports={
mode:'development',
entry:'./src/main.js', //入口文件
output:{
filename:"bundle.js", //出口文件名
path:__dirname+"/dist" //出口文件目录
},
module:{
rules:[
{test:/\.js$/,use:"babel-loader",exclude:/node_modules/},
{test:/\.css$/,use:['style-loader','css-loader']},
{test:/\.less$/,use:'less-loader'},
{test:/\.(jpg|png|gif|jpeg|)$/,use:"url-loader?limit=8192"},
{test:/\.(woff|woff2|eot|ttf|svg)$/,use:'url-loader'},
{test:/\.vue$/,use:"vue-loader"}
]
},
plugins:[
new htmlWebpckPlugin({
template:"./src/index.html",
//filename:"" 设置生成在dist下面的html文件名称
})
],
devServer: { //给webpack-dev-server配置默认的环境
host:"127.0.0.1",
port:8088
},
};

Webpack标准配置的更多相关文章

  1. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. webpack之傻瓜式教程

    接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快 ...

  3. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  4. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  5. 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert

    使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...

  6. webpack入门教程之Hello webpack(一)

    webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...

  7. webpack的使用

    1.webpack是什么? 打包前端项目的工具(为项目提高逼格的东西). 2.webpack的基本命令 webpack#最基本的启动webpack命令 webpack-w #提供watch方法,实时进 ...

  8. Webpack 配置摘要

    open-browser-webpack-plugin 自动打开浏览器 html-webpack-plugin 通过 JS 生成 HTML webpack.optimize.UglifyJsPlugi ...

  9. Vue + Webpack + Vue-loader 系列教程(2)相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

随机推荐

  1. 第五章 存储过程&触发器

    1.前言 2.存储过程和触发器->存储过程 ·理解:是一组SQL命令集合,经过预编译存放在系统中:就像java程序里的方法,可以重复的被调用: 在日常的数据库操作中,会有大量的T-SQL批处理. ...

  2. 项目01-nginx模块

    项目01-nginx模块 1.nginx介绍 nginx是一款高性能web服务器和反向代理服务器,在互联网项目中使用非常频繁,尤其其出色的性能以及轻量级进程占用,已经超过了apache的httpd服务 ...

  3. 如何在VMware ubuntu linux虚拟机中安装VMware tools

    VMware Tools可以实现在主机<->虚拟机之间拷贝文字.文件等功能.本文讲述如何在VMware ubuntu linux虚拟机中安装VMware tools. 测试环境: VMwa ...

  4. Selenium入门6 操作元素,获取元素属性

    取元素的text,属性get_attribute,标签名tag_name 操作元素:send_keys输入,click点击,submit提交,clear清除输入 状态判断:is_display,is_ ...

  5. pc/移动端(手机端)浏览器的直播rtmp hls(适合入门者快速上手)

    一.直播概述 关于直播,大概的过程是:推流端——>源站——>客户端拉流,用媒介播放 客户端所谓的拉流就是一个播放的地址url,会有多种类型的流: 视频直播服务目前支持三种直播协议,分别是R ...

  6. OpenGL进阶演示样例1——动态画线(虚线、实线、颜色、速度等)

            用OpenGL动态绘制线段.事实上非常easy,但到如今为止.网上可參考资料并不多. 于是亲自己主动手写一个函数,方便动态绘制线段.代码例如以下: #include<GL/glu ...

  7. 【洛谷4815】[CCO2014] 狼人游戏(树形DP)

    点此看题面 大致题意: 已知有平民和狼人共\(n\)个,每个平民会指控和保护任何人,每个狼人只会指控平民.保护狼人.告诉你\(m\)对指控与保护的关系,求有\(k\)个狼人的方案总数. 树形\(DP\ ...

  8. BZOJ 4247 挂饰 01背包

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=4247 JOI君有N个装在手机上的挂饰,编号为1...N. JOI君可以将其中的一些装在手机 ...

  9. javascript入门笔记9-认识DOM

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 将HTML代码分 ...

  10. Ubuntu 16.04安装docker(2018年最新)

    参考https://blog.csdn.net/bingzhongdehuoyan/article/details/79411479 http://www.cnblogs.com/lighten/p/ ...