Webpack标准配置
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标准配置的更多相关文章
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- webpack之傻瓜式教程
接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快 ...
- 细说前端自动化打包工具--webpack
背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...
- Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
- 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert
使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...
- webpack入门教程之Hello webpack(一)
webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...
- webpack的使用
1.webpack是什么? 打包前端项目的工具(为项目提高逼格的东西). 2.webpack的基本命令 webpack#最基本的启动webpack命令 webpack-w #提供watch方法,实时进 ...
- Webpack 配置摘要
open-browser-webpack-plugin 自动打开浏览器 html-webpack-plugin 通过 JS 生成 HTML webpack.optimize.UglifyJsPlugi ...
- Vue + Webpack + Vue-loader 系列教程(2)相关配置篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...
随机推荐
- ansible使用2-命令
并发与shell # bruce用户身份,-m指定模块名称,默认模块名command,all所有目标主机,也可以指定组名或者主机名 ansible all -m ping -u bruce # bru ...
- 在线图片转base64
function ImgToBase64(url, callback, outputFormat) { // outputFormat 用于指定输出格式的,遵循 MIME 标准 var canvas ...
- 814. Binary Tree Pruning(leetcode) (tree traverse)
https://leetcode.com/contest/weekly-contest-79/problems/binary-tree-pruning/ -- 814 from leetcode tr ...
- 【转载】#330 - Derived Classes Do Not Inherit Constructors
A derived class inherits all of the members of a base class except for its constructors. You must de ...
- IOS http协议 总结
HTTP协议1.面试题常见:聊一下HTTP协议(协议的完整的通信过程) ============================================================ 一.一 ...
- 2017.11.27 用Servlet在JSP中加入验证码
登陆界面 <%@ page pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML ...
- sql学习之创建表空间创建用户并授权
--创建表空间语法:create tablespace [name]create tablespace hclTest--设置参数datafile 'F:/orcale/hclTest'--设置表空间 ...
- 【PC-x86-x64】JDK 32bit与64bit的区别及x64 PC的发展历程【转】
一次偶然分析的机会: 在进行Minecraft也就是所谓的我的世界游戏的时候,在对局域网进行开放的时候,我的是64bit的JDK,而我同学的是32bit的JDK,所以在进行局域网链接的时候就会出现In ...
- git中.gitignore 文件
现在项目的根目录放了 .gitignore 文件,并且git远程仓库的项目根目录已经有了 logs文件夹. 由于每次本地运行项目,都会生成新的log文件,但是我并不想提交logs文件夹里面的内容,所以 ...
- powerdesigner15 反向工程