logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

webpack教程八：构建简单web服务器

 小小小舟 2019-12-09

目录

一、观察模式

二、webpack-dev-server

三、webpack-dev-middleware + express

    在前面文章的介绍使用webpack的过程中，我们每次需要打包源代码时，都需要在命令行中手动运行npm run bundle（脚本命令）进行打包。也就是每改一次源代码，都需要手动打包一次，这样就很麻烦。

    那么webpack有没有帮我们自动打包的机制呢？有的。。。。

    webpack有几种不同的选项，能够在代码发生变化后自动打包代码：

  • webpack's Watch Mode    ——    观察模式

  • webpack-dev-server    ——    简单web服务器

  • webpack-dev-middleware    ——    简单web服务器

一、观察模式

    webpack的观察模式能够在源代码改变时，自动进行代码重新打包。

    首先，需要添加一个用于启动webpack的观察模式的npm script脚本：

    package.json:

  1. {
  2. "name": "webpack-demo",
  3. "version": "1.0.0",
  4. "description": "",
  5. "private": true,
  6. "main": "index.js",
  7. "scripts": {
  8. "test": "echo \"Error: no test specified\" && exit 1",
  9. "bundle": "webpack",
  10. "watch": "webpack --watch"
  11. },
  12. "author": "ag_dubs <wombat@npmjs.com>",
  13. "license": "ISC",
  14. "devDependencies": {
  15. "autoprefixer": "^9.5.1",
  16. "clean-webpack-plugin": "^2.0.2",
  17. "css-loader": "^2.1.1",
  18. "file-loader": "^3.0.1",
  19. "html-webpack-plugin": "^3.2.0",
  20. "node-sass": "^4.12.0",
  21. "postcss-loader": "^3.0.0",
  22. "sass-loader": "^7.1.0",
  23. "style-loader": "^0.23.1",
  24. "stylus": "^0.54.5",
  25. "url-loader": "^1.1.2",
  26. "webpack": "^4.31.0",
  27. "webpack-cli": "^3.3.2"
  28. }
  29. }

    修改webpack.config.js:

    webpack.config.js:

  1. const path = require('path');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');  // 导入HtmlWebpackPlugin
  3. const CleanWebpackPlugin = require('clean-webpack-plugin');  // 导入CleanWebpackPlugin
  5. module.exports = {
  6. mode: 'development',
  7. devtool: 'cheap-module-eval-source-map',
  8. entry: {
  9. main: './src/index.js',
  10. },
  11. output: {
  12. filename: '[name].js',
  13. path: path.resolve(__dirname, 'dist')
  14. },
  15. module: {
  16. rules: [
  17. {
  18. test: /\.(png|svg|jpg|gif$)/,           // 文件后缀名匹配通配符
  19. use: [{
  20. loader: 'url-loader',               // 使用的loader
  21. options: {
  22. limit: 10240                    // 当图片小于10kb时，使用base64的方式进行打包
  23. }
  24. }]
  25. },
  26. {
  27. test: /\.scss$/,
  28. use: [
  29. 'style-loader',
  30. {
  31. loader: 'css-loader',
  32. options: {
  33. importLoaders: 2
  34. }
  35. },
  36. 'sass-loader',
  37. 'postcss-loader'
  38. ]
  39. },
  40. {
  41. test: /\.(woff|woff2|eot|ttf)$/,
  42. use: [
  43. 'file-loader'
  44. ]
  45. }
  46. ]
  47. },
  48. plugins: [
  49. new HtmlWebpackPlugin({
  50. filename: 'dist.html',              // 将自动生成的html文件的文件名改为dist.html
  51. template: './src/template.html'     // 模板
  52. }),
  53. new CleanWebpackPlugin()
  54. ]
  55. };

    修改index.js:

    index.js:

  1. console.log('hello world!');

    然后使用npm run watch脚本命令进行打包：

    使用浏览器打开dist.html:

    控制台打印了"hello world!"。

    现在修改index.js:

    index.js:

console.log('hello webpack!');

    然后刷新浏览器（注意没有进行重新打包操作），可以看到控制台：

    浏览器控制台也成功打印了"hello webpack!"。

    说明webpack在观察模式下会监听源代码，源代码一发生变化就自动进行重新打包操作。

    但是观察模式有一个唯一的缺点：为了看到修改后的实际效果，我们需要手动刷新浏览器。

    webpack-dev-server不仅能自动打包，还可以实现自动刷新浏览器的功能。

二、webpack-dev-server

    webpack的webpack-dev-server其实是在为我们构建了一个简单的web服务器，能够实时监听我们的代码变化，并能自动进行源代码打包。

    使用webpack-dev-server需要先安装webpack-dev-server：

    然后修改webpack.config.js：

    webpack.config.js:

  1. const path = require('path');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');  // 导入HtmlWebpackPlugin
  3. const CleanWebpackPlugin = require('clean-webpack-plugin');  // 导入CleanWebpackPlugin
  5. module.exports = {
  6. mode: 'development',
  7. devtool: 'cheap-module-eval-source-map',
  8. entry: {
  9. main: './src/index.js',
  10. },
  11. output: {
  12. filename: '[name].js',
  13. path: path.resolve(__dirname, 'dist')
  14. },
  15. devServer: {
  16. contentBase: './dist'   // 告诉dev-server在哪里查找文件
  17. },
  18. module: {
  19. rules: [
  20. {
  21. test: /\.(png|svg|jpg|gif$)/,           // 文件后缀名匹配通配符
  22. use: [{
  23. loader: 'url-loader',               // 使用的loader
  24. options: {
  25. limit: 10240                    // 当图片小于10kb时，使用base64的方式进行打包
  26. }
  27. }]
  28. },
  29. {
  30. test: /\.scss$/,
  31. use: [
  32. 'style-loader',
  33. {
  34. loader: 'css-loader',
  35. options: {
  36. importLoaders: 2
  37. }
  38. },
  39. 'sass-loader',
  40. 'postcss-loader'
  41. ]
  42. },
  43. {
  44. test: /\.(woff|woff2|eot|ttf)$/,
  45. use: [
  46. 'file-loader'
  47. ]
  48. }
  49. ]
  50. },
  51. plugins: [
  52. new HtmlWebpackPlugin({
  53. filename: 'dist.html',              // 将自动生成的html文件的文件名改为dist.html
  54. template: './src/template.html'     // 模板
  55. }),
  56. new CleanWebpackPlugin()
  57. ]
  58. };

    上面的devServer的配置告知webpack-dev-server，在localhost:8080下建立服务，将dist目录下的文件，作为可访问文件。

    接下来，还要添加一个npm script 脚本，用于直接运行webpack-dev-server服务器：

    package.json:

  1. {
  2. "name": "webpack-demo",
  3. "version": "1.0.0",
  4. "description": "",
  5. "private": true,
  6. "main": "index.js",
  7. "scripts": {
  8. "test": "echo \"Error: no test specified\" && exit 1",
  9. "bundle": "webpack",
  10. "watch": "webpack --watch",
  11. "server": "webpack-dev-server"
  12. },
  13. "author": "ag_dubs <wombat@npmjs.com>",
  14. "license": "ISC",
  15. "devDependencies": {
  16. "autoprefixer": "^9.5.1",
  17. "clean-webpack-plugin": "^2.0.2",
  18. "css-loader": "^2.1.1",
  19. "file-loader": "^3.0.1",
  20. "html-webpack-plugin": "^3.2.0",
  21. "node-sass": "^4.12.0",
  22. "postcss-loader": "^3.0.0",
  23. "sass-loader": "^7.1.0",
  24. "style-loader": "^0.23.1",
  25. "stylus": "^0.54.5",
  26. "url-loader": "^1.1.2",
  27. "webpack": "^4.31.0",
  28. "webpack-cli": "^3.3.2",
  29. "webpack-dev-server": "^3.6.0"
  30. }
  31. }

    然后使用npm run server进行打包，并开启webpack-dev-server服务器：

    打开浏览器，在地址栏输入http://localhost:8080/dist.html：

    控制台成功打印了hello webpack!。

    接下来，修改index.js：

    index.js:

console.log('hello world!');

    我们可以看到，浏览器无需刷新而成功打印出hello world!：

    刚才webpack-dev-server服务器是在8080的端口号上构建的，我们也可以修改成其他端口号：

    webpack.config.js:

  1. const path = require('path');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');  // 导入HtmlWebpackPlugin
  3. const CleanWebpackPlugin = require('clean-webpack-plugin');  // 导入CleanWebpackPlugin
  5. module.exports = {
  6. mode: 'development',
  7. // devtool: 'cheap-module-eval-source-map',
  8. entry: {
  9. main: './src/index.js',
  10. },
  11. output: {
  12. filename: '[name].js',
  13. path: path.resolve(__dirname, 'dist')
  14. },
  15. devServer: {
  16. contentBase: './dist',   // 告诉dev-server在哪里查找文件
  17. port: '8085'             // 端口号
  18. },
  19. module: {
  20. rules: [
  21. {
  22. test: /\.(png|svg|jpg|gif$)/,           // 文件后缀名匹配通配符
  23. use: [{
  24. loader: 'url-loader',               // 使用的loader
  25. options: {
  26. limit: 10240                    // 当图片小于10kb时，使用base64的方式进行打包
  27. }
  28. }]
  29. },
  30. {
  31. test: /\.scss$/,
  32. use: [
  33. 'style-loader',
  34. {
  35. loader: 'css-loader',
  36. options: {
  37. importLoaders: 2
  38. }
  39. },
  40. 'sass-loader',
  41. 'postcss-loader'
  42. ]
  43. },
  44. {
  45. test: /\.(woff|woff2|eot|ttf)$/,
  46. use: [
  47. 'file-loader'
  48. ]
  49. }
  50. ]
  51. },
  52. plugins: [
  53. new HtmlWebpackPlugin({
  54. filename: 'dist.html',              // 将自动生成的html文件的文件名改为dist.html
  55. template: './src/template.html'     // 模板
  56. }),
  57. new CleanWebpackPlugin()
  58. ]
  59. };

    重新使用npm run server命令重启服务器：

    可以看到端口改变成8085。

三、webpack-dev-middleware + express

    除了使用流行的webpack-dev-server，还可以使用webpack-dev-middleware配合express server构建简单的web服务器。

    webpack-dev-middleware是一个容器（wrapper），它可以把webpack处理后的文件传递给一个服务器（server）。webpack-dev-server在内部使用了它，同时，它也可以作为一个单独的包来使用，以便进行更多自定义设置来实现更多的需求。

    接下来使用webpack-dev-middleware + express server构建简单的web服务器。

    首先，安装webpack-dev-middleware和express：

    然后在webpack-demo的根目录下新建一个server.js文件用于设置自定义的express服务：

    server.js:

  1. const express = require('express');
  2. const webpackDevMiddleware = require('webpack-dev-middleware');
  3. const webpack = require('webpack');
  4. const config = require('./webpack.config.js');
  6. // webpack编译器
  7. const compiler = webpack(config);
  9. // 实例化一个express实例
  10. const app = express();
  12. // 告诉express使用webpack-dev-middleware
  13. app.use(webpackDevMiddleware(compiler, {
  14. // 这里可以填写更多配置项
  15. }));
  17. // 在3000端口号上启动服务器
  18. app.listen(3000, () => {
  19. console.log('express server is running');
  20. });

    再添加一个npm script，用于运行服务：

    package.json:

  1. {
  2. "name": "webpack-demo",
  3. "version": "1.0.0",
  4. "description": "",
  5. "private": true,
  6. "main": "index.js",
  7. "scripts": {
  8. "test": "echo \"Error: no test specified\" && exit 1",
  9. "bundle": "webpack",
  10. "watch": "webpack --watch",
  11. "server": "webpack-dev-server",
  12. "express": "node server.js"
  13. },
  14. "author": "ag_dubs <wombat@npmjs.com>",
  15. "license": "ISC",
  16. "devDependencies": {
  17. "autoprefixer": "^9.5.1",
  18. "clean-webpack-plugin": "^2.0.2",
  19. "css-loader": "^2.1.1",
  20. "express": "^4.17.1",
  21. "file-loader": "^3.0.1",
  22. "html-webpack-plugin": "^3.2.0",
  23. "node-sass": "^4.12.0",
  24. "postcss-loader": "^3.0.0",
  25. "sass-loader": "^7.1.0",
  26. "style-loader": "^0.23.1",
  27. "stylus": "^0.54.5",
  28. "url-loader": "^1.1.2",
  29. "webpack": "^4.33.0",
  30. "webpack-cli": "^3.3.3",
  31. "webpack-dev-middleware": "^3.7.0",
  32. "webpack-dev-server": "^3.4.0"
  33. }
  34. }

    现在，可以使用npm script运行服务：

    使用浏览器打开http://localhost:3000/dist.html，可以发现控制台也打印成功：

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 小小小舟 > 《webpack》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多