webpack最简示例

安装webapck

webpack依赖node环境，所以在此之前要保证系统中有node环境。

打开cmd控制台

$ npm install webpack -g

全局安装webpack

配置模块

webpack的配置主要分为三大块

entry 入口文件让webpack用哪个文件作为项目的入口
output 出口让webpack把处理完成的文件放在哪里
module 模块要用什么不同的模块来处理各种类型的文件

新建项目

新建一个目录，就叫webpack-test，然后初始化一下。

$ npm init

配置package.json中的信息，可以不理会，一路回车就行。

目录结构

app
- index.js
- util.js
webpack.config.js
package.json

加载模块

$ npm install webpack --save-dev

js代码

util.js

var util = {};

util.isArray = Array.isArray || function(obj){

	return obj instanceof Array;

};

module.exports = util;

index.js

var util = require('./util');

window.app = {

	util: util

};

webpack.config.js

var path = require('path');

// 定义几个路径

var ROOT_PATH = path.resolve(__dirname); //__dirname是文件所在的目录

var APP_PATH = path.resolve(ROOT_PATH, 'app');

var BUILD_PATH = path.resolve(ROOT_PATH, 'build');

module.exports = {

	entry: APP_PATH, //这里默认会找index.js，如果需要指定的话，再后面继续拼路径即可；

	output: {

		path: BUILD_PATH,

		filename: 'app.js'

	}

};

打包

按照上面编写完成后，在工程根目录下执行命名即可。

$ webpack

测试

可以build/app.js中的代码直接在浏览器控制台运行，然后调用一下app变量即可。

巴特西