webpack详细介绍以及配置文件属性!
1、webpack简单介绍
(1)webpack是一个用于实现前端模块化开发工具,可帮助我们自动打包编译成浏览器能够识别的代码 ;同时支持commonjs规范 以及es6的import规范; 同时具备各种常见语言编译(需要安装插件和loader)等功能。
(2)在使用webpack时 需要使用配置文件 ,名字如下: webpack.config.js
(3)安装 npm i webpack@3.11.0 -g,需要安装的本地web服务器 webpack-dev-server 版本号为: 2.9.7,在webpack.config.js 文件中对devServer属性进行配置,然后运行命令 webpack-dev-server --inline 启动即可,注意 webpack 和webpack-dev-server 需要全局安装
(4)webpack 配置:入口、出口、规则、插件
(5)在使用html-webpack-plugin 时 由于该模块依赖于webpack, 所以 在项目本地还需要安装一个webpack, 版本同样时3.11.0
(6) 命令 webpack-dev-server --inline 的作用仅为在本地预览开发效果, 本身并不包含编译的功能 ,如果需要将开发完成的代码上线 需要执行webpack 才能将代码编译到dist目录当中
(7)提取样式代码到单独的文件中
第一步 安装提取器 extract-text-webpack-plugin 第二步 配置loader loader:Ext.extract("xxx-loader") 第三步 配置输出文件名 plugins : [new Ext("xxx.css")]
(8)__filename变量:node.js中,在任何模块文件内部,可以使用__filename变量获取当前模块文件的带有完整绝对路径的文件名。
__dirname :获得当前文件所在目录的完整目录名
2、配置文件属性
3、react配置webpack文件
webpack是一个用于实现前端模块化开发工具 可帮助我们自动打包编译成浏览器能够识别的代码
同时支持commonjs规范 以及es6的import规范
同时具备各种常见语言编译(需要安装插件和loader)等功能
在使用webpack时 需要使用配置文件
名字如下: webpack.config.js
1 安装 : 全局安装
推荐使用版本: 3.11.0
npm i webpack@3.11.0 -g
运行命令
webpack
配置文件属性
entry : 配置入口文件
output : {
path : "", //输出路径
filename : "" //输出文件名
},
devtool : "source-map" , //开启资源地图模式
devServer : { //webpack-dev-server 服务相关配置
contentBase : "",//服务器根目录,
port : 3000,//端口号,
inline : true,//自动刷新,
proxy : { //配置服务器代理
"pathname" : {
target : "目标服务器地址"
}
}
},
module : {
rules : [ //loader相关配置
{
test: xxx,// 正则对象,匹配相应文件
exclude : yyy,// 正则对象,过滤掉不需要编译的部分
loader : "", //需要使用到的loader
}
]
},
plugins : [ //配置各种插件
]
}
常见插件用法
全局变量:
let webpack = require("webpack")
plugins : [
new webpack.ProvidePlugin({
React : "react"
})
]
css文件提取
let Ext = require("extract-text-webpack-plugin")
loader配置:
{test:/\.css$/,loader:Ext.extract("css-loader")}
plugins : [
new Ext("app.css")
]
html文件自动复制
let Hwp = require("html-webpack-plugin")
plugins : [
new Hwp({
template : "index.html" ,//源html文件路径
filename : "index.html",//自动输出到output所指向的目录
inject : true , //自动引入所需要的标签 比如link 比如script
})
]
webpack详细介绍以及配置文件属性!的更多相关文章
- [webpack] webpack-dev-server介绍及配置
webpack-dev-server是webpack官方提供的一个小型Express服务器.使用它可以为webpack打包生成的资源文件提供web服务.webpack-dev-server官方文档 w ...
- iptables的详细介绍及配置方法*
Firewall(防火墙):组件,工作在网络边缘(主机边缘),对进出网络数据包基于一定的规则检查,并在匹配某规则时由规则定义的处理进行处理的一组功能的组件. 防火墙类型:根据工作的层次的不同来划分,常 ...
- webpack详细配置解析
阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过:如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本 ...
- webpack的详细介绍和使用
// 一个常见的`webpack`配置文件 const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-we ...
- linux配置网卡IP地址命令详细介绍及一些常用网络配置命令
linux配置网卡IP地址命令详细介绍及一些常用网络配置命令2010-- 个评论 收藏 我要投稿 Linux命令行下配置IP地址不像图形界面下那么方 便,完全需要我们手动配置,下面就给大家介绍几种配置 ...
- 网卡配置和DNS配置,手动挂在nas存储的共享目录,网络相关其它操作命令,修改防火墙中的端口配置,resolv.conf配置详细介绍和网卡信息配置详细介绍
1. 网卡配置和DNS配置 若想服务器能够发邮件,需要让部署的服务器能够访问到外网环境.若部署的服务器访问不到外网,通过ping www.baidu.com的方式执行的时候,会出现以下问题: &q ...
- vue对比其他框架详细介绍
vue对比其他框架详细介绍 对比其他框架 — Vue.jshttps://cn.vuejs.org/v2/guide/comparison.html React React 和 Vue 有许多相似之处 ...
- php CGI、Fastcgi、PHP-FPM的详细介绍与之间的关系
以下PHP CGI.Fastcgi.PHP-FPM的一些信息归纳和汇总----->详细介绍与之间的关系 一:CGI是干嘛的?CGI是为了保证web server传递过来的数据是标准格式的 web ...
- 图解MySQL5.5详细安装与配置过程
MySQL是一个开源的关系型数据库管理系统,原由瑞典MySQL AB公司开发,目前属于Oracle公司旗下.MySQL是目前世界上开源数据库中最受欢迎的产品之一,是应用最为广泛的开源数据库.MySQL ...
随机推荐
- linux(02)基础shell命令
Linux(02)之shell命令 一,Linux命令行的组成结构 在我们的linux启动,登陆成功之后会显示: 这就是linux的命令行的组成结构 二,常见命令 1,Linux系统命令操作语法格式 ...
- 201871010109-胡欢欢《面向对象程序设计(java)》第6-7周学习总结
实验六 继承定义与使用 实验时间 2019-9-29 第一部分:理论部分. 1.继承:已有类来构建新类的一种机制.档定义了一个新类继承另一个类时,这个新类就继承了这个类的方法和域,同时在新类中添加新的 ...
- webapi跨域实现(CROS、JSONP)
CROS: /// <summary> /// 支持WebAPI服务器端跨域 /// </summary> public class ServerCrossDomainAttr ...
- 三层交换机RIP动态路由实验
一. 实验目的 1. 掌握三层交换机之间通过RIP协议实现网段互通的配置方法. 2. 理解动态实现方式与静态方式的不同 二. 应用环境 当两台三层交换机级联时,为了保证每台交换机上所连接的 ...
- 配置Hive 支持 JSON 存储
1.说明 hive默认使用分隔符如空格,分号,"|",制表符\t来格式化数据记录,对于复杂数据类型如json,nginx日志等,就没有办法拆分了,这时候需要更加强大的SerDe来处 ...
- Bootstrap-table 单元格合并 、表头合并
1.页面引入js/css @*1.Jquery组件引用*@ <script src="~/Scripts/jquery-1.10.2.js"></script&g ...
- CF1188C Array Beauty(DP)
日常降智. 不过还是第一次和 2700 的题正解这么近呢-- 由于排序后不影响答案,而且直觉告诉我们排序后会更好做,不妨排个序. 直觉告诉我们,变成求最小差 \(\ge v\) 的方案数会比最小差 \ ...
- vue_02day练习
目录 vue_02day 作业 vue 框架 :成绩单的实现 v-for 与 v-if 联用: 3.添加筛选规则(深入) : 留言功能的页面实现: vue_02day 作业 1. 先有一下成绩单数据 ...
- [LeetCode] 1123. Lowest Common Ancestor of Deepest Leaves 最深叶结点的最小公共父节点
Given a rooted binary tree, return the lowest common ancestor of its deepest leaves. Recall that: Th ...
- [LeetCode] 382. Linked List Random Node 链表随机节点
Given a singly linked list, return a random node's value from the linked list. Each node must have t ...