1、步骤

　　1）运行npm init -y 快速初始化项目

　　2）在项目根目录创建src源代码目录和dist产品目录，目录结构

webpack4.x-base

    |dist

    |src

        |index.html

        |index.js

　　3）安装webpack:

cnpm i webpack webpack-cli -D

　　4）在项目根目录下创建webpack.config.js, 由于webpack4.x约定大于配置，默认入口就是src/index.js，出口dist/main.js

module.exports = {

    mode: 'development' // development  production

};

　　

2、项目结构

　　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>主页</title>

    <script src="../dist/main.js"></script>

</head>

<body>

</body>

</html>

创建基本的webpack4.x项目的更多相关文章

  1. IntelliJ IDEA 14.x 与 Tomcat 集成，创建并运行Java Web项目

    转自:http://www.php-note.com/article/detail/854 IntelliJ IDEA 14.x 与 Tomcat 集成,创建并运行Java Web项目 作者:php- ...

  2. 通过beego快速创建一个Restful风格API项目及API文档自动化

    通过beego快速创建一个Restful风格API项目及API文档自动化 本文演示如何快速(一分钟内,不写一行代码)的根据数据库及表创建一个Restful风格的API项目,及提供便于在线测试API的界 ...

  3. 使用Visual Studio 创建新的Web Part项目

    使用Visual Studio 创建新的Web Part项目 Web Part是你将为SharePoint创建的最常见的对象之中的一个.它是平台构建的核心基块. 1. 管理员身份打开Visual St ...

  4. eclipse创建Maven父子结构Maven项目

    1.创建聚合模块 选择菜单项 File—>New—>Other,在弹出的对话框中选择Maven下的Maven Project,然后单击Next按钮,在弹出的New Maven Projec ...

  5. .net core CLI(创建VueJS||Angular结合的项目)

    net core cli 是快速创建模板项目 安装CLI 参考: https://www.hanselman.com/blog/dotnetNewAngularAndDotnetNewReact.as ...

  6. Linux搭建GIT 使用Eclipse创建并上传Git项目 EGit操作

    Linux搭建Git 1. gitblit服务器文档 http://gitblit.com/setup_go.html 2. 安装jdk 参考 http://blog.csdn.net/jerome_ ...

  7. IntelliJ IDEA 创建Spring+SpringMVC+mybatis+maven项目

    参考自:https://www.cnblogs.com/hackyo/p/6646051.html 第一步: 创建maven项目 输入项目名和工程id 选择maven 默认就可以了 刚开始时间比较长, ...

  8. Intellij IDEA创建git,maven的SpringMVC项目

    Intellij IDEA创建git,maven的SpringMVC项目 原文链接:http://www.cnblogs.com/blog5277/p/8906120.html 原文作者:博客园--曲 ...

  9. maven创建父子关系的聚合项目

    我最近使用eclipse的mavean插件创建父子关系的聚合项目,如果创建子工程直接在父工程我相信大家都会创建,但是子工程在父工程中的其中一个文件夹里面,我们创建子工程是直接存在父工程下面的,当我们想 ...

随机推荐

  1. Linux系列（6）：入门之文件与目录管理

    你知道常见的目录操作吗? 知道如何查询文件内容吗? 了解 umask 指令吗,知道如何查看和设置文件的默认权限吗? 知道文件的隐藏属性吗,了解如何设置(chattr指令)并查看(lsattr指令)吗? ...

  2. winform中如何使用timer控件实现欢迎(初始加载)窗口

    第一步.新建窗体项目命名为:TestWelcomeFrm,如下图: 第二步.在新项目中,增加欢迎窗口,命名为WelFrm,整个项目目录如下: 第三步.修改program.cs中启动代码如下: WelF ...

  3. Jmeter之TCP取样器

    1.在线程组中添加“TCP取样器” 2.填写数据 以下截图是必须配置的 TCPClient classname:  填写TCP报文格式(有三类),默认前缀:org.apache.jmeter.prot ...

  4. Neo4j图数据库配置文件详解

    For more details and a complete list of settings, please see https://neo4j.com/docs/operations-manua ...

  5. Validator自动验证与手动验证

    自动: public JResult projectAdd(@Valid Project project, BindingResult result) {Map<String,Object> ...

  6. asp.net 4.Redirect重定向和文件图片上传

    1.Response.Redirect 如图所示: 1.用户点击修改按钮, 浏览器向服务器发送一个POST请求 http://localhost:6543/UpdateUser.ashx 2.服务器的 ...

  7. Win32 编程

    1.ShowWindow(SW_SHOWNORMAL)  参数 : SW_HIDE激活另外一个窗口,当前窗口就跑到那个窗口后面了SW_MAXIMIZE显示的窗口是最大化的SW_MINIMIZE显示的窗 ...

  8. js之数据类型（对象类型——构造器对象——数组1）

    数组是值的有序集合,每个值叫做一个元素,而每一个元素在数组中有一个位置,以数字表示,称为索引.JavaScript数组是无类型的,数组元素可以是任意类型且同一个数组中不同元素也可能有不同的类型.数组的 ...

  9. 【Git的基本操作十】远程库分支操作

    远程库分支操作 1. 推送分支 在本地库新建分支 git branch [新分支名] 如创建一个develop分支: git branch develop 推送分支(将新分支发布在github上) g ...

  10. parseInt()、Number()区别

    parseInt从头解析string为整数,在遇到不能解析的字符时就返回已经解析的整数部分,如果第一个字符就不能解析,就直接返回NaN. Number如果无法转换为数字,就返回NaN.像“123a”, ...