1.什么是webpack
webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。
我们可以直接使用 require(XXX) 的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sass），但我们无须在上面花费太多心思，因为 webpack 有着各种健全的加载器（loader）在默默处理这些事情。
你可以不打算将其用在你的项目上，但没有理由不去掌握它，因为以近期 Github 上各大主流的（React相关）项目来说，它们仓库上所展示的示例已经是基于 webpack 来开发的，比如 React-Boostrap 和 Redux。
webpack的官网是 http://webpack.github.io/ ，文档地址是 http://webpack.github.io/docs/。
2.webpack 的优势
其优势主要可以归类为如下几个：
- webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
- 能被模块化的不仅仅是 JS 了。
- 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
- 扩展性强，插件机制完善，特别是支持 React 热插拔（见 react-hot-loader ）的功能让人眼前一亮。
3.搭建webpack环境
指定版本安装
npm install -g webpack@1.12.3
安装最新版
npm install -g webpack
初始化仓库
npm init -y
下载webpack服务
npm install -g webpack-dev-server
npm install --save-dev webpack-dev-server
4.使用测试
在项目中新建一个文件夹
mkdir test && cd test
目录结构如下
webpack.config.js
- entry 入口文件 让webpack用哪个文件作为项目的入口
- output 出口 让webpack把处理完成的文件放在哪里
- module 模块 要用什么不同的模块来处理各种类型的文件
module.exports = {
// 入口文件
entry: {
"bundle01": "./main01.js",
"bundle02": "./main02.js"
},
output: {
filename: "[name].js"
}
}
index.html
<script src="bundle01.js"></script>
<script src="bundle02.js"></script>
main01.js
document.write("<h1>Hello webpack</h1>");
main02.js
document.write("<p>hah</p>");
启动服务
webpack-dev-server
浏览器输入localhost:8080
5.安装loader
使用loader，改变页面内容，浏览器会自动刷新
babel-loader
Babel 是一个 JavaScript 编译器，可以将ES6语法转换为ES5语法。
babel的安装
npm install -g babel-cli
npm install --save-dev babel-core babel-loader babel-preset-es2015
目录结构如下
babel的使用
webpack.config.js
module.exports = {
entry: "./main.js",
output: {
filename: "babel.js"
},
module: {
loaders: [{
// 匹配文件格式
test: /\.js$/,
// 排除的文件
exclude: /node_modules/,
// 需要用到的loader
loader: "babel-loader"
}]
}
}
index.html
<script src="babel.js"></script>
main.js
import test from "./test.js";
// 等同于
// var test = require("./test.js");
document.write(test.fun1());
document.write(test.fun2());
test.js
function fun1() {
return "hello es6";
}
function fun2() {
return "config ok";
}
module.exports = {
fun1: fun1,
fun2: fun2
}
json-loader
安装
npm install --save-dev json-loader
目录结构如下
json-loader的使用
webpack.config.js
module.exports = {
// 入口文件
entry: "./main.js",
output: {
filename: "bundle.js"
},
module: {
loaders: [{
test: /\.json$/,
exclude: /node_modules/,
loader: "json-loader"
}]
}
}
index.html
<script src="bundle.js"></script>
main.js
// require 引入模块(js/json/css/less/sass/img)
var test = require("./test.json");
document.write(test.name);
document.write(test.age);
test.json
{
"name": "qzy",
"age": 20
}
css-loader
注意: 安装css-loader必须依赖style-loader模块
css-loader将引入的css生成目标文件
style-loader将生成的目标文件生成标签插入到页面中
安装
npm install --save-dev style-loader css-loader
css-loader的使用
目录结构如下
webpack.config.js
module.exports = {
entry: "./main.js",
output: {
filename: "bundle.js"
},
module: {
loaders: [{
test: /\.css$/,
exclude: /node_modules/,
loader: "style-loader!css-loader"
}]
}
}
//或者
module.exports = {
entry: "./main.js",
output: {
filename: "bundle.js"
},
module: {
loaders: [{
test: /\.css$/,
exclude: /node_modules/,
loaders: ["style-loader","css-loader"]
}]
}
}
index.html
<script src="bundle.js"></script>
main.js
var test = require("./test.css");
document.write("hello css-loader");
test.css
body{
color: #f00;
}
效果如下
less-loader
注意，安装less-loader必须依赖less，style-loader、css-loader三个模块
安装
npm install --save-dev less-loader less
目录结构如下
less-loader的使用
webpack.config.js
module.exports = {
entry: "./main.js",
output: {
filename: "bundle.js"
},
module: {
loaders: [{
test: /\.css$/,
exclude: /node_modules/,
loaders: ["style-loader", "css-loader", "less-loader"]
}]
}
}
index.html
<script src="bundle.js"></script>
main.js
var test = require("./test.less");
document.write("hello less-loader");
test.less
@color : blue;
body{
color: @color;
background: #ccc;
}
这样敲代码爽多了，less不用手动编译，只需要保存文件浏览器就自动刷新了，简直是太棒了！
打包静态资源(如:图片)
npm install --save-dev url-loader file-loader image-loader
目录结构如下
url-loader的使用
webpack.config.js
module.exports = {
entry: "./main.js",
output: {
filename: "bundle.js"
},
module: {
loaders: [{
test: /\.(png|jpg|gif)$/,
exclude: /node_modules/,
// limit指定文件大小
loader: "url-loader?limit=8192"
}]
}
}
index.html
<body>
<!-- 防止找不到body -->
<script src="bundle.js"></script>
</body>
main.js
var img = new Image();
img.src = require("./icon.png");
img.width = 500;
document.body.appendChild(img);
效果
6.使用plugin
代码压缩
npm install --save-dev webpack
webpack.config.js
var webpack = require("webpack");
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
module.exports = {
entry: "./main.js",
output: {
filename: "bundle.js"
},
plugins: [
new uglifyJsPlugin({
compress: {
warnings: false
}
})
]
}
index.html
<script src="bundle.js"></script>
main.js
document.write("hello world");
/*
占位占位
*/
document.write(a());
function a() {
var fsdfsdf = "haha";
return fsdfsdf;
}
var sdfdsfs;
效果:
可以看出代码已经压缩过了
公共模块的提取
CommonsChunkPlugin
作用: 将所有的依赖库打包为一个文件
webpack.config.js
var webpack = require("webpack");
...
module.exports = {
entry: {
// 入口文件
app: "./src/main.js",
// 依赖的文件
vendor: [
"jquery",
"director" //路由
]
},
output: {
path: __dirname + 'dist',
filename: "bundle.js"
},
...
plugins: [
// 将 entry.vendor 数组中的所有依赖文件打包为vendor.js
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js')
]
}
index.html
<script src="vendor.js"></script>
<script src="bundle.js"></script>
自动打开浏览器
npm install --save-dev open-browser-webpack-plugin
webpack.config.js
var openBrowserPlugin = require("open-browser-webpack-plugin");
module.exports = {
entry: "./main.js",
output: {
filename: "bundle.js"
},
plugins: [
new openBrowserPlugin({
url: "http://localhost:8080"
})
]
}
运行webpack-dev-server会自动打开浏览器
参考资料
用webpack的CommonsChunkPlugin提取公共代码的3种方式
