前端小白webpack学习（一）

俗话说得好，好记性不如烂笔头。

之前就在学习中看过webpack的教程，然而一段时间没用，火速的忘光了。写这篇博文，做个总结，也让自己以后有个地方回顾。

看webpack之前，我先去看了一下官方文档，先了解一下webpack的几个概念。我是中英文文档搀着看的，一些小地方中文文档里没写，英文文档里都给了小提示。（下面的概念是我自己翻译总计的，略渣）

concepts

At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.

本质上，webpack是一个为现代JavaScript应用服务静态模块打包器。当webpack处理你的程序时，它实际上是在内部生成了一个指向所有你的项目所需要的模块的依赖图，然后生成一个或多个bundle。

四大基本概念

entry point 显示了webpack应当使用哪个模块去开始他的附加依赖关系图。entry默认值为 ./src/index.js，也可以自定义设置。

webpack.config.js

module.exports = {

	entry:'./js/main.js'

}

output属性会告诉webpack从哪里输出它创建的bundles以及怎样命名那些文件。output主输出文件默认值为./dist/main.js,其他打包生成的文件默认值为./dist。output也可被自定义设置。

webpack.config.js

const path = require('path');

module.exports = {

	output:{

		path:"path.join(__dirname,'dist')",

		filenames:'bundle.js'

	}

}

webpack自身只能解析JavaScript和JSON文件。Loader允许它去处理其他类型的文件，并将这些文件转化成你的程序可使用的模块然后添加到依赖图里去。

要注意的是，webpack的一个典型特征是能够import其他类型的文件，例如.css文件，这可能不背其他打包器或task runner所支持。但是我们认为，对于能够让开发者构建一个更加精确的依赖图来说，这些语言的扩展是很有必要的。

在webpack配置中，loader有两大属性：

test 属性表示需要被转换的文件类型

use属性表示转换这些文件需要被使用的loader

注意：

loader的定义应当被定义在module.rules而不是rules下，test和use是两个必需定义的属性

当用正则表达式匹配文件时，最好不要加引号。例如：/.css/会告诉webpack去匹配所有以.css结尾的文件，而'/.css/'或"/.css/"只会匹配唯一一个以'.css'命名的文件。

webpack.config.js

const path = require('path');

module.exports = {

	module:{

		rules:[

			{test:/\.css/,use:['style-loader','css-loader']}

		]

	}

}

loaders被用来转换某些特定类型的模块，plugins可以用来实现更广范围的任务执行例如文件的打包优化、文件管理和环境变量的注入等。

使用plugins时，你需要先require('plugins-name') 然后再将它加入到plugins数组中去。大多数plugins都是可以通过options选项定义的。你可以定义一个对象去接受它，然后通过new去多次使用。

webpack.config.js

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

const webpack = require('webpack');

module.exports = {

	//该插件会生成一个以index.html为模板，并自动链接所有打包文件的HTML

	plugins:[

		new HtmlWebpackPlugin({template:'./src/index.html'})

	]

}

设置mode变量可以让webpack的打包更好的适用于各个不同的环境。默认值为production，可选的值有development、production和none。

module.exports = {

	mode:"production"

}

webpack兼容所有支持ES5的浏览器（IE8及其以下不支持）。webpack需要使用promise去import()和require.ensure()。如果你想要支持低版本的浏览器，需要下载polyfill。

webpack需要在8.x或更高的node环境下运行。

下篇开始webpack的使用。前端小白webpack学习（二）

巴特西

前端小白webpack学习（一）

最新文章

热门文章