webpack的使用
1.webpack是什么?
打包前端项目的工具(为项目提高逼格的东西)。
2.webpack的基本命令
webpack#最基本的启动webpack命令
webpack-w #提供watch方法,实时进行打包更新
webpack -p #对打包后的文件进行压缩
webpack -d #提供SourceMaps,方便调试
webpack --colors #输出结果带彩色
webpack --profile #输出性能数据,可以看到每一步的耗时
webpack --display-modules #默认情况下 node_modules 下的模块会被隐藏,加上这个参数可以显示这些被隐藏的模块
3.webpack常用调试参数
webpack-dev-server 在 localhost:8080 建立一个 Web 服务
devtool eval 为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号
progress 显示合并代码进度
colors 命令行中显示颜色!
content-base build - 指向设置的输出目录
使用:
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --port 9090 --devtool cheap-module-eval-source-map --progress --colors --hot --content-base ./"
}
4.resolve中extensions的使用
resolve: {
extensions: ['', '.js', '.jsx']
}
resolve: 定义了解析模块路径时的配置,常用的就是extensions; 可以用来指定模块的后缀,这样在引入模块时就不需要写后缀,会自动补全。
怎么个补全法?
import { ModalSuccess,
ModalError,
Header } from '../../component/index.jsx'; //下面的不需要加jsx后缀
import { ModalSuccess,
ModalError,
Header } from '../../component/index';
5.output的使用
output用来定义打包后输出的文件目录以及名称
output: {
filename: "build.js",
path: __dirname + '/assets/',
publicPath: "/assets/"
}
具体含义:
output:模块的输出文件,其中有如下参数:
filename: 打包后的文件名
path: 打包文件存放的绝对路径。
publicPath: 网站运行时的访问路径。
6.react组件的分离,进行独立打包
我们使用webpack一般配合react的开发。
分离出这两个组件可以减少核心代码的臃肿。
entry : {
app:'./app.js',
vendors:['react']
}
这个是在entry中进行配置。
plugins: [
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')
]
CommonsChunkPlugin 是webpack自带的不需要额外安装。
效果:
7.react,react-dom注入全局,免得每个文件都用引入
plugins:[
new webpack.ProvidePlugin({
"React": "react",
"ReactDOM": "react-dom"
})
]
这里的 ProvidePlugin插件是webpack自带的不需要独立安装。
8.使用url-loader将图片转成64位,减少http的请求。
安装:npm install url-loader --save-dev
css中:
.bgCPng{
background:url(../img/car.png) repeat fixed center;
}
jsx中:
import '../resources/css/clearDefault.css'; ... <div style={{ width:,height: }} className='bgCPng'></div>
webpack.config.js中:
module:{
loaders:[{
test:/\.(png|jpg)$/,
loader:'url?limit='
}]
}
效果:
9.加载less/sass
安装:npm install less-loader 或者 npm install sass-loader
// LESS
{
test: /\.less$/,
loader: 'style!css!less'
},
// SASS
{
test: /\.scss$/,
loader: 'style!css!sass'
}
10.hash
[name] - 反回入口名称
[hash] - 反回创建的hash
[chunkhash] - 反回一段特定的hash
使用:
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 配置摘要
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- ...
- Vue + Webpack + Vue-loader 系列教程(1)功能介绍篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...
随机推荐
- 踩石行动:ViewPager无限轮播的坑
2016-6-19 前言 View轮播效果在app中很常见,一想到左右滑动的效果就很容易想到使用ViewPager来实现.对于像我们常说的banner这样的效果,具备无限滑动的功能是可以用ViewPa ...
- java基础_集合List与Set接口
List接口继承了Collection的方法 当然也有自己特有的方法向指定位置添加元素 add(索引,添加的元素); 移除指定索引的元素 remove(索引) 修改指定索引的元素 set ...
- Ubuntu 16.10 安装byzanz截取动态效果图工具
1.了解byzanz截取动态效果图工具 byzanz能制作文件小,清晰的GIF动态效果图,不足就是,目前只能通过输入命令方式来录制. byzanz主要的参数选项有: -d, --duration=SE ...
- Word/Excel 在线预览
前言 近日项目中做到一个功能,需要上传附件后能够在线预览.之前也没做过这类似的,于是乎就查找了相关资料,.net实现Office文件预览大概有这几种方式: ① 使用Microsoft的Office组件 ...
- 12、Struts2表单重复提交
什么是表单重复提交 表单的重复提交: 若刷新表单页面, 再提交表单不算重复提交. 在不刷新表单页面的前提下: 多次点击提交按钮 已经提交成功, 按 "回退" 之后, 再点击 &qu ...
- .net 分布式架构之配置中心
开源QQ群: .net 开源基础服务 238543768 开源地址: http://git.oschina.net/chejiangyi/Dyd.BaseService.ConfigManager ...
- hadoop2.7之Mapper/reducer源码分析
一切从示例程序开始: 示例程序 Hadoop2.7 提供的示例程序WordCount.java package org.apache.hadoop.examples; import java.io.I ...
- ES6之变量常量字符串数值
ECMAScript 6 是 JavaScript 语言的最新一代标准,当前标准已于 2015 年 6 月正式发布,故又称 ECMAScript 2015. ES6对数据类型进行了一些扩展 在js中使 ...
- 数据库备份并分离日志表(按月)sh 脚本
#!/bin/sh year=`date +%Y` month=`date +%m` day=`date +%d` hour=`date +%H` dir="/data/dbbackup/f ...
- win10安装blueCFD
blueCFD其实安装起来听简单,不过还是有点问题.最大的问题是该软件没有文档,不过想来也是,人家只是提供一个linux外壳,剩下的工作还是OpenFoam,该干嘛干嘛,也用不着文档.问题在于我们需要 ...