webpack入门之最简单的例子 webpack4

webpack在目前来说应该是前端用的比较多的打包工具了，那么对于之前没有接触过这块的该怎么办呢？答案很明显嘛，看资料，查文档，自己去琢磨，自己去敲一敲，跑一跑；

那么，这边我将以一个最基础的例子来将这个流程跑一边，包括过程中会遇到哪些问题，怎么解决的，也会一一奉上；

第一步：

我们需要安装npm，这个只要你有NodeJS运行环境的肯定会有的；这边这个块也就不作叙述

第二步：

　　我们接下来会选择在项目目录中进行所有的安装和操作，不去选择全局安装；

在电脑任意盘中新建一个项目文件夹，如：webpackdemo

接下来我们通过cmd进入到这个项目文件夹下，并输入执行npm init，回车，进行初始化：

接下来，对于package name之类的配置项，我们完全选择直接回车，到底！

到这一步，就OK了！

此时我们的项目文件夹里就多了一个文件：package.json

第三步：

既然要使用webpack进行打包，那么我们就要来安装webpack了，起初我们就说过都在项目文件夹里完成，不做全局安装；那么接下来输入npm install --save-dev webpack，回车进行安装：

此时我们的项目文件夹，已经又多了一个文件夹和一个json文件：

第四步：

我们现在可以开始写自己的项目了，那么我这边也就按通常各位大牛分享的例子来写，首先，在项目文件夹下，新建两个文件加app和public；

app文件夹中写入test.js和main.js；public文件夹中写入index.html；

借鉴一下别人的例子：

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>Webpack demo</title>

</head>

<body>

    <div id='root'></div>

<!--引入打包之后的文件-->

<script src="bundle.js"></script>

</body>
</html>

　test.js

<!--写入js,创建div元素，写入一句话，并且导出test.js这个模块-->
module.exports = function() {

    var test= document.createElement('div');

    test.textContent = "Hi there and testing!";

    return test;

};

　main.js

<!--导入test模块，将内容添加到#root这个div中-->
var test= require('./test.js');

document.getElementById('root').appendChild(test());

第五步：

按道理，现在已经可以进行打包处理了，最后的结果就是将main.js作为主入口进行操作，最后在public文件夹中生成一个打包OK之后的文件：bundle.js；然后我们打开index.html文件就会在页面显示我们刚才的那句话了；

但是，忽略了一个问题，那就是我们的配置文件怎么办呢？都在命令行去操作吗？这肯定是很麻烦且不赞成的，那么我们就在项目目录下再建一个文件：webpack.congfig.js，在里面写入配置文件：

module.exports = {

  entry:  __dirname + "/app/main.js",//入口文件

  output: {

    path: __dirname + "/public",//打包后的文件存放目录

    filename: "bundle.js"//打包后输出文件的文件名

  }

}

这样我们就可以通过node_modules/.bin/webpack开始运行了；

问题来了：

1、报错！