安装
通过 npm 安装 Webpack
npm install webpack -g
具体步骤可以查看上一节内容
开始
我们先来学习一些最基本的 Webpack 命令
创建一个模块化的 Javascript 项目
让我们先来创建几个 Javascript 模块
cats.js
var cats = ['dave', 'henry', 'martha'];
module.exports = cats;
app.js (Entry Point)
cats = require('./cats.js');
console.log(cats);
入口点 entry point 是整个项目的启动脚本，Webpack 将从这里追踪所有的依赖
给 Webpack 五秒钟
告诉 Webpack 入口点脚本 (app.js) ，并告诉他输出脚本的名字 (app.bundle.js):
webpack ./app.js app.bundle.js
Webpack 将读取和分析入口点脚本，并正确载入依赖，最后将他们全部打包成一个文件，即 app.bundle.js
how-it-works.png
下面让我们运行生成的脚本
node app.bundle.js
["dave", "henry", "martha"]
当然，你也可以在浏览器中引用它
继续
除了命令行，我们还可以通过配置文件，使用更多 Webpack 的功能
项目结构
一般情况下，我们把源文件和打包后的文件放在不同的文件夹里面。在这个项目中，源文件放在 src 文件夹下，打包文件放在 bin 文件夹下。
项目的目录结构如下图
project-structure.png
1 创建目录
mkdir bin
mkdir src
2 将源文件移动到 src 文件夹下
mv app.js cats.js src
3 用 npm 初始化项目
npm init # (answer the questions)
4 安装 Webpack 作为开发环境下的依赖
npm install --save-dev webpack
启用配置文件
现在项目已经变得比较复杂了，再使用命令行会比较笨拙，到了该启用配置文件的时候了。
1 创建 webpack.config.js
module.exports = {
//设置入口点脚本
entry: './src/app.js',
//设置输出脚本
output: {
path: './bin',
filename: 'app.bundle.js'
}
};
配置文件是一个 Node 样式的模块，因此可以运行任意代码，只要最终导出一个配置对象即可。
2 有了配置文件，我们的命令行就很简单了
webpack
3 运行
node bin/app.bundle.js
["dave", "henry", "martha"]
使用加载器 loaders
Webpack 自身只支持 Javascript 语言，对于其他语言，如 ES2015， CoffeeScript，TypeScript 等等，则需要用加载器将他们翻译转换成 Javascript
例如， babel-loader 利用 Babel 加载 ES2015 文件
babel-loader.png
再比如，json-loader 会将原生 JSON 文件转换成一个 CommonJs 模块
json-loader.png
多个加载器可以组成一个转换链，比如，对于一个 YAML 文件，可以先使用 yaml-loader 将其转换成 JSON 文件，然后再用 json-loader 将其转换成 Javascript
yaml-loader.png
用 babel-loader 转换 ES2015
1 首先安装 Babel 核心库和语言预设
npm install --save-dev babel-core babel-preset-es2015
2 安装 babel-loader
npm install --save-dev babel-loader
3 配置 Babel 预设，将其添加到 .babelrc 配置文件中
{ "presets": [ "es2015" ] }
4 修改 webpack.config.js 配置文件，让 babel-loader 使用处理所有的 JS 文件
module.exports = {
entry: './src/app.js',
output: {
path: './bin',
filename: 'app.bundle.js',
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
}]
}
}
注意，在这里我们排除了
node_modules文件夹，因为这个文件夹里面都是我们安装的库，不需要处理。
5 安装生产环境下需要的库
npm install --save jquery babel-polyfill
注意，这里我们使用了
--save而不是--save-dev，因为这两个库是在生产环境下使用的。
6 编辑 src/app.js ，注意，这里使用了 ES6 语法
import 'babel-polyfill';
import cats from './cats';
import $ from 'jquery';
$('<h1>Cats</h1>').appendTo('body');
const ul = $('<ul></ul>').appendTo('body');
for (const cat of cats) {
$('<li></li>').text(cat).appendTo(ul);
}
7 打包、编译
webpack
8 创建一个 index.html 文件，引入生成的包
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bin/app.bundle.js" charset="utf-8"></script>
</body>
</html>
打开 index.html ，可以看到如下结果：
cats.png
使用插件
有时候我们还想对生成的包进行一些额外处理，比如说压缩之类的，这时候就有使用到插件了，配置文件如下：
const webpack = require('webpack');
module.exports = {
entry: './src/app.js',
output: {
path: './bin',
filename: 'app.bundle.js',
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
}]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
},
output: {
comments: false,
},
}),
]
}
重新生成后，我们发现 uglify 插件将输出包的尺寸从原来的 1618 字节压缩到 308 字节
网友评论