webpack是先进js应用的模块打包工具,它非常容易配置。在开始之前,需要掌握四个核心概念。
Entry(入口)
webpack创建了一个程序应用依赖图表。这个图表的起点是entry。entry告诉webpack从哪开始以及遵循怎样的依赖去打包文件。
在webpack中,在配置文件中使用entry属性定义entry。
下面是一个简单的例子:
module.exports = { entry: './dev/entry.js' };
当然,根据你的应用需求,还有很多的方法来生命entry属性。学习更多
Output(输出)
在将所有的文件绑定后,还需要一个存放的绑定好文件的地方。output属性告诉webpack怎样对待绑定好的代码。
下面是一个简单的例子:
const path = require('path'); module.exports = { entry: './dev/entry.js', output: { path: path.resolve(__dirname, 'dist'), //目录 filename: 'bundle.js' //输出文件名 } }
output属性也有很多的配置特性,学习更多。
Loaders(加载器)
loaders的目标是将项目中的所有文件变成webpack的事情,而不是浏览器的。(这并不意味着必须把所有文件打包在一起)。webpack将所有的文件(包括css、html、scss、图片等等)看成模块,但是webpack默认只能解析js。
当需要webpack解析除了js外的文件时,需要使用loaders。loaders将文件转成依赖图表所需要的模块。
在webpack配置中,loaders有两个目的:
- 确认某种文件需要转换(test属性)
- 转化文件成依赖图表需要的模块(use属性)
const path = require('path'); module.exports = { entry: './dev/entry.js', output: { path: path.resolve(__dirname, 'dist'), //目录 filename: 'bundle.js' //输出文件名 }, module: { rules: [ { test: /\.(js|jsx)&/, use: 'babel-loader' } ] } }
上面代码的rules属性的定义告诉webpack解析器:
当解析器遇到文件中带有'.js'或者'.jsx'的文件时,在把它打包前使用babel-loader进行转换。
注意:必须将rules定义在module属性里面,否则webpack会报错。
Plugins(插件)
由于Loaders针对的是每个文件的转换操作,plugins有更多的操作。webpack的Plugin是强大以及可自定义的,参见api。
使用插件,只需要require()它以及将它添加plugins数组里面。很多插件可以通过options自定义。由于你可以在一个配置里面出于不同的目的使用同一插件,你可以通过new创建一个插件的实例。
下面是一个简单的例子:
const path = require('path'); const webpack = require('webpack'); //获取内置的插件 const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过npm安装 module.exports = { entry: './dev/entry.js', output: { path: path.resolve(__dirname, 'dist'), //目录 filename: 'bundle.js' //输出文件名 }, module: { rules: [ { test: /\.(js|jsx)&/, use: 'babel-loader' } ] }, plugins: [ new webpack.optimize.UglifyJsPlugin(), new HtmlWebpackPlugin({template: './src/index.html'}) ] }
webpack还提供了很多其他的插件。
上面看到,使用插件是很容易的;然而,还有很多其他的深层次的使用案例,学习更多。