什么是webpack
是一个模块打包器。任何静态资源都可以当做是模块,然后模块 之间也可以相互依赖,通过webpack对模块进行处理以后,可以打包成我们想要的资源
webpack的特点
- 支持CommonJS和 AMD模块,意思就是哦们可以无痛迁移旧的项目
- 支持模块加载器,和插件机制,可对模块进行灵活的定制,特别是babel-loader有效支持es6
- 可以通过配置,打包成多个文件,有效的利用浏览器的 缓存功能,提升性能
- 将样式文件和图片等的静态资源也可以视为模块进行打包,配合loader加载器,可以支持sass,less等css预处理器
- 内置source map,即打包在一起依旧方便调试
安装webpack
- 全局安装:
npm install webpack -g
- webpack -w 提供watch方法,实时打包跟新
- webpack -p对打包后的文件进行压缩
- webpack -d提供sourcemap,方便调试
- webpack –config以某个config作为打包
- webpack –help更多命令
然后打包的过程中总是出现错误
最后换了一个低版本的
npm install webpack@3.0.0 -g
在进行打包就好了
配置文件
- webpack在执行的时候可以通过指定的配置文件
- 默认情况下会执行当前的目录中的webpack.config.js
- 配置文件是一个node.js模块,返回一个json格式的配置信息对象
加载图片
url-loader会将样式中引用到的图片转为模块来处理
npm install url-loader
limit的参数意思是图片大小小余界限的时候,会自动启动启用base64编码图片
使用es6
npm install babel-core
npm install babel-loader
npm install babel-preset-es2015
////////////////////////////////////
{loader:'babel-loader',excluder:/node_moudles/,test:/\.js?$/,query:{compact:false,presets:['es2015']}}
打包成多个资源文件
entry属性可以是一个对象,而对象名也就是key会作为下面output的filename属性的[name]
公共模块
我们利用插件就可以智能提取公共部分,以提供我们浏览器的缓存复用
plugins:[
new webpack.optimize.CommonsChunkPlugin('commmon.js')
]
我们需要手动在html上去加载common.js,并且是必须要最先加载
gulp和webpack
var gutil =require('gulp-util');
var webpack=require('webpack');
var webpackConfig=require('./webpack.config.js');
gulp.task('webpack',function(callback){
var myConfig=Object.create(webpackConfig);
webpack(
myConfig,
function(err,stats){
callback();
});
});
防止频繁的进行打包可以对他进行监视
监控所有的页面,gulp和webpack结合使用
gulp.task('default',function(){
gulp.watck('./**',['webpack']);
});
webpack-dev-server
当前目录作为根目录,启动一个服务,会自动的打包,实时刷新