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. 梦织未来Windows驱动编程 第03课 驱动的编程规范

    最近根据梦织未来论坛的驱动教程学习了一下Windows下的驱动编程,做个笔记备忘.这是第03课<驱动的编程规范>. 驱动部分包括基本的驱动卸载函数.驱动打开关闭读取写入操作最简单的分发例程 ...

  2. Html : 规范html代码的网站

    html代码的规范也是很重要的,这里推荐一个网站,很好用,仓鼠是经常用的啦! https://htmlformatter.com/ 以上

  3. windows cmd窗口,输出UTF-8格式文件,显示乱码

    本文来自网络,参考文档见文档末尾 想在windows cmd窗口中查看utf-8中文,需要先执行以下步骤 chcp 65001 将CMD窗口切换成UTF-8代码页 在命令行标题栏上点击右键,选择&qu ...

  4. Netbackup:nbu常见错误及故障解决

    Veritas Netbackup 提供了强大的故障响应功能, 能够有效及时的处理 各种备份故障.主要有备份状态码(status) .错误信息.报告信息及调试日志.下面我们主要针对备份状态码讲解下各种 ...

  5. 在使用HTMLTestRunner时,报告为空,错误提示<_io.TextIOWrapper name='<stderr>' mode='w' encoding='utf_8'>

    <_io.TextIOWrapper name='<stderr>' mode='w' encoding='utf_8'> Time Elapsed: 0:00:21.3163 ...

  6. 创建 XXXXXXXX 的配置节处理程序时出错: 请求失败

    今天碰到这个错误,之前的程序在测试的时候都没有问题,同样的程序打包通过QQ传给其他人,在XP下测试也没有问题,我的Win7系统从QQ信箱下载压缩包,解压之后执行程序就会出问题,本来还是考虑自己程序是不 ...

  7. mac home brew install go

    mac利器home brew安装Go 首先你得需要安装home brew和ruby环境(因为home brew依赖ruby) 如果没有请自行到链接安装 准备好之后就开始安装go了 brew updat ...

  8. 使用maven搭建ssm项目配置+tomact

    一.代码自动配置:https://www.cnblogs.com/weibanggang/p/10043201.html 二.手动配置 1.创建好maven项目,在pom.xml配置文件 <!- ...

  9. 【洛谷P1939】 矩阵加速模板

    https://www.luogu.org/problemnew/show/P1939 矩阵快速幂 斐波那契数列 首先看一下斐波那契数列的矩阵快速幂求法: 有一个矩阵1*2的矩阵|f[n-2],f[n ...

  10. 高亮代码 SyntaxHighlighter

    SyntaxHighlighter: http://alexgorbatchev.com/SyntaxHighlighter/download/ demo <!DOCTYPE html PUBL ...