使用

通过npm安装webpacknpm install webpack -g

注意:官网的全局安装webpack只是示范的目的，当你在做真实项目的情况下，安装webpack
作为一个项目依赖是个明智的选择

快速开始

首先我们要了解使用webpack基本命令行的API

创建一个模块化的javascript项目

让我们在javascript通过使用CommonJS语法中创建一些模块。

cat.js

1 2	var cats = ['dave', 'henry', 'martha']; module.exports = cats;

app.js (入口)

1 2	cats = require('./cats.js'); console.log(cats);

entry point(入口)就是你的程序将会在哪启动，并且webpack将会在哪里跟踪模块之间的依赖关系。

webpack5s
指定webpack的入口并指定输出文件名。

1	webpack ./app.js app.bundle.js

webpack将会读取并分析入口文件以及它的依赖关系（包括传递依赖），之后会打包他们到app.bundle.js中。
现在通过node app.bundle.js就可以看到所打印的内容，当然在浏览器中也是可以运行的。

了解严格模式

webpack是个灵活的打包器，它提供了许多高级的特性，但不是所有的特性都可以通过命令行的这种方式运行，
为了全面的了解webpack的灵活性，需要创建一个配置文件。

项目结构

在真实的项目中，我们会分开不同的源文件到不同的目录，在这个实例中，将源文件放在src,打包出来的
文件放在bin中。
创建bin和src目录
1
2
mkdir bin
mkdir src

将原文件移到src目录
1
mv app.js cats.js src
初始化一个npm项目
1
npm init
安装webpack作为本项目的一个依赖
1
npm install --save-dev webpack

移步配置文件

随着你的项目的成长，你的配置文件将会变的复杂，以命令行的方式定义webpack将会变的不灵便，通过
创建配置文件来代替命令行的这种方式。
创建webpack.config.js
1
2
3
4
5
6
7
module.exports = {
    entry: './src/app.js',
    output: {
        path: './bin',
        filename: 'app.bundle.js'
    }
};
webpack的配置文件是node形式的模块，所以你可以运行各种形式的代码在这里，只要你最后暴露出
一个定义webpack的对象就行。

运行webpack
1
webpack

webpack将会读取配置文件，打包响应的东西，你可以检查该项目就会发现项目多出bin目录，并且
包含了输出文件

运行bin/app.bundle.j

1 2	node bin/app.bundle.js ["dave", "henry", "martha"]

也可以require()通过npm安装的模块而不需要额外的配置文件。

使用加载器

webpack本身只支持javascript模块，但是很多人会使用转换器去转换ES6、CoffeScript、TypeScript、
等等，这些可以通过wenbpack的loaders实现。
loaders是一些特殊的模块，webpack使用他们来加载其余的模块到javascript中，比如babel-loader使用
Babel去加载ES2015（ES6）的文件。
loaders可以链式化（loaders链），有时你需要加载器链一起工作，比如yaml-loader只能转换YAML到json
中,所以需要json-loader继续转化才能被使用

用babel-loader转换ES2015

在这个例子中，我们告诉webpack通过使用Babel我们可以使用ES2015的特性
安装babel以及babel的预装配置
1
npm install --save-dev babel-core babel-preset-es2015
安装babel-loader
1
npm install --save-dev babel-loader
通过添加.babelrc文件配置Babel使用这些预装配置
1
{ "presets": [ "es2015" ] }
修改webpack.config.js通过babel-loader处理所有以.js结尾的文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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文件夹，否则所有的外部库都会经过 Babel,会减慢编译速度**
(5). 安装你想要使用的外部库（jQuery）
1
npm install --save jquery babel-polyfill
使用--save代替--save-dev,因为这些库是在运行的时候被使用的，使用babel-polyfill可以是在老的浏览器中使用ES2015
(6). 修改src/app.js
1
2
3
4
5
6
7
8
9
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打包这些模块
1
webpack
(8). 添加index.html
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script src="bin/app.bundle.js" charset="utf-8"></script>
    </body>
</html>

使用插件

通常你需要在工作流中做一些额外的处理，很简单的一个例子就是压缩代码这样可以在浏览器中加
载速度变快,这可以通过插件完成，在配置文件中加入压缩插件(uglify plugin)。

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,
            },
        }),
    ]
}

压缩插件已经包含在webpack的配置文件中，所以你不需要添加额外的模块，你可以写自己的插件，
在这个案例中将文件大小由1618bytes压缩到了308bytes。

每天进步一点点