同福

鬼谷子叔叔
2020-05-09 14:22:21 341

webpack学习笔记

介绍

介绍

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

增加 devServer 节点

devServer:{
        historyApiFallback: true,
        inline: true
    }

增加 plugins 节点

plugins:[
        new webpack.HotModuleReplacementPlugin()
    ]

建立 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