webpack--GettingStarted

全局安装（非必须）

全局安装命令如下

cnpm install --global webpack #目前webpack版本为3.0.0

官网不推荐全局安装 webpack。这会将您项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。

新建工程目录webpack-demo

mkdir webpack-demo && cd webpack-demo
npm init -y
cnpm install --save-dev webpack
cnpm install --save lodash # JavaScript 工具库，备用

创建webpack.config.js文件，添加如下内容

var path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

创建src目录，在src目录下新建index.js如下：

import _ from 'lodash';

function component() {
    var element = document.createElement('p');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    return element;
}

document.body.appendChild(component());

创建dist目录，在dist目录下新建index.html

在 package.json 添加一个 npm 脚本(npm script)：

{
  ...
  "scripts": {
    "build": "webpack"
  },
  ...
}

在webpack-demo目录下运行

npm run build

会看到在dist目录下增加了一个bundle.js，这就是webpack输出的结果。最终工程目录如下：

webpack-demo
|- package.json
|- webpack.config.js
|- /dist
  |- bundle.js
  |- index.html
|- /src
  |- index.js
|- /node_modules

在webpack-demo目录下运行

http-server

浏览器访问https://localhost:8080/dist/，即可看到页面显示Hello webpack，如果没安装http-server，可以全局安装一个，安装命令如下

cnpm install http-server -g

现在，你已经实现了一个基本的构建过程，你应该深入了解基本概念和配置来更好地解 webpack 的设计。