webpack

webpack the flexible module bundler

webpack 是一款弹性打包工具,灵活,简单

install

webpack 是运行在 node.js 中的一款模块,所以直接使用 npm 安装

npm install webpack --global  

我们需要全局安装 webpack, 与 gulp 一样需要在全局环境中注册 webpack cli 命令


npm install webpack --save-dev

安装好全局 webpack 后,我们还需要在项目中安装 webpack 模块

config

在项目根目录中创建 webpack.config.js,此文件是对 webpack 的详细配置

使用 webpack cli 配置 webpack,需要返回一个对象

module.exports = {
    // configuration
};

entry

定义入口文件,入口文件可以理解为一个网页,只有一个文件,通过入口文件自动的依赖其它 js 模块
{
    entry: {
    	//对单独的某一个文件打包
        page1: "./page1", 
        //对多个文件打包,然后一起输出
        page2: ["./entry1", "./entry2"]
    }
}

output

{
    entry: {
    	//对单独的某一个文件打包
        page1: "./page1", 
        //对多个文件打包,然后一起输出
        page2: ["./entry1", "./entry2"]
    },
    output: {
		//输出目录
		path: './built'
		//输出地址,输出的事公共的 url 地址
		publicPath: './built',        
		//输出名称
		filename: 'bundle.js',
	}
}

module

定制如何编译文件,具体设置某类文件该如何编译,与 gulp 中的 pipe 类似
在 webpack 中任何文件都是一个模块,这个模块如何编译由 module 来决定

module.loaders

{
	module : {
		loaders : [
			{	
				//判断需要满足编译条件的文件
				test: /\.js[x]$/, //此处是正则表达式
				//排除的文件,排除这个目录下的文件
				exclude: /node_modules/,
				//使用什么模块来编译
				loader: ['babel'],
				//可选配置,用于处理 loader 编译的编译配置参数
				query : {
					
				}
			}
		]
	}
}

查看关于 loaders 的更多配置选项

resolve

配合模块使用, 该配置会覆盖 module.loaders 里的配置
{
	resolve: {
	    //定义模块查找从什么目录开始
	    //必须是绝对路径
	    root: [ path root ], 
	    // 自动扩展文件后缀名,
	    // require 模块时可以省略不写后缀名
	    extensions: ['', '.js', '.json', '.scss'],
	    // 模块别名定义,方便后续直接引用别名,无须多写长长的地址
	    //
	    alias: {
	       //  require.js 中的 config.paths 一样  
	    }
	}
}

浏览官网更多配置资料

快捷命令

webpack -w  监听文件变化

webpack -d  源码输出

webpack -p  压缩