初识Webpack（一）

初识Webpack

• Webpack
• • 概念
  • • 一. 入口(entry)
    • 二. 输出(output)
    • 三. 加载器(loader)
    • 四. 插件(plugins)

Webpack

webpack 是当下最热门的前端资源模块化管理和打包工具.

它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.

还可以将按需加载的模块进行代码分隔,等到实际需要的时候在异步加载.

通过loader的转换,任何形式的资源都可以视作模块.比如:CommonJS,AMD,ES6,CSS,图片,JSON,Coffeescript,LESS等.

webpack已经是大部分前端项目打包工具的首选，grunt、glup、browserify等逐渐沦为辅助甚至完全被替代。

概念

本质上,webpack是一个现代JavaScript应用程序的 静态模块打包器.当webpack处理应用程序时,它会递归的构建一个依赖关系图.其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle

四个核心概念:
		1. 入口(entry)
		2. 输出(output)
		3. 加载器(loader)
		4. 插件(plugins)
           

一. 入口(entry)

入口指webpack应该使用哪个模块来作为构建其内部依赖图的开始.进入后,webpack会找出有哪些模块和库是入口所(直接和间接)依赖的.
每个依赖项随即被处理,最后输出到称之为bundles的文件中.
           

例如:

module.export = {
	entry: './main.js'
};
           

二. 输出(output)

output属性告诉webpack在哪里输出它所创建的bundles,以及如何命名这些文件,默认值为 ./dist
基本上,整个应用程序结构,都会被编译到你指定的输出路径的文件夹中.可以通过在配置中指定一个output字段,配置这个过程.
           

例如:

const path = require('path');

module.export = {
	entry: './main.js',
	output: {
		path:path.resolve(__dirname,'dist'),
		filename:'my-webpack.bundle.js'
	}
};
           

上例中,通过output.filename和output.path属性,来告诉webpack bundle的名称.以及我们想要bundle生成到哪里.

三. 加载器(loader)

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后就可以利用 webpack 的打包能力，对它们进行处理。

本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。

const path = require('path');

module.exports = {
	output:{
		filename:'my-webpack.bundle.js'
	},
	module:{
		rules:[{
			test:/\.txt$/,
			use:'raw-loader'
		}]
	}
};
           

以上配置中,对一个单独的module对象定义了rules属性,里面包含两个必须属性,test和use.主要表示 当require()/import语句中被解析为’.txt’的路径时.先使用raw-loader转换

四. 插件(plugins)

想要使用一个插件，只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

const config = {
	module:{
		rules:[{
			test:/\.txt$/,
			use:'raw-loader'
		}]
	},
	plugins:[
		new webpack.optimize.UglifyJsPlugin(),
		new HtmlWebpackPlugin({template:'./src/index.html'})
	]
};

module.exports = config;