webpack以及打包总是出现错误

什么是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 [email protected] -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

当前目录作为根目录，启动一个服务，会自动的打包，实时刷新