文章有参看其他博主文章,本文章仅作用于简单回顾使用,不能作为新手入门教程
- http://www.woc12138.com/article/45
- https://segmentfault.com/a/1190000006178770
- https://www.cnblogs.com/joyco773/p/9049693.html
- https://www.jianshu.com/p/941bfaf13be1/
- https://www.cnblogs.com/minghui007/p/7390247.html
一、概念
1.什么是webpack
WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。
- webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler)
- 在webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理
- 它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源(bundle)
2.webpack的工作方式
Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件。
看下面一张图
看这个图就很明白了:
- 对于一份同逻辑的代码,当我们手写下一个一个的文件,它们无论是 ESM 还是 commonJS 或是 AMD,他们都是 module ;
- 当我们写的 module 源文件传到 webpack 进行打包时,webpack 会根据文件引用关系生成 chunk 文件,webpack 会对这个 chunk 文件进行一些操作;
- webpack 处理好 chunk 文件后,最后会输出 bundle 文件,这个 bundle 文件包含了经过加载和编译的最终源文件,所以它可以直接在浏览器中运行。
一般来说一个 chunk 对应一个 bundle,比如上图中的 utils.js -> chunks 1 -> utils.bundle.js
;但也有例外,比如说上图中,我就用 MiniCssExtractPlugin
从 chunks 0 中抽离出了 index.bundle.css
文件。
总结就是:module
,chunk
和 bundle
其实就是同一份逻辑代码在不同转换场景下的取了三个名字:
我们直接写出来的是 module,webpack 处理时是 chunk,最后生成浏览器可以直接运行的 bundle。
3.webpack的5个核心概念
概念 | 说明 |
---|---|
Entry | 入口(Entry):指示 webpack 以哪个文件为入口起点开始打包,分析构建内部依赖图 |
Output | 输出(Output):指示 webpack 打包后的资源 bundles 输出到哪里去,以及如何命名 |
Loader | 加载器(Loader):让 webpack 能够去处理那些非 JS 的文件,比如样式文件、图片文件(webpack 自身只理解JS) |
Plugins | 插件(Plugins):可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩, 一直到重新定义环境中的变量等。 |
Mode | 模式(Mode):指示 webpack 使用相应模式的配置 |
Mode模式:
选项 | 描述 |
---|---|
development | 将 process.env.NODE_ENV 的值设置为 development。此模式是能让代码本地调试运行的环境。 启用的插件:NamedChunksPlugin 和 NamedModulesPlugin |
production | 将process.env.NODE_ENV 的值设置为 production。能让代码优化上线运行的环境 启用的插件:FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin。 |
二、基本入门
1.初始化配置
初始化 package.json:npm init
npm init
2.安装依赖
webpack4以上的版本需要全局/本地安装webpack-cli
全局安装:
npm install webpack webpack-cli -g
在当前项目目录安装:
npm install --save webpack webpack-cli
3.创建项目
项目基本目录结构如下:
创建一个index.js文件作为入口文件,放在src目录下:
// 先只打印一行内容
console.log('初次使用webpack');
然后使用命令进行编译:
// 这行命令的意思就是:
// 编译 这个目录 输出到 这个目录下 使用环境为开发环境
webpack ./src/index.js -o ./build/built.js --mode=development
// 注意:新版的webpack输出目录可以不指定文件名,默认会生成一个main.js
webpack ./src/index.js -o ./build --mode=development
最后在build目录下生成了一个main.js
/*
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
* This devtool is not neither made for production nor for readable output files.
* It uses "eval()" calls to create a separate source file in the browser devtools.
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
* or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/
/******/ (() => {
// webpackBootstrap
/*!**********************!*\
!*** ./src/index.js ***!
\**********************/
/*! unknown exports (runtime-defined) */
/*! runtime requirements: */
eval("console.log('初次使用webpack');\n\n//# sourceURL=webpack://webpack_use/./src/index.js?");
/******/ })();
总结:
-
webpack 本身能处理 js/json 资源,不能处理 css/img 等其他资源
-
生产环境和开发环境将 ES6 模块化编译成浏览器能识别的模块化,但是不能处理 ES6 的基本语法转化为 ES5(需要借助 loader)
-
生产环境会压缩js代码,而开发环境更多的是调试信息
三、webpack开发环境的配置
上面的步骤仅仅是只处理了js代码,由于webpack自身就能编译处理基本的js资源,所以无需额外的配置,但是如果处理css,img等就需要loader或者plugin了
1.wepack的配置文件
webpack.config.js 是 webpack 的配置文件,作用:
-
指示 webpack 干哪些活(当你运行 webpack 指令时,会加载里面的配置)
-
所有构建工具都是基于 nodejs 平台运行的,模块化默认采用 commonjs。
-
配置文件的命名必须是webpack.config.js,也许在未来的版本可能会支持自定义命名
2.开发环境的配置方面
开发环境配置主要是为了能让代码运行,并获得更多的调试信息。主要考虑以下几个方面:
- 打包样式资源
- 打包 html 资源
- 打包图片资源
- 打包其他资源
- devServer
3.处理各项资源
3.1打包JS资源
创建webpack.config.js文件,位于项目根目录下,然后配置一下选项
// 引入Node核心模块path,用来处理路径
const path = require ('path');
module.exports = {
// 指定入口文件
entry: './src/index.js',
// 输出配置参数
output: {
// 输出的文件名
filename: 'main.js',
// 输出路径
path: path.resolve(__dirname,'build/js')
},
// 指定运行环境
mode: 'development'
};
使用webpack命令进行编译,可以看到成功的编译了js文件,无需任何配置
3.2打包css资源
在css目录下新建一个mystyle.css文件,然后输入一下代码
div {
width: 200px;
height: 200px;
background-color: skyblue;
}
在index.js中引入css样式
import './css/mystyle.css'
安装css-loader,style-loader,此loader可以处理css资源,不安装会导致编译报错
npm install --save css-loader style-loader
修改webpack.config.js,增加module参数
module.exports = {
...
// loader选项配置
module: {
rules: [{
// 表示要处理css资源,匹配css文件名后缀
test: /\.css/,
// 要使用的loader,注意:这里loader的执行顺序为数组的倒序
// 使用多个Loader用use声明
use:['style-loader','css-loader']
}]
}
}
当控制台输出webpack compiled successfully in 315 ms,说明打包css资源成功
同样的打包less资源需要引入Less-loader即可
// 使用命令安装less-loader
npm install --save less=loader
// 修改webpack配置项
module.export = {
...
// loader选项配置
module: {
rules: [
...
,{
// 匹配Less文件
test: /\.less/,
//使用less-loader
use:['less-loader']
}]
}
}
3.3打包html资源
在html文件夹下新建一个index.html,里面不需要放置任何内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
安装html-webpack-plugin
npm install --save html-webpack-plugin
修改配置文件
// 引入插件
const htmlWebpackPlugin = require('html-webpack-plugin');
// 创建插件并指定模板
module.exports = {
...
// 插件配置参数
plugins:[
new htmlWebpackPlugin({
template: './src/html/index.html'
})
]
}
然后执行webpack命令,打包完成后到build目录下查看index.html,发现已经自动引入了js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
所以这个插件的作用就是帮助我们自动引入Js,css等,无需手动引入
3.4打包图片资源
在index.html中引入图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="../images/Angel.png" alt="">
</body>
</html>
由于在html中引入img图片在编译后会发生路径错误问题,导致解析不到图片,所以需要借助Loader来帮助我们处理图片资源
安装html-loader,url-loader,file-loader
npm install --save html-loader url-loader file-loader
配置loader
module.export = {
...,
modules:{
rules:[<