webpack中文网（二）Manifest、source map 、dev-server、localhost:8080、dev-middlewe中间件+express、HMR（Vue Loader）

最新推荐文章于 2024-05-13 10:04:41 发布

ChrisP3616

最新推荐文章于 2024-05-13 10:04:41 发布

阅读量247

点赞数 2

分类专栏：前端工程师1——汇总前端工程师5——webpack、node.js 文章标签： webpack 前端 es6

本文链接：https://blog.csdn.net/qq_43456781/article/details/120089756

版权

webpack中文网（二）管理输出、HtmlWebpackPlugin、Manifest、开发（source map 、webpack-dev-server、localhost:8080、webpack-dev-middleware【中间件+express】）、HMR（Vue Loader）

文章目录

webpack中文网（二）管理输出、HtmlWebpackPlugin、Manifest、开发（source map 、webpack-dev-server、localhost:8080、webpack-dev-middleware【中间件+express】）、HMR（Vue Loader）

总结：
source map

如果将三个源文件（a.js, b.js 和 c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会简单地指向到 bundle.js。

更容易地追踪错误和警告

将编译后的代码映射回原始源代码。如果一个错误来自于 b.js，source map 就会明确的告诉你。

webpack-dev-server

提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)

修改配置文件（webpack.config.js），告诉开发服务器(dev server)，在哪里查找文件

让我们添加一个 script 脚本（package.json），可以直接运行开发服务器(dev server)

webpack-dev-middleware（中间件）

搭配express可以在网页中直接输入http://localhost:3000，你应该看到你的webpack 应用程序已经运行！
HMR模块热替代
简介

在运行时更新各种模块，而无需进行完全刷新

HMR 不适用于生产环境，这意味着它应当只在开发环境使

问题

模块热替换可能比较难掌握

很多其他地方可以轻松地让人犯错。幸运的是，存在很多 loader（其中一些在下面提到），使得模块热替换的过程变得更容易
HMR修改样式表
npm install --save-dev style-loader css-loader
借助于 style-loader 的帮助，CSS 的模块热替换实际上是相当简单的。
Vue Loader：

此 loader 支持用于 vue 组件的 HMR，提供开箱即用体验。

1. 管理输出

本指南继续沿用管理资源指南中的代码示例。

到目前为止，我们在 index.html 文件中手动引入所有资源，然而随着应用程序增长，并且一旦开始对文件名使用哈希(hash)]并输出多个 bundle，手动地对 index.html 文件进行管理，一切就会变得困难起来。然而，可以通过一些插件，会使这个过程更容易操控。

预先准备

首先，让我们调整一下我们的项目：

project

  webpack-demo
  |- package.json
  |- webpack.config.js
  |- /dist
  |- /src
    |- index.js
+   |- print.js
  |- /node_modules

我们在 src/print.js 文件中添加一些逻辑：

src/print.js

export default function printMe() {
   
  console.log('I get called from print.js!');
}

并且在 src/index.js 文件中使用这个函数：

src/index.js

  import _ from 'lodash';
+ import printMe from './print.js';

  function component() {
   
    var element = document.createElement('div');
+   var btn = document.createElement('button');

    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

+   btn.innerHTML = 'Click me and check the console!';
+   btn.onclick = printMe;
+
+   element.appendChild(btn);

    return element;
  }

  document.body.appendChild(component());

我们还要更新 dist/index.html 文件，来为 webpack 分离入口做好准备：

dist/index.html

  <!doctype html>
  <html>
    <head>
-     <title>Asset Management</title>
+     <title>Output Management</title>
+     <script src="./print.bundle.js"></script>
    </head>
    <body>
-     <script src="./bundle.js"></script>
+     <script src="./app.bundle.js"></script>
    </body>
  </html>

现在调整配置。我们将在 entry 添加 src/print.js 作为新的入口起点（print），然后修改 output，以便根据入口起点名称动态生成 bundle 名称：

webpack.config.js

  const path = require('path');

  module.exports = {
   
-   entry: './src/index.js',
+   entry: {
   
+     app: './src/index.js',
+     print: './src/print.js'
+   },
    output: {
   
-     filename: 'bundle.js',
+     filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

执行 npm run build，然后看到生成如下：

Hash: aa305b0f3373c63c9051
Version: webpack 3.0.0
Time: 536ms
          Asset     Size  Chunks                    Chunk Names
  app.bundle.js   545 kB    0, 1  [emitted]  [big]  app
print.bundle.js  2.74 kB       1  [emitted]         print
   [0] ./src/print.js 84 bytes {
   0} {
   1} [built]
   [1] ./src/index.js 403 bytes {
   0} [built]
   [3] (webpack)/buildin/global.js 509 bytes {
   0} [built]
   [4] (webpack)/buildin/module.js 517 bytes {
   0} [built]
    + 1 hidden module

我们可以看到，webpack 生成 print.bundle.js 和 app.bundle.js 文件，这也和我们在 index.html 文件中指定的文件名称相对应。如果你在浏览器中打开 index.html，就可以看到在点击按钮时会发生什么。

但是，如果我们更改了我们的一个入口起点的名称，甚至添加了一个新的名称，会发生什么？生成的包将被重命名在一个构建中，但是我们的index.html文件仍然会引用旧的名字。我们用 HtmlWebpackPlugin 来解决这个问题。

设定 HtmlWebpackPlugin

首先安装插件，并且调整 webpack.config.js 文件：

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

webpack.config.js

  const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
   
    entry: {
   
      app: './src/index.js',
      print: './src/print.js'
    },
+   plugins: [
+     new HtmlWebpackPlugin({
   
+       title: 'Output Management'
+     })
+   ],
    output: {
   
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

在我们构建之前，你应该了解，虽然在 dist/ 文件夹我们已经有 index.html 这个文件，然而 HtmlWebpackPlugin 还是会默认生成 index.html 文件。这就是说，它会用新生成的 index.html 文件，把我们的原来的替换。让我们看下在执行 npm run build 后会发生什么：

Hash: 81f82697c19b5f49aebd
Version: webpack 2.6.1
Time: 854ms
           Asset       Size  Chunks                    Chunk Names
 print.bundle.js     544 kB       0  [emitted]  [big]  print
   app.bundle.js    2.81 kB       1  [emitted]         app
      index.html  249 bytes          [emitted]
   [0] ./~/lodash/lodash.js 540 kB {
   0} [built]
   [1] (webpack)/buildin/global.js 509 bytes {
   0} [built]
   [2] (webpack)/buildin/module.js 517 bytes {
   0} [built]
   [3] ./src/index.js 172 bytes {
   1} [built]
   [4] multi lodash 28 bytes {
   0} [built]
Child html-webpack-plugin for "index.html":
       [0] ./~/lodash/lodash.js 540 kB {
   0} [built]
       [1] ./~

最低0.47元/天解锁文章

ChrisP3616

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
webpack中文网（二）Manifest、source map 、dev-server、localhost:8080、dev-middlewe中间件+express、HMR（Vue Loader）

webpack中文网（二）管理输出、HtmlWebpackPlugin、Manifest、开发（source map 、webpack-dev-server、localhost:8080、webpack-dev-middleware【中间件+express】）、HMR（Vue Loader）文章目录webpack中文网（二）管理输出、HtmlWebpackPlugin、Manifest、开发（source map 、webpack-dev-server、localhost:8080、webpack-dev
复制链接

扫一扫