•  

【NodeJS】webpack学习笔记

发表于 2020-05-09,阅读 32

介绍

介绍

webpack是 NodeJS 提供的一个用来将项目包里的 js、css 文件打包到一个文件内,并且对代码进行了压缩、混淆的处理的工具

今天我们来学习一下 webpack 的安装和使用

教程

软件版本

  • OS:CentOS 7

  • node:v12.16.3

  • npm:v6.14.4

  • webpack:v3.12.0

  • webpack-cli:v3.3.11

  • webpack-dev-server:v2.9.7

准备

安装 webpack

如果没有安装过 webpack 可以通过下面的命令来安装

npm install webpack@3.12.0 -g
ln -s /tongfu.net/env/nodejs/node_prefix/bin/webpack /usr/bin/

链接 webpack

因为我们的安装模式是全局模式,所以需要把 webpack 链接到项目

进入到项目跟目录,输入如下命令

npm link webpack

建立 app.js

在项目跟目录建立 app.js 文件

写入测试代码

function start(key){
    document.getElementById('location').innerHTML = key+": "+document.location;
}
document.onreadystatechange=function(){
    start('location');
};

手动打包

建立 webpack.config.js

在项目跟目录上建立 webpack.config.js 文件

这是 webpack 的配置文件

module.exports = {
    entry:"./app.js", // 这是入口程序
    output:{
        filename: "bundle.js" // 这是打包后的文件路径
    }
}

开始打包

在项目跟目录上运行 webpack

webpack

正常情况下会看到结果

Hash: 919146165257a6382b8e
Version: webpack 3.12.0
Time: 269ms
    Asset   Size  Chunks             Chunk Names
bundle.js  28 kB       0  [emitted]  main
   [0] ./app.js 170 bytes {0} [built]

如果看到这个错误提示,就说明 webpack 版本不对

webpack not installed

Install webpack to start bundling: 
  $ npm install --save-dev webpack

可以通过下面的命令解决,先卸载,再安装

注意,我们的环境是按照的全局模式,如果你的环境不是全局模式那么请根据你的环境去卸载

npm uninstall webpack -g
npm install webpack@3.12.0 -g

自动打包

安装 webpack-dev-server

安装 webpack-dev-server 模块

npm install webpack-dev-server@2.9.7 -g
ln -s /tongfu.net/env/nodejs/node_prefix/bin/webpack-dev-server /usr/bin/

配置 webpack.config.js

在最前面增加 webpack 引入

const webpack = require('webpack');

增加 devServer 节点

devServer:{
        historyApiFallback: true,
        inline: true
    }

增加 plugins 节点

plugins:[
        new webpack.HotModuleReplacementPlugin()
    ]

完整内容示例

const webpack = require('webpack');
module.exports = {
    entry:"./app.js", // 这是入口程序
    devServer:{
        historyApiFallback: true,
        inline: true
    },
    plugins:[
        new webpack.HotModuleReplacementPlugin()
    ],
    output:{
        filename: "bundle.js" // 这是打包后的文件路径
    }
}

建立 demo.html

在项目跟目录建立 demo.html,并且在页面里引用 bundle.js 脚本文件

<html>
<head>
    <title>demo</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="bundle.js"></script>
</head>
<body>
    <div id="location">

    </div>
</body>
</html>

启动 webpack-dev-server

在项目跟目录上运行 webpack-dev-server 监听 56789 端口 

webpack-dev-server --public=nodejs.tongfu.net --host=0.0.0.0 --port=56789 --inline

正常情况下会看到如下信息

Project is running at http://nodejs.tongfu.net/
webpack output is served from /
404s will fallback to /index.html
Hash: e7de32bd0533e5078c38
Version: webpack 3.12.0
Time: 1754ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  356 kB       0  [emitted]  [big]  main
   [1] multi (webpack)-dev-server/client?http://nodejs.tongfu.net ./app.js 40 bytes {0} [built]
   [2] (webpack)-dev-server/client?http://nodejs.tongfu.net 7.95 kB {0} [built]
   [3] (webpack)/node_modules/url/url.js 23.3 kB {0} [built]
   [4] (webpack)/node_modules/node-libs-browser/node_modules/punycode/punycode.js 14.7 kB {0} [built]
   [6] (webpack)/node_modules/url/util.js 314 bytes {0} [built]
   [7] (webpack)/node_modules/querystring-es3/index.js 127 bytes {0} [built]
  [10] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {0} [built]
  [11] (webpack)-dev-server/node_modules/ansi-regex/index.js 135 bytes {0} [built]
  [12] (webpack)-dev-server/node_modules/loglevel/lib/loglevel.js 8.61 kB {0} [built]
  [13] (webpack)-dev-server/client/socket.js 1.05 kB {0} [built]
  [14] (webpack)-dev-server/node_modules/sockjs-client/dist/sockjs.js 181 kB {0} [built]
  [15] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
  [21] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
  [23] (webpack)/hot/emitter.js 77 bytes {0} [built]
  [25] ./app.js 172 bytes {0} [built]
    + 11 hidden modules
webpack: Compiled successfully.

访问 demo.html

通过浏览器访问,使用 IP 地址或者主机头都可以

7fd7d0e1dff28bd4.jpg修改 app.js

我们在服务器端修改 app.js 的内容

function start(key){
    document.getElementById('location').innerHTML = key+": "+document.location;
}
document.onreadystatechange=function(){
    start('url');
};

可以发现 webpack 自动重新打包了

webpack: Compiling...
Hash: d1a17ff1ecd0a614d0c4
Version: webpack 3.12.0
Time: 52ms
                               Asset       Size  Chunks                    Chunk Names
                           bundle.js     356 kB       0  [emitted]  [big]  main
0.e7de32bd0533e5078c38.hot-update.js  257 bytes       0  [emitted]         main
e7de32bd0533e5078c38.hot-update.json   43 bytes          [emitted]         
  [21] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
  [25] ./app.js 175 bytes {0} [built]
    + 24 hidden modules
webpack: Compiled successfully.

网页也自动变成最新的了

999ab3cc2d77c350.jpg

注意:自动打包方式每次更新并不会写入文件,它是保存在缓存当中的。因此,我们调试结束后还是需要通过手动方式完成打包后的代码的写入文件操作的

鬼谷子叔叔
  • 日志:174
  • 回复:13

进入ta的主页