安装
通过 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
下面让我们运行生成的脚本
node app.bundle.js
["dave", "henry", "martha"]
当然,你也可以在浏览器中引用它
继续
除了命令行,我们还可以通过配置文件,使用更多 Webpack 的功能
项目结构
一般情况下,我们把源文件和打包后的文件放在不同的文件夹里面。在这个项目中,源文件放在 src
文件夹下,打包文件放在 bin
文件夹下。
项目的目录结构如下图
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 文件
再比如,json-loader
会将原生 JSON 文件转换成一个 CommonJs 模块
多个加载器可以组成一个转换链,比如,对于一个 YAML 文件,可以先使用 yaml-loader
将其转换成 JSON 文件,然后再用 json-loader
将其转换成 Javascript
用 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';
$('Cats
').appendTo('body');
const ul = $('
').appendTo('body');
for (const cat of cats) {
$('').text(cat).appendTo(ul);
}
7 打包、编译
webpack
8 创建一个 index.html
文件,引入生成的包
打开 index.html
,可以看到如下结果:
使用插件
有时候我们还想对生成的包进行一些额外处理,比如说压缩之类的,这时候就有使用到插件了,配置文件如下:
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 字节