一小时上手webpack(基础使用指南含demo)

一、什么是webpack

官方定义:

webpack is a module bundler lets you write any module format(mixed also), compiles then for the browser. And it supports static async bundling.

简单的说webpack是一个构建工具,什么是构建工具呢,我们在开发环境的代码,是为了方便阅读与开发,生产环境的代码则是为了代码更好的运行。开发环境的代码,要进行压缩编译以后,才能放在线上执行,这样代码体积更小,加载起来更快,所以构建工具一般有以下几种作用:

1、代码压缩

将JS、CSS代码混淆压缩,让代码体积更小,加载更快

2、编译语法

编写CSS时使用Less、Sass,编写JS时使用ES6、TypeScript等,这些标准目前都无法被浏览器兼容,因此需要构建工具编译,例如使用Babel编译ES6语法。

3、处理模块化:

CSS和JS的模块化语法,目前都无法被浏览器兼容。因此开发环境可以使用既定的模块化语法,但是需要构建工具将模块化语法编译为浏览器可识别形式。例如使用webpack、Rollup等处理JS模块化。

二、why webpack

模块化

之前写过一篇关于模块化的文章,不管是AMD还是CMD,都是runtime的时候进行的,且浏览器的支持性还不是特别好,需要一个东西来进行转化。

loader

一个web不止有js,还有css和各种静态资源,webpack提供了各种loader来处理css和less、sass。

转载一个关于webpack诞生的故事:

2012年,一个叫做Tobias的,在Newberg(美国一个城市)读master的德国人要写一片学位论文。他之前是写c#的,从来没有写过一个web界面。他在一些特定的场景需要用到Google Web Toolkit中的一个叫做code splitting的功能。而在他的论文中他需要写一个web app,他就想找一个包含这个功能的库来用。他找到的这个库叫webmake,这也是一个bundler。但是却没有code splitting这个功能,于是他提了一个issue,并且写了一堆如何实现这个功能的代码,希望维护者能够加入这个功能。在一番讨论过后维护者拒绝了他,于是在经过同意之后,他把这个库fork到了了过去并自己加上了这个功能,给新的库取名为webpack。

2014年,Dan Abramov在Stack Overflow上提了一个关于hot module replacement的问题,Tobias用很大的篇幅给他介绍了这个还在开发的功能,详细解释了这个功能怎么在webpack里工作的,以及这个功能有多棒,你可以不用刷新浏览器了!

2015年,这时在Instagram工作的Pete Hunt通过一次演讲告诉了世界他们是如何使用webpack打包发布他们的react app的。然后你懂得,webpack就火了。像Facebook这样的公司也开始使用webpack了。但是其实Tobias只是每周大概花5 6个小时在webpack中。

是的,在这两个讨论中,webpack彻底火了,走向了世界。

三、搭建环境

创建项目

创建一个项目目录并生成 package.json。npm 使用它来管理项目依赖项。以下是基本命令:

mkdir webpack-demo cd webpack-demo npm init -y

安装 Webpack

npm install webpack webpack-cli --save-dev

运行webpack

在src目录下新建一个index.js

console.log(111)

执行命令:

webpack

自动会生成一个dist文件夹,main.js里面会生成一个

console.log(111)

四、配置 html-webpack-plugin

可以借助html-webpack-plugin来新建一个HTML文件在浏览器看效果

npm install html-webpack-plugin --save-dev

新建一个webpack.config.js

const HtmlWebpackPlugin = require(html-webpack-plugin) module.exports = { plugins: [ new HtmlWebpackPlugin({ title: Webpack demo }) ] }

修改index.js

document.write(你好世界!!!)

执行命令:webpack,会看到dist文件下会多出来一个index.html,在浏览器打开index.html就出现熟悉的页面了

五、配置webpack-dev-server

WDS 是在内存中运行的开发服务器,这意味着打包内容不会写入文件而是存储在内存中。这一区别在调试代码和样式时非常重要。

默认情况下,WDS 会在您开发应用程序时自动在浏览器中刷新内容,因此您无需亲自执行此操作。但它也支持高级 Webpack 功能——热模块更换(HMR)。

安装

npm install webpack-dev-server --save-dev

配置

我们需要用npm script来启动他,按照npm的约定,我们定义一个命令,在package.json文件里面:

"scripts": { "start": "webpack-dev-server --mode development", "build": "webpack --mode production" },

这肯定是非常眼熟了,我们在使用vue-cli的时候一定会有类似的命令

启动

正常情况下,输入命令npm start或者npm run start就可以启动项目了

但是一般情况下都会报这个错,因为webpack和WDS对于版本的兼容性要求很高,这一点也非常的恶心

我的解决方案是在package.json文件里面:

"webpack": "^4.17.1", "webpack-cli": "^3.3.9", "webpack-dev-server": "^3.8.2"

然后重新npm install,再次启动项目就好了

如果你尝试修改代码,你应该会在终端里看到一些输出信息。浏览器也会根据变动做一些强制更新。

基础配置 WDS

webpack.config.js

devServer: { // 仅显示错误级别的输出,从而减少输出信息 stats: "errors-only", // 从环境变量中传入 host 和 port,从而达到可配置 // // 如果你使用 Docker, Vagrant 或者 Cloud9, 那么把 // host 设置为 "0.0.0.0"; // // 0.0.0.0 对于所有的网络设备都是可用的 // 而默认的 `localhost` 不行. host: process.env.HOST, // 默认为 `localhost` port: process.env.PORT, // 默认为 8080 open: true, // 在浏览器中打开 },

通过网络访问开发服务器

webpack.config.js

host: 0.0.0.0,

package.json

"start": "webpack-dev-server --host 0.0.0.0 --mode development",

此时启动以后就可以用过本机IP地址访问本地服务了

修改配置文件热更新

当打包文件发生变化时,开发服务器会自动重启;但是,当 Webpack 配置变化了呢?如果说,每次配置变动你就要手动重启开发服务器,没过一会儿,你就会厌烦不堪了。如 GitHub 中所讨论的那样,我们可以使用 nodemon 监视工具自动执行该过程。

安装nodemon

npm install nodemon --save-dev

package.json

"start": "nodemon --watch webpack.config.js --host 0.0.0.0 --exec \"webpack-dev-server --mode development\"",

轮询而不是监测文件

这个选项适合有时候热更新不管用了,可以试一下这个选项,基本都能解决

devServer: { watchOptions: { // 首次更改后延迟多少时间再重新构建 aggregateTimeout: 300, // 轮询的时间间隔 (单位 ms, 接受 Boolean 类型的值) poll: 1000, }, },

六、Webpack Dev Middleware

webpack-dev-middleware是一个包装程序,它将通过webpack处理的文件发送到服务器。它在webpack-dev-server内部使用,但是如果需要,它可以作为单独的软件包使用,以允许进行更多自定义设置。我们将看一个webpack-dev-middleware与Express服务器结合的示例。

安装

npm install --save-dev express webpack-dev-middleware

webpack.config.js的output新增一个输出地址

module.exports = { devServer: { // 仅显示错误级别的输出,从而减少输出信息 stats: "errors-only", // 从环境变量中传入 host 和 port,从而达到可配置 // // 如果你使用 Docker, Vagrant 或者 Cloud9, 那么把 // host 设置为 "0.0.0.0"; // // 0.0.0.0 对于所有的网络设备都是可用的 // 而默认的 `localhost` 不行. host: 0.0.0.0, // 默认为 `localhost` port: process.env.PORT, // 默认为 8080 useLocalIp: true, open: false, // 在浏览器中打开 watchOptions: { // 首次更改后延迟多少时间再重新构建 aggregateTimeout: 300, // 轮询的时间间隔 (单位 ms, 接受 Boolean 类型的值) poll: 1000, }, }, output: { publicPath: /, }, plugins: [ new HtmlWebpackPlugin({ title: Webpack demo }) ] }

新建一个server.js

const express = require(express); const webpack = require(webpack); const webpackDevMiddleware = require(webpack-dev-middleware); const app = express(); const config = require(./webpack.config.js); const compiler = webpack(config); // Tell express to use the webpack-dev-middleware and use the webpack.config.js // configuration file as a base. app.use( webpackDevMiddleware(compiler, { publicPath: config.output.publicPath, }) ); // Serve the files on port 3000. app.listen(3000, function () { console.log(Example app listening on port 3000!\n); });

package.json加一个命令

"scripts": { "start": "nodemon --watch webpack.config.js --host 0.0.0.0 --exec \"webpack-dev-server --mode development\"", "build": "webpack --mode production", "server": "node server.js", "test": "echo \"Error: no test specified\" && exit 1" },

运行

npm run server

在localhost:3000就可以看到输出的服务了

记在最后

webpack内容非常多,接下来还会继续记录loader和分包加载以及各种插件

欢迎关注一起交流前端技术