webpack

全局安装

npm install webpack -g

• webpack -w 提供watch方法,实时进行打包更新
• webpack -p 对打包后的文件进行压缩
• webpack -d 提供sourcemap.方便调试
• webpack –config 以某个config作为打包
• webpack –help 更多命令

本地安装

npm install webpack --save-dev

初体验

index.html
entry.js

编译entry.js并打包到bundle.js

webpack ./entry.js bundle.js

配置文件

• webpack在执行的时候可以通过指定的配置文件
• 默认情况下会执行当前目录中的webpack.config.js
• 配置文件是一个node.js模块,返回一个json格式的配置信息对象
• 添加配置文件

var webpack = require('webpack');
module.exports = {
    entry: "./entry.js",       //指定打包的入口文件，每有一个键值对，就是一个入口文件
    output: { //配置打包结果
        path: __dirname,       //定义了输出的文件夹
        filename: "bundle.js"  //定义了打包结果文件的名称
    },
    module: {  //定义模块的加载逻辑
        loaders: [ //定义了一系列的加载器
            { test: /\.css$/, loader: "style!css" }, //当需要加载的文件匹配`test`的正则时，就会调用后面的`loader`对文件进行处理
            {test:/\.(png|jpg)$/,loader:'url?limit=40000'}
        ]
    }
};

插件

插件的使用一般是在webpack的配置信息plugins选项中指定,我们可以向生成的打包文件头部插入一些信息

//向打包的头部加入 作者 : cj
plugins: [
        new webpack.BannerPlugin('作者 : cj')
    ],

加载图片

url-loader会将样式中引用到的图片转为模块来处理

npm install url-loader

limit的参数意思是图片大小小于这个限制的时候,会自动启用base64编码图片

 {test:/\.(png|jpg)$/,loader:'url?limit=40000'}

别名

• 别名的作用是把用户的一个请求重定向到另一个路径

resolve: {
        alias: {
            jquery: "./lib/jquery/jquery.js"
        }
    }

expose

• 如果想在前台使用打包的jquery需要把jquery暴露出来

npm install expose-loader --save-dev

• 把$作为别名为jquery的变量暴露到全局上下文中

require('expose?$!jquery');

webpack里面使用es6

npm install babel-core --save-dev
npm install babel-loader --save-dev
npm install babel-preset-es2015

 {test: /\.js?$/,loader: 'babel', exclude: /node_modules/,  query: {compact: false,presets: ['es2015']}}

打包成多个资源文件

entry属性可以使一个对象,而对象名也就是key会作为下面output的filename属性的[name]

 entry: {

        bundle1:'./entry1.js',
        bundle2:'./entry2.js'
    },       //指定打包的入口文件，每有一个键值对，就是一个入口文件

公共模块

我们利用插件就可以智能提取公共部分,已提供我们浏览器的缓存复用
比如上面entry1.js和entry2.js里面都需要jq模块,打包之后两个bundle1和bundle2都用jq,这明显不适宜,所以要提取公共模块

plugins: [
        new webpack.optimize.CommonsChunkPlugin('common.js')
    ]

我们需要手动在html上去加载common.js,并且是必须要最先加载

gulp里面使用webpack

var gutil = require("gulp-util");
var gulp = require("gulp");
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.task('default',function(){
    gulp.watch('./**',['webpack']);
});

webpack-dev-server

npm install webpack-dev-server -g

然后用webpack-dev-server启动一个服务

模块

es6在语言规格的层面上, 实现了模块功能

• export命令用于规定模块的对外接口
• import命令用于输入其他模块提供的功能
• 一个模块就是一个独立的文件,改文件内部的所有变量,外部无法获取
• 如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量

export

• 到处变量
• 导出变量为一个对象
• 函数或类(class)

import

• 其他js文件就可以通过import命令加载这个模块
• import命令接受一个对象,里面指定要从其他模块导入的变量名
• 模块的整体加载
  import * as util from './util'
  
  • export default命令,为模块指定默认输出

export default function(){
    console.log('foo'){ 
    }
}
import customName from './export-default';

• export default 对应的import语句不需要使用大括号,不使用export default 对应的import语句需要使用大括号
• 一个模块只能有一个默认输出