随笔- 15 文章- 0 评论- 4 阅读- 27223

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><br><br><!--引入打包之后的文件--><script src="bundle.js"></script></body><br></html>

　test.js

<!--写入js,创建div元素，写入一句话，并且导出test.js这个模块--><br>module.exports = function() {
    var test= document.createElement('div');
    test.textContent = "Hi there and testing!";
    return test;
};

　main.js

1 2	`<!--导入test模块，将内容添加到#root这个div中--><br>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"//打包后输出文件的文件名
  }
}