一,Webpack简介
Webpack是前端项目自动化构建工具之一
和gulp,grunt不同,Webpack不仅仅是web构建工具,也称作模块打包器
在webpack的世界中,一切皆为模块,所以要本着模块化的概念去使用webpack
中文文档:https://webpack.docschina.org/
官方文档对Webpack的定义:
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)
二,Webpack模块和静态资源
Webpack依赖图:
左侧为依赖模块:
箭头表明了模块间的依赖关系
JS文件会依赖其他各模块(JS依赖CSS,CSS依赖图片)
右侧为打包后的静态资源
Webpack根据模块的依赖关系进行静态分析,生成对应的静态资源
Webpack中,前端的所有资源文件(js/json/css/img/less等)都会作为模块处理
注意:左侧模块中并没有html,在Webpack的世界中html不是模块
二,Webpack的四个核心概念
1,入口(entry)
告诉webpack使用哪个模块作为构建其内部依赖图的开始
webpack会找出入口起点直接和间接依赖的模块和库
每个依赖项都会被webpack处理并输出到bundles文件
在webpack配置文件中可以配置一个或多个entry属性来指定入口起点,默认值为"./src"
webpack.config.js
module.exports = {
entry: './path/to/my/entry/file.js'
};
2,出口(output)
告诉webpack将创建的bundles文件输出到哪里及如何命名这些文件,默认值为"./dist"
基本上,整个应用程序结构,都会被编译到你指定的输出路径的文件夹中。
可以在配置中通过output属性来配置处理过程:
webpack.config.js
// 一个 Node.js 核心模块,用于操作文件路径
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
// 指定bundle 的名称
path: path.resolve(__dirname, 'dist'),
// 指定bundle 生成的位置
filename: 'my-first-webpack.bundle.js'
}
};
3,加载器(loader)
Webpack只能加载Js和Json模块,当加载其他类型文件(模块)时,需要使用对应的loader进行转换
loader是运行在node.js环境中的JavaScript模块
loader是一个函数,输入源文件,输出转换结果
loader一般以xxx-loader方式命名,xxx代表loader的转换功能,如:json-loader
webpack-loader能将所有类型文件转换为应用程序的依赖图(和最终的bundle)可以直接引用的模块
注意:在webpack1.x中只能加载js,不能加载json模块
webpack.config.js
const path = require('path');
const config = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{
// 需要被转换的文件类型
test: /\.txt$/,
// 文件类型对应的转换器
use: 'raw-loader'
}
]
}
};
module.exports = config;
配置中,对一个单独的 module 对象定义了 rules 属性,包含两个必须属性:test 和 use。
当webpack发现,在 require()/import 语句中被解析为 ‘.txt’ 的路径时,打包前先使用raw-loader 转换
4,插件(plugins)
loader用于转换某些特定类型模块,而插件可用于处理各种各样的任务
插件帮助我们扩展一些功能,完成一些loader不能完成的工作
webpack 提供许多开箱可用的插件
webpack.config.js
// 通过require引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 用于访问内置插件
const webpack = require('webpack');
const config = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
// 添加插件到 plugins 数组中,多数插件可以通过option选项自定义
plugins: [
new webpack.optimize.UglifyJsPlugin(),
// 通过new 获取插件的一个实例
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
module.exports = config;
三,Webpack的版本差异:
Webpack目前有1.x,2.x,3.x,4.x版本
2.x和3.x版本用法相同,3.x在2.x版本的基础上添加了新功能
1.x和3.x版本的属性和配置存在差异,所以最好不要混用
建议npm全局安装Webpack后,再在本地项目中安装一个项目要求的版本