webpack5

声明:所有的文章demo都在我的仓库里 webpack5

起步

概念

webpack是用于编译JavaScript模块。

一个文件依赖另一个文件,包括静态资源(图片/css等),都会视为依赖关系。

在webpack处理程序时,会在入口处,根据依赖关系进行处理,生成一个依赖关系图,最终将所有的文件打包成一个bundle。

当浏览器发起请求时,大大节约了时间。

更新方向

  1. 尝试用持久性缓存来提高构建性能。
  2. 尝试用更好的算法和默认值来改进长期缓存。
  3. 尝试用更好的 Tree Shaking 和代码生成来改善包大小。
  4. 尝试改善与网络平台的兼容性。
  5. 尝试在不引入任何破坏性变化的情况下,清理那些在实现 v4 功能时处于奇怪状态的内部结构。
  6. 试图通过现在引入突破性的变化来为未来的功能做准备,使其能够尽可能长时间地保持在 v5 版本上。

安装

创建文件夹并初始化,文件夹中会出现package.js文件,是基础的一些配置,包括文件名称/版本/描述/入口文件/关键字/作者等。

npm init -y

安装webpackwebpack-cli工具,可以在终端运行webpack相关命令

node 8.2/npm 5.2.0提供npx命令,可以使用npx webpack去安装npx

根据相应的提示,安装webpack-cliwebpack

npm install -D webpack-cli

我安装的版本如下:

"devDependencies": {
    "webpack": "^5.1.0",
    "webpack-cli": "^4.0.0"
},

打包

使用npx webpack进行打包,会在/dist文件夹中,生成mian.js文件,这个是对index.js文件以及相应依赖进行的打包文件

出现如下结果,表示打包成功

9181cf9cb2f34e589baa75a4e266e32f~tplv k3u1fbpfcp watermark - webpack5文档解析(上)

在浏览器中打开index.html,出现结果如下:

6ecb1a97f21946ef83360a6a1441d393~tplv k3u1fbpfcp watermark - webpack5文档解析(上)

配置文件 webpack.config.js

在完成配置的webpack.config.js的文件夹后,再次打包,打包命令是npx webpack –config webpack.config.js

一般情况下,如果存在webpack.config.js文件,将默认选择根据这个配置文件进行打包,即npx webpack即可

其中–config表示根据什么文件配置进行打包,后面的参数就是对应的文件名称

配置文件里面都是一些配置,如loader/plugin/resolve

快捷方式

package.json文件中,配置script

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"
},

可快速的通过npm run build进行打包,效果跟之前的npx webpack一致。

*** 以上代码在webpack-demo1

管理资源

由于webpack只能打包js文件,但是其他文件,如图片/css等,如何打包呢?

基本的思路都是将相应的资源都转化成js文件

css

正常的css文件例子如下

安装 style-loadercss-loader

npm i --save-dev style-loader css-loader

webpack.config.js中配置相应的css,顺序很重要,’style-loader’,’css-loader’

最终打包出来的是一个js文件

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

3798038f2efb4c799d06a17f0837d66e~tplv k3u1fbpfcp watermark - webpack5文档解析(上)

上图展示的是在head中添加了style,由此我猜测,style-loader的作用是将css文件放置到head中去渲染,css-loader的作用是将css文件(包含其他形式的css,如.scss)转化成js文件

其他的比如less/sass等,都跟css写法保持一致,最需将匹配的test,改成相对应的文件后缀。

image图片

安装解析文件的loader,npm i --save-dev file-loader

并在module中进行配置

module:{
    rules:[{
        test:/\.(css|scss)$/,
        use:['style-loader','css-loader']
    },{
        test:/\.(png|jpeg|jpg|svg)$/,
        use:['file-loader']
    }]
}

41914e717a8e453d903786e3deaf6c0d~tplv k3u1fbpfcp watermark - webpack5文档解析(上)

如上图所示,发现webpack以及将路径转义了。

其他形式的文件,都是以上面相应的方法进行安装和配置即可。

*** 以上代码在webpack-demo2

管理输出

当文件程序变得复杂,而且在entry中使用多个入口,并输出多个bundle,如果要手动在index.html中添加,便使得整个代码看起来不便捷

b34f05484a0c496fb3b66b7ab3578e51~tplv k3u1fbpfcp watermark - webpack5文档解析(上)

这时使用插件html-webpack-plugin

html-webpack-plugin

这个插件可以自动更新index.html中有关js引入的文件

安装npm i --save-dev html-webpack-plugin

使用:

const HtmlWebpackPlugin=require('html-webpack-plugin')
plugins:[
    new HtmlWebpackPlugin({
        title:'管理输出'
    })
]

缺点是不能去除之前的旧文件,这时引入clean-webpack-plugin

clean-webpack-plugin

这个插件可去除/dist文件

在构建前去除/dist文件,可以达到效果

安装npm i --save-dev clean-webpack-plugin

使用:

const {CleanWebpackPlugin}=require('clean-webpack-plugin')
plugins:[
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
        title:'管理输出'
    })
]

*** 以上代码在webpack-demo3

开发环境

这部分是在开发环境,切不可在生产环境使用。

配置环境

webpack.config.js中进行mode的配置

mode:'development'

定位错误(source map)

打包文件时,由于打包到一个文件里,如果出现语法错误,只会定位到打包后的文件,对于我们查找问题就不太方便。

0c35171a78794775863f1eacf5e33b75~tplv k3u1fbpfcp watermark - webpack5文档解析(上)

source map有很多的配置,对于我们现在打包定位错误,只需其中的devtool配置即可。

devtool: 'inline-source-map',

如webpack-demo4中的例子所示,print.js中,刻意写错代码如:cnlll.log('This is output')

正常打包,在浏览器运行时,会在console里显示报错的文件,以及错误的原因。

自动编译

webpack-dev-server插件提供一个简单的web server,且具有热加载的功能。

安装npm i --save-dev webpack-dev-server

在配置文件中配置:

devServer:{
    contentBase:'./dist'
},

以上代码是告诉dev server,将dist文件下的文件,挂载到localhost:8080下。

package.json中进行配置口令运行 dev server

教程上建议如下配置

"start": "webpack-dev-serve --open"

在实践操作中,在执行npm run start时,我出现以下报错

> webpack-demo4@1.0.0 start /Users/alicezhao/Desktop/learn/demos/my-notes/tools/webpack/webpack5/webpack-demo4
> webpack-dev-server --open

internal/modules/cjs/loader.js:969
  throw err;
  ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- /Users/alicezhao/Desktop/learn/demos/my-notes/tools/webpack/webpack5/webpack-demo4/node_modules/webpack-dev-server/bin/webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:966:15)
    at Function.Module._load (internal/modules/cjs/loader.js:842:27)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/Users/alicezhao/Desktop/learn/demos/my-notes/tools/webpack/webpack5/webpack-demo4/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:1138:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/alicezhao/Desktop/learn/demos/my-notes/tools/webpack/webpack5/webpack-demo4/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webpack-demo4@1.0.0 start: `webpack-dev-server --open`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the webpack-demo4@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/alicezhao/.npm/_logs/2020-10-15T07_50_22_972Z-debug.log

我的有关webpack版本配置如下

"devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^4.5.0",
    "webpack": "^5.1.0",
    "webpack-cli": "^4.0.0",
    "webpack-dev-server": "^3.11.0"
},

我在github上找到相关的问题,看这里

webpack-dev-server版本不支持webpack5.0webpack-cli4.0

最终在package.json应做如下配置

"start": "webpack serve --mode development --env development"

再执行npm run start就正常启动。

d04f3ff90d764b47a6c4d3619f94c3db~tplv k3u1fbpfcp watermark - webpack5文档解析(上)

*** 以上代码在webpack-demo4

关注我,webpack5文档还有后续…

我的仓库地址,github,欢迎star~~

webpack5文档解析(上)

webpack5文档解析(上)插图

发表评论