webpack安装和命令行

来源：互联网发布：国内可备案的域名编辑：程序博客网时间：2024/05/16 17:55

实例一：
1.建立目录

mkdir webpackDemo

2.初始化cnpm

cnpm install

3.安装webpack

cnpm install webpack --save-dev

4.新建hello.js文件，

function hello(str){    alert(str);}

用webpack打包hello.js文件

webpack hello.js hello.bundle.js

这段代码意思是用webpack打包hello.js文件，打包后生成的文件为hello.bundle.js

Hash: 3fef7a52586c888c12b3Version: webpack 3.8.1Time: 55ms          Asset     Size  Chunks             Chunk Nameshello.bundle.js  2.51 kB       0  [emitted]  main   [0] ./hello.js 40 bytes {0} [built]

哈希值

Hash: 3fef7a52586c888c12b3

打包花费时间

Time: 55ms

webpack版本

Version: webpack 3.8.1

打包生成文件为hello.bundle.js，文件大小为2.51kB，分块为0，分块名称为main

  Asset     Size  Chunks             Chunk Nameshello.bundle.js  2.51 kB       0  [emitted]  main   [0] ./hello.js 40 bytes {0} [built]

实例二：
1.新建world.js文件

function world(){    return{    }}

2.hello.js引用world.js

require('./world.js')function hello(str){    alert(str);}

3.打包

webpack hello.js hello.bundle.js

有2个模块，hello.js模块(编号为0),world.js模块(编号为1)

        Asset     Size  Chunks             Chunk Nameshello.bundle.js  2.66 kB       0  [emitted]  main   [0] ./hello.js 63 bytes {0} [built]   [1] ./world.js 50 bytes {0} [built]

实例三：webpack打包css文件
1.新建style.css

html,body{    padding: 0;    margin: 0;}body{    background: red;}

2.hello.js引入style.css

require('./world.js')require('./style.css');function hello(str){    alert(str);}

3.打包

webpack hello.js hello.bundle.js

结果报错！

You may need an appropriate loader to handle this file type.

原来我们需要安装loader，安装css-loader，style-loader

cnpm install css-loader style-loader --save-dev

再次打包hello.js
结果还是报错！

You may need an appropriate loader to handle this file type.

肿么办？我们可以在hello.js中指定css-loader、style-loader

require('./world.js')require('style-loader!css-loader!./style.css');function hello(str){    alert(str);}hello('hello world!');

再打包！
打包终于成功，有4个分块

        Asset     Size  Chunks             Chunk Nameshello.bundle.js  18.9 kB       0  [emitted]  main   [0] ./hello.js 140 bytes {0} [built]   [1] ./world.js 50 bytes {0} [built]   [2] ./node_modules/_style-loader@0.19.0@style-loader!./node_modules/_css-loader@0.28.7@css-loader!./style.css 1.08 kB {0} [built]   [3] ./node_modules/_css-loader@0.28.7@css-loader!./style.css 271 bytes {0} [built]    + 3 hidden modules

实例四：
新建index.html文件，引入上述打包后的hello.bundle.js文件即可

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->    <title></title>  </head>  <body>    <script src="./hello.bundle.js"></script>  </body></html>

效果如图：
这里写图片描述

用开发者工具查看代码如下：
这里写图片描述

这就很好的阐述了2个loader,css-loader使得webpack可以处理.css文件,style-loader通过css-loader处理完的文件，新建一个style标签，插入到html里面，如上截图所示。

实例六：每次指定loader是一件很麻烦的事情

require('style-loader!css-loader!./style.css');

其实我们可以这样写

require('./style.css');

然后命令行需要这样写
绑定模块，

webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader'

实例七：
每次在命令行输入

webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader'

打包命令也是一件麻烦的事情，其实我们可以这样来处理，进行侦听，这样的话，我们就不需要每次都输入打包命令了。

webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --watch

实例八：查看打包进度

webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --progress

命令行输出结果：
Hash: 5389ff5416ec779e3cd6
Version: webpack 3.8.1
Time: 427ms
Asset Size Chunks Chunk Names
hello.bundle.js 18.9 kB 0 [emitted] main
[0] ./hello.js 126 bytes {0} [built]
[1] ./world.js 50 bytes {0} [built]
[2] ./style.css 1.08 kB {0} [built]
[3] ./node_modules/_css-loader@0.28.7@css-loader!./style.css 271 bytes {0} [built]
+ 3 hidden modules

查看打包进度和列出所有模块

webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --progress --display-modules

命令行输出结果：
Hash: 5389ff5416ec779e3cd6
Version: webpack 3.8.1
Time: 461ms
Asset Size Chunks Chunk Names
hello.bundle.js 18.9 kB 0 [emitted] main
[0] ./hello.js 126 bytes {0} [built]
[1] ./world.js 50 bytes {0} [built]
[2] ./style.css 1.08 kB {0} [built]
[3] ./node_modules/_css-loader@0.28.7@css-loader!./style.css 271 bytes {0} [built]
[4] ./node_modules/_css-loader@0.28.7@css-loader/lib/css-base.js 2.26 kB {0} [built]
[5] ./node_modules/_style-loader@0.19.0@style-loader/lib/addStyles.js 9.41 kB {0} [built]
[6] ./node_modules/_style-loader@0.19.0@style-loader/lib/urls.js 3.01 kB {0} [built]

打包原因：

webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --progress --display-modules --display-reasons

阅读全文

0 0