单个JS文件

打包单个JS文件，既测试环境是否可用。

安装开始Dome

$  mkdir webpack-demo && cd webpack-demo
$  npm i webpack webpack-cli -g

目录&结构

entry.js

document.write('I am entry.js');

命令

webpack|v4.x以后需要添加--mode，production模式下会对代码进行压缩，development模式不会对代码进行压缩。

基本格式：$  webpack-cli [options] --entry <entry> --output <output>
$ webpack entry.js  -o  bundle.js --mode=development

显示以下，即是打包成功。

Hash: a5aee4f6f417a17019e8
Version: webpack 4.26.1
Time: 99ms
Built at: 2018-11-28 10:12:17
    Asset      Size  Chunks             Chunk Names
bundle.js  3.78 KiB    main  [emitted]  main
Entrypoint main = bundle.js
[./entry.js] 32 bytes {main} [built]

执行命令之后会多出来一个文件，即 bundle.js

运行

新建index.html文件来进行运行，页面会显示I am entry。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>weepack-dome</title>
  // 引用bundle.js
  <script src="./bundle.js"></script>
</head>
<body>
  
</body>
</html>

Previous安装 Next多个JS文件

Last updated 7 years ago