Webpack 基础与配置

作者 : svon

日期 : 2016年10月26日

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  压缩

转载于:https://my.oschina.net/u/4038989/blog/3019887