webpack入门之最简单的例子 webpack4

时间 2019-11-16

标签 webpack 入门最简单例子 webpack4 繁體版

原文原文链接

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

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

第一步：前端

咱们须要安装npm，这个只要你有NodeJS运行环境的确定会有的；这边这个块也就不做叙述java

第二步：node

　　咱们接下来会选择在项目目录中进行全部的安装和操做，不去选择全局安装；webpack

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

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

接下来，对于package name之类的配置项，咱们彻底选择直接回车，到底！json

到这一步，就OK了！app

此时咱们的项目文件夹里就多了一个文件：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开始运行了；

问题来了：

一、报错！

解决方式：node_modules\.bin\webpack "/"改为"\"

二、仍是不行！

还好不是原来的错误，那么这个是什么意思呢？

回看前面的截图

倒数第二行，咱们会发现咱们安装的webpack的版本是 4 的，那么在4中，默认不须要配置文件（它吸取了Parcel的思想，零配置）；既然思想都不同了，是否是咱们前面这么作就要去掉，重来，换成4的作法呢？很显然不肯意了，毕竟作到如今了，那么我就根据步骤一步一步的改吧；

再看这一步：

咱们顺着来，输入yes,回车，进行安装webpack-cli

安装完，已经自动运行了node_modules\.bin\webpack；

三、新的警告和报错！

心态爆炸了？没关系，很快就要OK了！

看前几行，是正确的运行结果，可是，查看项目文件夹时，并非这样，缘由就在后面那几行黄色，红色的警告和报错！

首先看警告，简单点，意思就是须要设置模式：4 无需配置文件，可是没说不要设置模式，模式分为两个：生产模式和开发模式；只须要--mode标记一下就OK了！

再看报错，什么意思呢，其实就是他须要一个src 文件夹，其实这个src文件夹就是咱们以前的app文件夹，那么咱们改下名字，app改为src;

ok，再来接受一次打击吧！

四、运行node_modules\.bin\webpack --mode development以后，还有一行错误！

很熟悉的报错，刚才给咱们报过，刚才那么改貌似没用，这下问题在哪里呢？咱们打开package.json看下；

第5行，"main":"index.js"，是否是已经知道了？那咱们把src里的入口文件main.js改为index.js，再运行！

成功！！！

最后咱们打包以后生成了一个新的文件main.js，而且是在一个新的文件夹dist里；

对于咱们以前的webpack.congfig.js文件，彻底不用去在乎，由于webpack 4 默认不须要配置文件呀！

前端道路上，继续填坑，比LOL的青铜坑都深，不喜勿喷，谁还不是坑过来的呢……