还学不会webpack?看这篇!
摘要: webpack入门教程。
- 原文:还学不会webpack?看这篇!
- 作者:MudOnTire
Fundebug经授权转载,版权归原作者所有。
Webpack已经流行好久了,但很多同学使用webpack时还是一头雾水,一下看到那么多文档、各种配置、各种loader、plugin立马就晕头转向了。我也不例外,以至于很长一段时间对webpack都是一知半解的状态。但是想要继续做好前端,webpack是必须得跨过的一道坎,其实掌握webpack并不难,只是我们没有找到正确的方法。本文就是我自己在学习webpack时的一点心得体会,供大家参考。
什么是webpack?
一句话概括:webpack是一个模块打包工具(module bundler)。重点在于两个关键词“模块”和“打包”。什么是模块呢?我们回顾一下曾经的前端开发方式,js文件通过script
标签静态引入,js文件之间由于没有强依赖关系,如果文件1要用到文件2的某些方法或变量,则必须将文件1放到文件2后面加载。随着项目的增大,js文件之间的依赖关系越发错综复杂,维护难度也越来越高。这样的困境驱使着前端工程师们不断探索新的开发模式,从后端、app的开发模式中我们获得灵感,为什么不能引入“模块”的概念让js文件之间可以相互引用呢?模块1要使用模块2的功能,只需要在该模块1中明确引用模块2就行了,而不用担心它们的排列顺序。基于这种理念,CommonJS和 AMD规范被创造了出来,然后有了require.js、system.js这样的前端模块加载工具和node的模块系统,直到现在流行的es6 module。
模块的引入解决了文件之间依赖引用的问题,而打包则解决了文件过多的问题。当项目规模增大,模块的数量数以千计,浏览器如果要加载如此多的文件,页面加载的速度势必会受影响,而bundler可以把多个关联的文件打包到一起从而大量减少文件的数量提高网页加载性能。提供模块化的开发方式和编译打包功能就是webpack的核心,其他很多功能都围绕它们展开。
核心概念
Module(模块)
对于webpack,模块不仅仅是javascript模块,它包括了任何类型的源文件,不管是图片、字体、json文件都是一个个模块。Webpack支持以下的方式引用模块:
- ES2015
import
方法 - CommonJs
require()
方法 - AMD
define
和require
语法 - css/sass/less文件中的 @import 语法
url(...)
和<img src=...>
中的图片路径
Dependency Graph(依赖关系图)
所谓的依赖关系图是webpack根据每个模块之间的依赖关系递归生成的一张内部逻辑图,有了这张依赖关系图,webpack就能按图索骥把所有需要模块打包成一个bundle文件了。
Entry(入口)
绘制依赖关系图的起始文件被称为entry。默认的entry为 ./src/index.js
,或者我们可以在配置文件中配置。entry可以为一个也可以为多个。
单个entry:
module.exports = {
entry: './src/index.js'
}
或者
module.exports = {
entry: {
main: './src/index.js'
}
};
多个entry,一个chunk
我们也可以指定多个独立的文件为entry,但将它们打包到一个chunk中,此种方法被称为 multi-main entry,我们需要传入文件路径的数组:
module.exports = {
entry: ['./src/index.js', './src/index2.js', './src/index3.js']
}
但是改种方法的灵活性和扩展性有限,因此并不推荐使用。
多个entry,多个chunk
如果有多个entry,并且每个entry生成对应的chunk,我们需要传入object:
module.exports = {
entry: {
app: './src/app.js',
admin: './src/admin.js'
}
};
这种写法有最好的灵活性和扩展性,支持和其他的局部配置(partial configuration)进行合并。比如将开发环境和生产的配置分离,并抽离出公共的配置,在不同的环境下运行时再将环境配置和公共配置进行合并。
Output(出口)
有了入口,对应的就有出口。顾名思义,出口就是webpack打包完成的输出,output定义了输出的路径和文件名称。Webpack的默认的输出路径为 ./dist/main.js
。同样,我们可以在配置文件中配置output:
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/dist',
filename: 'bundle.js'
}
};
多个entry的情况
当有多个entry的时候,一个entry应该对应一个output,此时输出的文件名需要使用替换符(substitutions)声明以确保文件名的唯一性,例如使用入口模块的名称:
module.exports = {
entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
filename: '[name].js',
path: __dirname + '/dist'
}
}
最终在 ./dist
路径下面会生成 app.js
和search.js
两个bundle文件。
Loader
Webpack自身只支持加载js和json模块,而webpack的理念是让所有的文件都能被引用和加载并生成依赖关系图,所以loader出场了。Loader能让webpack能够去处理其他类型的文件(比如图片、字体文件、xml)。我们可以在配置文件中这样定义一个loader:
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.txt$/,
use: 'raw-loader'
}
]
}
};
其中test
定义了需要被转化的文件或者文件类型,use
定义了对该文件进行转化的loader的类型。该条配置相当于告诉webpack当遇到一个txt文件的引用时(使用require或者import进行引用),先用raw-loader
转换一下该文件再把它打包进bundle。
还有其他各种类型的loader,比如加载css文件的css-loader
,加载图片和字体文件的file-loader
,加载html文件的html-loader
,将最新JS语法转换成ES5的babel-loader
等等。完整列表请参考 webpack loaders。
Plugin(插件)
Plugin和loader是两个比较混淆和模糊的概念。Loader是用来转换和加载特定类型的文件,所以loader的执行层面是单个的源文件。而plugin可以实现的功能更强大,plugin可以监听webpack处理过程中的关键事件,深度集成进webpack的编译器,可以说plugin的执行层面是整个构建过程。Plugin系统是构成webpack的主干,webpack自身也基于plugin系统搭建,webpack有丰富的内置插件和外部插件,并且允许用户自定义插件。官方列出的插件有 这些。
与loader不同,使用plugin我们必须先引用该插件,例如:
const webpack = require('webpack'); // 用于引用webpack内置插件
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 外部插件
module.exports = {
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
推荐大家使用Fundebug,一款很好用的BUG监控工具~
实践
了解webpack的基本概念之后,我们通过实践来加深理解。接下来,我们使用webpack搭建一个简易的react脚手架。
创建项目
首先创建react-webpack-starter
项目并使用 npm init
初始化。
安装依赖
安装react
npm i react react-dom
安装webpack相关
npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin style-loader css-loader
安装webpack-cli
后可以在命令行中执行webpack命令;webpack-dev-server
提供了简易的web服务器,并且在修改文件之后自动执行webpack的编译操作并自动刷新浏览器,省去了重复的手动操作;html-webpack-plugin
用于自动生成index.html
文件,并且在index.html
中自动添加对bundle文件的引用;style-loader
和css-loader
用于加载css文件。
安装babel相关
由于react中使用了class
, import
这样的es6的语法,为了提高网站的浏览器兼容性,我们需要用babel转换一下。
npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader
其中@babel/core
是babel的核心模块,包含了babel的核心功能;@babel/preset-env
支持转换ES6以及更新的js语法,并且可根据需要兼容的浏览器类型选择加载的plugin从而精简生成的代码;@babel/preset-react
包含了babel转换react所需要的plugin;babel-loader
是webpack的babel加载器。
配置webpack
在项目根目录下面新建webpack.config.js
,内容如下:
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_module/,
use: 'babel-loader'
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'] // 注意排列顺序,执行顺序与排列顺序相反
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
}
其中HtmlWebpackPlugin
使用自定义的模版来生成html 文件,模版的内容如下:
./src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My React App</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
配置babel
在项目根目录下面新建.babelrc
文件,配置我们安装的两个babel preset:
.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
生成react应用根节点
./src/index
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(<App />, document.getElementById('app'));
./src/component/App.js
import React, { Component } from 'react';
import './App.css';
export default class App extends Component {
render() {
return (
<div>
my react webpack starter
</div>
)
}
}
./src/components/App.css
body{
font-size: 60px;
font-weight: bolder;
color: red;
text-transform: uppercase;
}
配置 package.json
最后,在package.json
文件里面加上两个scripts,用来运行开发服务器和打包:
package.json
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
}
注意,我们启用了webpack-dev-server
的模块热更新功能(HMR),进一步提高我们的开发效率。
到此一个最简版本的react脚手架就搭建完成了,我们运行一下看看效果:
是不是没有想象中的那么难呢?当然webpack还有很多其他的功能和特性需要掌握,希望在参考本文之后大家进一步的学习更加顺利
还学不会webpack?看这篇!的更多相关文章
- 入门webpack,看这篇就够了
什么是webpack? 官网给出的概念是:本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递 ...
- 如何让HTTPS站点评级达到A+? 还得看这篇HTTPS安全优化配置最佳实践指南
0x00 前言简述 SSL/TLS 简单说明 描述: 当下越来越多的网站管理员为企业站点或自己的站点进行了SSL/TLS配置, SSL/TLS 是一种简单易懂的技术,它很容易部署及运行,但要对其进行安 ...
- Java设计模式(十三) 别人再问你设计模式,叫他看这篇文章
原创文章,转载请务注明出处 OOP三大基本特性 封装 封装,也就是把客观事物封装成抽象的类,并且类可以把自己的属性和方法只让可信的类操作,对不可信的进行信息隐藏. 继承 继承是指这样一种能力,它可以使 ...
- ASP.NET Core WebApi使用Swagger生成api说明文档看这篇就够了
引言 在使用asp.net core 进行api开发完成后,书写api说明文档对于程序员来说想必是件很痛苦的事情吧,但文档又必须写,而且文档的格式如果没有具体要求的话,最终完成的文档则完全取决于开发者 ...
- .NET Core实战项目之CMS 第二章 入门篇-快速入门ASP.NET Core看这篇就够了
作者:依乐祝 原文链接:https://www.cnblogs.com/yilezhu/p/9985451.html 本来这篇只是想简单介绍下ASP.NET Core MVC项目的(毕竟要照顾到很多新 ...
- 转 Redis 总结精讲 看一篇成高手系统-4
转 Redis 总结精讲 看一篇成高手系统-4 2018年05月31日 09:00:05 hjm4702192 阅读数:125633 本文围绕以下几点进行阐述 1.为什么使用redis 2.使用r ...
- [译]ASP.NET Core Web API 中使用Oracle数据库和Dapper看这篇就够了
[译]ASP.NET Core Web API 中使用Oracle数据库和Dapper看这篇就够了 本文首发自:博客园 文章地址: https://www.cnblogs.com/yilezhu/p/ ...
- Elasticsearch 5.0 —— Head插件部署指南(Head目前支持5.0了!请不要看本篇文章了)
使用ES的基本都会使用过head,但是版本升级到5.0后,head插件就不好使了.下面就看看如何在5.0中启动Head插件吧! Head目前支持5.0了!请不要看本篇文章了 Head目前支持5.0了! ...
- 集合类--最详细的面试宝典--看这篇就够用了(java 1.8)
看了一个星期源码,搜索上百篇博文,终于总结出了集合类的所有基础知识点,学集合,看这篇就够用了!!! 篇幅有点长, 如果你能全部理解,java最重要的集合就不怕了,秒过面试!!!(本篇素材来自网络,如有 ...
随机推荐
- phpstudy配置虚拟域名
之前有一篇使用xampp配置虚拟域名,但是不同公司使用的集成环境不同,(xampp是我自己用的,别误解(><) !)这次使用的phpstudy,相比较而言,phpstudy更简单一点 首先 ...
- JS之for循环面试题
今天同事问了道问题 ,b=; ,b<;++a,++b){ g=a+b } console.log(g) 问输出结果为多少??? 答案:12 这里要知道for循环的条件不管写多少个,必须都满足才可 ...
- remote: http basic: access denied fatal: authentication failed for '‘解决办法
问题描述 由于这个项目代码使用https 进行clone,为什么?因为代码库ssh有问题!fuck! 导致在push代码的时候出现了 remote: http basic: access denied ...
- 牛客OI周赛13-提高组-0还是1-(dp+位运算)
https://ac.nowcoder.com/acm/contest/2970/A 给出长度为n的一连串位运算符号,用n+1个0或1使运算插入最后得到1,求01序列有多少种可能. dp[i][j]表 ...
- mysql数据库的批量数据导入与导出,性能提升。
少量数据批量导入:1. 先从数据库把唯一键的值查询出来,放在列表2. 将导入的数据遍历取出,看是否存在列表中,若不在,说明数据库没有.3. 定义两个空列表,一个做为插入数据,一个做为更新数据4. 步骤 ...
- Python接口自动化测试框架实战 从设计到开发
第1章 课程介绍(不要错过)本章主要讲解课程的详细安排.课程学习要求.课程面向用户等,让大家很直观的对课程有整体认知! 第2章 接口测试工具Fiddler的运用本章重点讲解如何抓app\web的htt ...
- LinkCutTree学习笔记
LinkCutTree 学习笔记 参考来源 https://www.zybuluo.com/xzyxzy/note/1027479 https://www.cnblogs.com/zhoushuyu/ ...
- Linux宝塔安装步骤
首先:先运行 X shell 一:输入命令 Centos安装命令(一般都用这个): yum install -y wget && wget -O install.sh http://d ...
- java8 LinkedHashMap 原理
LinkedHashMap 原理 基于jdk1.8 HashMap原理:http://www.cnblogs.com/zhaojj/p/7805376.html LinkedHashMap 继承Has ...
- guava(三)字符串处理 Joiner Splitter CharMatcher
一.Joiner 拼接字符串 1.join 拼接集合中的元素 System.out.println(Joiner.on(";").join(Ints.asList(1,2,3))) ...