简单粗暴搞定webpack4（一）

最新推荐文章于 2020-02-02 11:47:00 发布

jojo付啾啾

最新推荐文章于 2020-02-02 11:47:00 发布

阅读量475

点赞数

分类专栏： webpack 文章标签： webpack4 简单粗暴搞定webpack（一）

webpack 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

我很生气！！我快对csdn失望了，我刚写了那么长一篇博客，发表后打开查看只剩两行

本文基于微信公众号：前端js动力节点。

最近出了webpack4，所以按照公众号里的步骤已经无法实现了，中途频频报错

不过我们还是按照他的步骤一步一步来，看问题出在哪里，怎么解决

今天我们来学习webpack的具体用法，不多废话，在D盘或E盘下新建一个空文件夹，那我就叫webpack好啦，建好后，进入这个文件夹，然后开始安装webpack
npm install -g webpack
npm install webpack
这个跟gulp是一样的，需要先全局安装，然后本地安装。完成后原料就有了，下面我们开始玩一玩。

前面提到过，webpack的核心是commonJS的标准模块化。

大家还记得commonJS的模块化是怎样定义的吗？

其实主要是两个关键字：exports和require。

exports是输出模块；而require是加载模块。这两个关键字，浏览器是无法解析的，这就需要webpack做转换处理。好，我们上一个例子试试。

大家按照图示建立以下文件：

app目录，放的是我们的源文件；其中，helloworld.js我们打算写个exports的例子；而main.js呢，我们就写require的例子。

dist目录，放的是打包后的模块化文件；

public目录，放一些静态资源，比如html；

node_modules目录，放一些依赖文件，这里需要安装webpack，所以需要建该文件夹。

index.html:
<!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>测试webpack</title>
</head>

<body>
    <div id="container"></div>
</body>

</html>
<script src="../dist/bundle.js"></script>
这个文件没啥好说的，只是注意最后一个文件的引入——引的是webpack打包输出后的文件，因为不经过webpack编译的话，浏览器是无法识别的。

helloworld.js:
// 输出模块
module.exports = function() {
    var div = document.createElement('div');
    div.innerHTML = "Hello World!!";
    return div;
};
main.js:
// 引入模块
var helloworld = require('./helloworld.js');

// 在父节点下追加元素
document.getElementById('container').appendChild(helloworld());
好啦，准备工作都做好了，下面我们就要编译文件啦！

webpack在一边坐了好半天冷板凳，这下终于可以上场了！

首先我们需要搞清楚：究竟该编译哪个文件呢？

helloworld.js和main.js这两个文件都需要编译吗？

其实，我们只需要关心main.js即可。因为main.js是入口，在webpack执行编译的时候，会自动寻找引用包并进行处理，咱们就别操心啦！

好，那下面我们就编译一下main.js，怎么搞捏？

其实很简单，只需执行一条命令即可：

webpack 源文件目的文件

我们看一下：

没错，在webpack4出来以前按照前面的步骤确实能得到上图结果，但是，现在我装的是webpack4，在这里输入这个命令后，要我安装一个CLI

那就装吧，选择了webpack-cli

出现没有权限，这个是iMac的原因，要输入命令：sudo cnpm install -D webpack-cli

在局部安装webpack-cli后，再输入命令webpack app/main.js dist/bundle.js，又双叒提示要我装CLI，我不是才装了吗？？？于是上网搜原因，好像说要全局安装，那就试一下吧

好像没什么问题了，那就运行命令webpack app/main.js dist/bundle.js吧，好激动

出现警告，说没设置模式mode，先不管，但是后面出现错误，说没找到模块？？？上网搜原因，说是因为webpack4.x是以项目根目录下的./src/index.js作为入口，所以我们要新建src目录并且把main.js改为index.js。另外还要注意：

webpack4.x的打包已经不能用 webpack 源文件目的文件 的方式，而是直接运行webpack --mode development或者webpack --mode production，这样便会默认进行打包，入口文件是'./src/index.js'，输出路径是'./dist/main.js'，其中src目录即index.js文件需要手动创建，而dist目录及main.js会自动生成。

接下来我们运行命令：webpack --mode development

终于没报错了，，执行完成后，会在dist目录下多一个bundle.js文件，整个项目目录如下

在浏览器中打开index.html文件

OK啦！！

由于前面已经局部安装了webpack-cli还-D了，所以会生成一个package.json文件，我试了一下，不用在局部安装，只用在全局安装webpack-cli就可以了。

寄语：当你面对一个新的、不容易掌握的知识点时，首先要做到的，就是慢。

很多情况下，贪快的结果往往会把自己的自信心搞丢，然后就认为这块知识很难。其实前端无难事，你只需要平和心态，跟老人家喝茶一样，用心慢慢的去品，去想，去试，自然就会慢慢看到它的庐山真面目，而当你蓦然回首时，人已站在了庐山之巅~~

jojo付啾啾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单粗暴搞定webpack4（一）

我很生气！！我快对csdn失望了，我刚写了那么长一篇博客，发表后打开查看只剩两行本文基于微信公众号：前端js动力节点。最近出了webpack4，所以按照公众号里的步骤已经无法实现了，中途频频报错不过我们还是按照他的步骤一步一步来，看问题出在哪里，怎么解决今天我们来学习webpack的具体用法，不多废话，在D盘或E盘下新建一个空文件夹，那我就叫webpack好啦，建好后，进入这个文...
复制链接

扫一扫