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. 利用ASP.NET里自带的站点地图工具制作网站站点地图

    站点地图很方便能快速给我们导航我们要去访问的地址,能按层级关系分门别类,给用户一个很好的用户体验,很好的看到自己当前所在的网站位置 站点地图,又称网站地图,它就是一个页面,上面放置了网站上所有页面的链 ...

  2. Python模块与函数

    python的程序由包(package).模块(module)和函数组成.模块是处理某一类问题的集合,模块由函数和类组成,包是由一系列模块组成的集合.包必须至少包含一个__init__.py文件,该文 ...

  3. 【转载】#336 - Declaring and Using a readonly Field

    You can make a field in a class read-only by using the readonly modifier when the field is declared. ...

  4. less通用pc移动库

    // less 文件 (移动端通用less文件) // 作者 marchen // 时间 2014/9/1 // 协议 MIT // 只考虑webkit内核手机浏览器和火狐内核浏览器 // 自定义le ...

  5. react及flux架构范例Todomvc分析

    react及flux架构范例Todomvc分析 通过分析flux-todomvc源码,学习如何通过react构建web程序,了解编写react应用程序的一般步骤,同时掌握Flux的单向数据流动架构思想 ...

  6. IOS 制作动画代码和 设置控件透明度

    方式1: //animateWithDuration用1秒钟的时间,执行代码 [UIView animateWithDuration:1.0 animations:^{ //存放需要执行的动画代码 s ...

  7. js 去掉指定符号的字符串做法

    //去掉字符串末尾指定符号 function RemoveSymbol(str, symbol) { if (str.charAt(str.length - 1) == symbol) { str = ...

  8. MYSQL 之SET GLOBAL innodb_buffer_pool_size =n

    工作遇到一个情况是索引相同的情况下,mysql服务在linux上运行很快,在windows服务器上运行很慢,版本是V5.7以后得版本,同事查找了下说应该设置 SET GLOBAL innodb_buf ...

  9. Compass Card Sales(模拟)

    Compass Card Sales 时间限制: 3 Sec  内存限制: 128 MB提交: 35  解决: 13[提交] [状态] [讨论版] [命题人:admin] 题目描述 Katla has ...

  10. 探索性数据分析EDA综述

    目录 1. 数据探索的步骤和准备 2. 缺失值处理 为什么需要处理缺失值 Why data has missing values? 缺失值处理的技术 3. 异常值检测和处理 What is an ou ...