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-loaderlimit的参数意思是图片大小小于这个限制的时候,会自动启用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语句需要使用大括号
- 一个模块只能有一个默认输出