准备工作

在开始为项目加入构建前，需要先新建一个web项目，有如下方式： - 新建一个目录，再进入项目根目录执行npm init - 用脚手架工具Yeoman(http://yeoman.io)直接、快速地生成一个最符合自己的需求的项目

安装webpack到本项目

安装Webpack到本项目，可根据自己的需求选择一下任意命令运行

npm i -D 是npm install --save-dev的简写，是指安装模块并保存到package.json的devDependencies

安装最新的稳定版 npm i -D webpack

安装最新的体验版本 npm i -D webpack@beta

安装webpack到全局

npm i -g webpack

推荐使用这种方式安装，防止不同的项目因依赖不同版本的Webpack而导致冲突

简单实战

1. npm install webpack --save--dev(建议使用yarn add webpack 来进行安装)
2. npm init(创建一个package.json文件，本次使用yarn init)
3. 在package.json文件中配置打包命令 "scripts": { "start": "webpack --config webpack.config.js" },
4. 搭建项目目录，如下

项目目录 - index.html - main.js - show.js - webpack.config.js

index.html

```

```

main.js

// 通过commonjs规范导入show函数 const show = require('./show.js'); show('Webpack');

show.js

``` // 操作DOM元素，将content显示到页面上 function show(content){ window.document.getElementById('app').innerHTML('hello'+content) }

module.exports = show; ```

webpack.config.js

``` const path = require('path');

module.exports = { // JavaScript执行入口文件 entry: './main.js', output:{ // 将所有依赖的模块合并输出到一个bundle.js文件 filename: 'bundle.js', // 将输出文件都放到dist目录下 path: path.resolve(__dirname, './dist'), } } ```

开始执行

npm run start

最终在目录下生成一个dist目录，目录下生成了一个bundle.js文件，bundle.js是一个可执行的javascript文件，它包含页面所依赖的两个模块main.js、show.js，以及内置的webpackBootstrap启动函数。这时用浏览器打开index.html网页，将会看到Hello Webpack

总结

本章只是简单的介绍了下webpack的简单使用，通过本章应该记住如何去构建一个webpack环境。接下来一章我会介绍如何使用Loader、使用Plugin、使用DevServer

本文作者：自如大前端研发中心-冯腾飞