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变量即可。