Webpack your bags（中文翻译）

Webpack your bags

什么是webpack

让我们来一起构建一个小型的应用

为了更容易地理解 Webpack 的好处，我们将构建一个非常小型的应用，同时绑定很多不同的资源。为了在使用的过程中获得更加简洁的依赖，建议使用 Node4 和NPM3 来实践接下来的例子。如果你还没有安装NPM3，可以使用 npm install npm@3 -g

$ node -v
v4.3.1
$ npm -v
3.7.5

基础构建

让我们从创建我们的项目和安装Webpack 开始，在后面我们同时也会涉及到 jQuery 的一些演示

$ npm init
$ npm install jquery --save
$ npm install webpack --save-dev

现在让我们用原始的 ES5 开始创建我们的App的入口文件

src/index.js

var $ = require('jquery');

$('body').html('Hello');

接下来创建 webpack 配置文件 webpack.config.js。Webpack 配置全部采用Javascript 来书写，同时需要 export 一个对象

webpack.config.js

module.exports = {
    entry:  './src',
    output: {
        path:     'builds',
        filename: 'bundle.js',
    },
};

这里，entry 用于设置webpack 应用的启动入口。这些是你的主要在项目依赖最上层的文件。接下来我们告诉Webpack 将打包好的文件放到 builds 文件夹下的 bundle.js 文件