webpack设计思想：不区分.png .css .js 等文件，都视为一个模块。通过require导入，loader加载器编译之后打包在一个主js文件里。
优势：减少http请求。
1. webpack的初级配置
新建项目：F:/wepback
全局node安装webpack ：cnpm install webpack -g
项目node安装webpack : f: ==>cd webpack ==> cnpm install webpack --save-dev
新建webpack.config.js文件
项目结构：
//main.js
let one = 'Hello Word!';
document.write(`<h1>${one}</h1>`);//firth.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="bundle.js" type="text/javascript" charset="utf-8"></script></head><body></body>
</html>
//webpack.config.jsmodule.exports ={entry:'./main.js',output:{filename:'./bundle.js' // bundle.js打包后的文件名，默认为同级目录下。}
}
node命令行： webpack
2.配置基本配置：
在需要打包的主文件里，即entry的入口文件内可以通过require导入各种模块，包括css文件等。
初始化package.json 文件 ： cnpm init
安装babel：用到es6才安装 cnpm install --save-dev babel-loader babel-core cnpm install --save-dev babel-preset-latest cnpm install --save-dev babel-polyfill
var webpack = require("webpack");
var path = require("path");
module.exports ={entry:{admin:'./admin/index.js', //入口文件最开始地方添加：require("babel-polyfill"); 用到es6才需要添加consumer:'./consumer/index.js'},plugins:[new webpack.optimize.UglifyJsPlugin() //打包插件，此插件为压缩代码],output:{path:path.join(__dirname,'dist'), //path ：__dirname为文件名，在dist文件下生成。filename:'[name].bundle.js' //[name]取得是entry的key值。即在dist下生成了admin.bundle.js文件和consumer.bundle.js文件。},module:{loaders:[{test:/\.js$/,loader:'babel-loader',query:{presets:['es2015']}} //es6编译成es5
]}
}
3.热替换和自动更新。
cnpm install webpack webpack-dev-server -g
cnpm install webpack webpack-dev-server --save-dev
修改package.json 文件：
修改webpack.config.js文件 ： 只需加 publicPath:'/dist/' 这一步
node命令行：webpack
node命令行：webpack-dev-server
网页打开：http://localhost:8080/
修改文件后，浏览器会自动更新。
4.es6项目
index.js文件：
require("babel-polyfill");
require('./es6/import.js');
import {Fun} from "./es6/export";
let fun = new Fun();
fun.getName ='WANG';
let yie = fun.getName();
console.log(yie.next());
console.log(yie.next());
export.js:
class Fun {constructor(){this.name = [];};get getName(){if(this.name.length == 0){return '未添加姓名';}else{return function* (){for(var value of this.name){yield value;}return '遍历完成1';}}};set getName(name){this.name.push(name);};
}
export {Fun};
import.js:
import {Fun} from "./export";
class Name extends Fun{isSuccess(){alert('yes 继承成功1');}
}
var name =new Name();
name.isSuccess();
webpack.config.js:
var path = require('path');
module.exports = {entry:"./index.js",output:{path:path.join(__dirname,'dist'),publicPath:'/dist/',filename:'index.js'},module:{loaders:[{test:/\.js$/,loader:'babel-loader',query:{presets:['es2015']}}]}
}
index.html:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script src="dist/index.js" type="text/javascript" charset="utf-8"></script></body>
</html>
