webpack4 入门最简单的例子介绍
webpack在目前来说应该是前端用的比较多的打包工具了，那么对于之前没有接触过这块的该怎么办呢？答案很明显嘛，看资料，查文档，自己去琢磨，自己去敲一敲，跑一跑；
Webpack是当下最热门的前端资源模块化管理和打包工具，它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源，还可以将按需加载的模块进行代码分割，等到实际需要的时候再异步加载。
webpack和Grunt以及Gulp相比有什么特性
Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。
Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译、组合、压缩等任务的具体步骤。
webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。
那么，这边我将以一个最基础的例子来将这个流程跑一边，包括过程中会遇到哪些问题，怎么解决的，也会一一奉上；
第一步：
我们需要安装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> </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
<!--导入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"//打包后输出文件的文件名
}
}
这样我们就可以通过node_modules/.bin/webpack开始运行了；
问题来了：
1、报错！
解决方式：node_modules\.bin\webpack "/"改成"\"
2、还是不行！
还好不是原来的错误，那么这个是什么意思呢？
回看前面的截图
倒数第二行，我们会发现我们安装的webpack的版本是 4 的，那么在4中，默认不需要配置文件（它吸收了Parcel的思想，零配置）；既然思想都不一样了，是不是我们前面这么做就要去掉，重来，换成4的做法呢？很显然不愿意了，毕竟做到现在了，那么我就根据步骤一步一步的改吧；
再看这一步：
我们顺着来，输入yes,回车，进行安装webpack-cli
安装完，已经自动运行了node_modules\.bin\webpack；
3、新的警告和报错！
心态爆炸了？不要紧，很快就要OK了！
看前几行，是正确的运行结果，但是，查看项目文件夹时，并不是这样，原因就在后面那几行黄色，红色的警告和报错！
首先看警告，简单点，意思就是需要设置模式：4 无需配置文件，但是没说不要设置模式，模式分为两个：生产模式和开发模式；只需要--mode标记一下就OK了！
再看报错，什么意思呢，其实就是他需要一个src 文件夹，其实这个src文件夹就是我们之前的app文件夹，那么我们改下名字，app改成src;
ok，再来接受一次打击吧！
4、运行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 默认不需要配置文件呀！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
浅谈webpack4.x 入门(一篇足矣)
前言: webpack4出了以后,一些插件变化很大,和之前的版本使用方式不一样,新手入坑,本篇将介绍如何从一开始配置webpack4的开发版本,对css,js进行编译打包合并生成md5,CSS中的图片处理,js自动注入html页,删除指定文件,提取公共文件,热更新等等. 安装 //全局安装 npm install -g webpack webpack-cli 创建文件夹初始化 //创建文件夹 mkdir webpack4demo //进入 cd webpack4demo //初始化 npm in
-
webpack4简单入门实例
毋庸置疑,webpack现在已经成为前端很多的打包器.网上关于webpack的相关文章也是很多的,关于webpack的具体配置,官网上也是讲解的很清楚,本文主要是根据自己的学习,进行简单的webpack实例的讲解,供初学者进行入门实战.文中的实例是基于webpack4的,所以请小伙伴们一定要注意自己本地的环境,不要因为环境问题而浪费不必要的时间.文章中如有错误的地方,欢迎大家指正. 我的实例是循序渐进的,我们先从最简单的开始 新建一个demo文件夹,然后再将命令行切换到当前目录下,执行如下命令
-
webpack4 入门最简单的例子介绍
webpack在目前来说应该是前端用的比较多的打包工具了,那么对于之前没有接触过这块的该怎么办呢?答案很明显嘛,看资料,查文档,自己去琢磨,自己去敲一敲,跑一跑: Webpack是当下最热门的前端资源模块化管理和打包工具,它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源,还可以将按需加载的模块进行代码分割,等到实际需要的时候再异步加载. webpack和Grunt以及Gulp相比有什么特性 Gulp/Grunt是一种能够优化前端的开发流程的工具,而WebPack是一种模块化的
-
Java框架入门之简单介绍SpringBoot框架
前言 Spring都包含了哪些部分呢? 主要包含Spring Boot.Spring Framework.Spring Data.Spring Cloud.Spring Cloud Data Flow.Spring Security.Spring Batch等众多项目.在spring的官网中对其有详细的介绍. 一.SpringBoot是什么? SpringBoot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,
-
通过入门demo简单了解netty使用方法
这篇文章主要介绍了通过入门demo简单了解netty使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 前言 最近做一个项目: 大概需求: 多个温度传感器不断向java服务发送温度数据,该传感器采用socket发送数据:该数据以$符号开头和结尾,最后将处理的数据存入数据库: 我想到的处理方式:采用netty来接收和处理数据,然后用mybatis将处理后的数据存入数据库: 我在这之前从来没使用过netty,在网上倒是看到不少关于netty的文
-
C语言指针入门的简单实例教程
c语言的指针的存在使得c语言对硬件的操控,以及灵活性得到了极大的提高. 但是指针的使用存在着很多难点问题. #include<stdlib.h> #include<stdio.h> //这里的函数是指针做参数的例子,要知道这个特性可以弥补c语言只能有一个返回值的特性. void swap1(int *pa,int *pb){ int t =*pa; *pa=*pb; *pb=t; } //main()函数必须要返回一个数字 int main(){ int a =15; int b=
-
Apache Ant自动化脚本入门教程及常用命令介绍
一 Ant简介 Apache Ant是一个将软件编译.测试.部署等步骤联系在一起加以自动化的一个工具,大多用于Java环境中的自动化构建.它是Apache软件基金会JAKARTA目录中的一个子项目,它有以下的优点: 跨平台性.Ant是纯Java语言编写的,所以具有很好的跨平台性 操作简单.Ant是由一个内置任务和可选任务组成的.Ant运行时需要一个XML文件(构建文件). Ant通过调用target树,就可以执行各种任务.由于Ant构建文件 是XML格式的文件,所以很容易维护和书写,而且结构清晰
-
C++标准库bitset类型的简单使用方法介绍
std::bitset是STL的一部分,准确地说,std::bitset是一个模板类,它的模板参数不是类型,而整形的数值(这一特性是ISO C++2003的新特性),有了它我们可以像使用数组一样使用位. #include<bister> using std::bitset; 一句话定义:可自定义位数,用作记录二进制的数据类型. 一,定义和初始化 bitset<n> b; //b有n位,每位都为0; bitset<n>
-
Freemarker 最简单的例子程序
Freemarker 最简单的例子程序 freemarker-2.3.18.tar.gz http://cdnetworks-kr-1.dl.sourceforge.net/project/freemarker/freemarker/2.3.18/freemarker-2.3.18.tar.gz freemarker-2.3.13.jar: 链接: http://pan.baidu.com/s/1eQVl9Zk 密码: izs5 1.通过String来创建模版对象,并执行插值处理 执行后,控制台
-
.NET开发基础:从简单的例子理解泛型 分享
从简单的例子理解泛型话说有家影视公司选拔偶像派男主角,导演说了,男演员,身高是王道.于是有下面代码: 复制代码 代码如下: //男演员实体类public class Boy{ //姓名 private string mName; //身高 private int mHeight; public string Name { get { return this.mName; } } public int Height { get
-
利用XML开发留言板简单的例子
XML是一种基于文本格式的元标记语言,它注重对数据结构和数据意义的描述,实现了数据内容和显示样式的分离(xml+xsl),而且是与平台无关的. 由于XML注重数据内容的描述,因而,对于数据的检索非常有意义,我们不会再象HTML那样,检索出与我们要求无关的信息. 另一方面,XML文件是数据的载体,利用XML作为数据库,不需要访问任何数据库系统,我们可以使用任意WEB技术来显示我们的数据,比如HTML,FlashMX 等. 由于世界各大计算机公司的积极参与,XML正日益成为基于互联网的数据格式新一代
-
ruby 一些简单的例子
现在我们将前面的一些示例程序的代码坼开来分析一下. 下面的例子出现在简单的例子一节. def fact(n) if n == 0 1 else n * fact(n-1) end end print fact(ARGV[0].to_i), "\n" 因为是第一次解释,我们将逐行分析. def fact(n) 第一行,def 用于定义一个函数(或者,更准确地说,一个方法(method);我们会在稍后的一节中详