webpack入门第三篇

来源：互联网发布：海康网络键盘视频教程编辑：程序博客网时间：2024/06/05 08:58

webpack的教程，持续更新。还是根据官网的入门教程来一步步做的。http://webpack.github.io/docs/tutorials/getting-started/

1、新建文件夹demo2，进入demo2文件夹，按住shift，然后右键弹出命令行
2、新建文件 content.js

module.exports = "It works from content.js.";

3、新建文件style.css

body {    background: yellow;}

4、新建文件，entry.js

require("!style!css!./style.css");document.write(require("./content.js"));

5、新建文件index.html

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

6、在webpack里的核心是loader，这里是入门，不多讲loader，只要知道它是核心就好，可以用来解析json、css等文件。有了css文件我们需要安装对应的loader。在命令行输入

npm install css-loader style-loader

7、那么下面又是webpack的时间到了，在命令行内输入

 webpack ./entry.js bundle.js

上面的过程都是根据官网来的，结果报错了，目前没看懂为什么会出错
如下图
这里写图片描述
根据报错的信息，是entry.js的错误，需要在css后面加上-loader,那我们就试试结果加上的结果如何，entry.js修改后代码如下

require("!style-loader!css-loader!./style.css");document.write(require("./content.js"));

再次编译运行命令

 webpack ./entry.js bundle.js

成功了，如下

Hash: 32d83e3f38b568fa0523Version: webpack 3.6.0Time: 623ms    Asset     Size  Chunks             Chunk Namesbundle.js  18.2 kB       0  [emitted]  main   [0] ./entry.js 143 bytes {0} [built]   [1] ./node_modules/style-loader!./node_modules/css-loader!./style.css 996 bytes {0} [built]   [2] ./node_modules/css-loader!./style.css 200 bytes {0} [built]   [6] ./content.js 98 bytes {0} [built]    + 3 hidden modules

8、运行index.html查看结果

哦，为了更加直观的展示，我在这粘上我的代码的目录
这里写图片描述

这是webpack第三篇博客，还是很简单吧，虽然遇到了点坑，不过坑总可以增加我们的学习能力。如果喜欢英文的，可以直接研究官网。如果觉得英文困难，可以看我的下篇文章，会持续更新。

阅读全文

0 0