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的使用的更多相关文章

  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 配置摘要

    open-browser-webpack-plugin 自动打开浏览器 html-webpack-plugin 通过 JS 生成 HTML webpack.optimize.UglifyJsPlugi ...

  8. Vue + Webpack + Vue-loader 系列教程(2)相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

  9. Vue + Webpack + Vue-loader 系列教程(1)功能介绍篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...

随机推荐

  1. 踩石行动:ViewPager无限轮播的坑

    2016-6-19 前言 View轮播效果在app中很常见,一想到左右滑动的效果就很容易想到使用ViewPager来实现.对于像我们常说的banner这样的效果,具备无限滑动的功能是可以用ViewPa ...

  2. java基础_集合List与Set接口

    List接口继承了Collection的方法  当然也有自己特有的方法向指定位置添加元素   add(索引,添加的元素); 移除指定索引的元素   remove(索引) 修改指定索引的元素   set ...

  3. Ubuntu 16.10 安装byzanz截取动态效果图工具

    1.了解byzanz截取动态效果图工具 byzanz能制作文件小,清晰的GIF动态效果图,不足就是,目前只能通过输入命令方式来录制. byzanz主要的参数选项有: -d, --duration=SE ...

  4. Word/Excel 在线预览

    前言 近日项目中做到一个功能,需要上传附件后能够在线预览.之前也没做过这类似的,于是乎就查找了相关资料,.net实现Office文件预览大概有这几种方式: ① 使用Microsoft的Office组件 ...

  5. 12、Struts2表单重复提交

    什么是表单重复提交 表单的重复提交: 若刷新表单页面, 再提交表单不算重复提交. 在不刷新表单页面的前提下: 多次点击提交按钮 已经提交成功, 按 "回退" 之后, 再点击 &qu ...

  6. .net 分布式架构之配置中心

    开源QQ群: .net 开源基础服务  238543768 开源地址: http://git.oschina.net/chejiangyi/Dyd.BaseService.ConfigManager ...

  7. hadoop2.7之Mapper/reducer源码分析

    一切从示例程序开始: 示例程序 Hadoop2.7 提供的示例程序WordCount.java package org.apache.hadoop.examples; import java.io.I ...

  8. ES6之变量常量字符串数值

    ECMAScript 6 是 JavaScript 语言的最新一代标准,当前标准已于 2015 年 6 月正式发布,故又称 ECMAScript 2015. ES6对数据类型进行了一些扩展 在js中使 ...

  9. 数据库备份并分离日志表(按月)sh 脚本

    #!/bin/sh year=`date +%Y` month=`date +%m` day=`date +%d` hour=`date +%H` dir="/data/dbbackup/f ...

  10. win10安装blueCFD

    blueCFD其实安装起来听简单,不过还是有点问题.最大的问题是该软件没有文档,不过想来也是,人家只是提供一个linux外壳,剩下的工作还是OpenFoam,该干嘛干嘛,也用不着文档.问题在于我们需要 ...