webpack 使用入门指引

文章内容翻译自webpack 官方指引文档

webpack的安装

1	npm install webpack -g

全局安装不适用于工程环境，一般还是要安装在工程目录中：

1	npm install webpack --save

初步尝试

单文件的 javascript 模块

建立一个使用 CommonJS 语法风格的 js 模块文件

cats.js

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

app.js (入口文件)

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

入口文件是指程序的起始位置，同时也是 webpack 开始追踪模块依赖的位置。

使用的方法是在文件位置的命令行里输入：

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

打包出来的 app.bundle.js 自动将模块封装进入口文件中并且生成了新的 bundle 文件。

webpack的工作过程

读取入口文件，并分析依赖和依赖的依赖，依次类推
打包入口文件，并且讲所有的依赖都打包在单文件中

高级技巧

在项目中使用webpack

将源代码和打包文件分开存放，为了使用各种加强的功能需要写 webpack.config.js 文件。

一般使用 npm init 来初始化项目。还需要建立一系列空白文件夹，例如 src 用于存放源代码， bin 用来存放生成的打包文件。

引入 webpack.config.js 文件

文件的作用类似于 gulp 的 gulpfile.js ，位置应当位于工程目录的顶层，书写内容如下;

module.exports = {
  entry:'./src/app.js', // 入口文件
  output:{				// 输出文件设置
    path:'./bin',
    filename:'app.bundle.js'
  }
}

webpack.config.js 文件是一个 commonJS 风格的模块

直接在工程目录命令行中执行：

webpack

使用加载器

webpack原本只能使用原生的 js 模块，如果写了ES2015，CoffeeScript等等语法的模块的话需要用加载器来引入。

加载器是一种特殊的 webpack 模块，其作用是加载其他模块，这些模块通常使用非js语言写成。例如我们可以使用 bable-loader 加载器来引入 ES2015 语法的 js 文件。

加载器可以链式调用，例如 yaml-loader 加载器可以输出 json 格式的数据，单要使用的话还需要链式调用 json-loader 加载器。

例如：

使用 babel-loader!./app.js 来打包 es2015 的代码。
使用 json-loader!./cats.json 来封装出 CommonJS 的代码。
还支持链式调用。

举个例子

打包 ES2015 风格的代码

安装 Babel 和预设：

1	npm install --save-dev babel-core babel-preset-es2015

安装 babel-loader ：
1
npm install --save-dev babel-loader
设置babel使用预设器中的预设值，在项目目录中添加 .babelrc 文件：
1
{"presets":["es2015"]}

改写 webpack.config.js 文件，使所有的 js 文件都使用 babel-loader 加载器加载：

module.exports = {
     entry: './src/app.js',
     output: {
         path: './bin',
         filename: 'app.bundle.js',
     },
     module: {
         loaders: [{
             test: /\.js$/,
             exclude: /node_modules/,
             loader: 'babel-loader'
         }]
     }
 }

安装需要使用的库文件，比如安装 jquery ：
1
npm install --save jquery babel-polyfill
bable-polyfill 的作用是为旧版浏览器提供es2015兼容

Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。

举例来说，ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。

————阮一峰老师的《Babel 入门教程》

编写一段 src/app.js 脚本，可以看到这里写的是 ES2015 语法风格：

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);
}

打包模块：
1
webpack

添加一个 index.html 文件用来呈现效果：

<!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
     </head>
     <body>
         <script src="bin/app.bundle.js" charset="utf-8"></script>
     </body>
 </html>

打开网页文件看到的应该是：

使用插件

如果你想在工作流中插入一些打包之外的工作，那你就需要使用插件。插件有一个常见的使用场景是压缩代码使之加载更快。使用方法如下：

const webpack = require('webpack');// 引入webpack，这里需要webpack中自带的压缩插件

module.exports = {
    entry: './src/app.js',
    output: {
        path: './bin',
        filename: 'app.bundle.js',
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        }]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({// 可以看到webpack原生带有压缩插件
            compress: {
                warnings: false,
            },
            output: {
                comments: false,
            },
        }),
    ]
}

使用插件后，打包出的文件尺寸大幅缩小了。

总结

webpack 需要一个入口文件。
配置文件中的四个大项目
- 入口 entry
- 出口 output
- 加载器 loader
- 插件 plugin
暂时没了