介绍
介绍
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 地址或者主机头都可以
修改 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.网页也自动变成最新的了
