准备工作

1.新建文件夹：webpack-demo（下面我们简称该文件夹为根目录）,在根目录下面建两个文件夹，分别为src和dist。

　　1).src文件夹：用来存放我们编写的javascript代码，可以简单的理解为用JavaScript编写的模块。

　　2).dist文件夹：用来存放供浏览器读取的文件，这个是webpack打包成的文件。

　　并且在根目录下，初始化package.json文件，安装好webpack 和 webpack-cli。不懂的点击这里~

2.在dist下建立一个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>webpack快速入门</title>

</head>

<body>

    <div id="title"></div>

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

</body>

</html>

先不要管上面 bundle.js是嘛玩意~

3.src下建一个entry.js文件。写入代码：

document.getElementById('title').innerHTML='快速创建Webpack demo';

4.新建webpack.config.js，进行打包配置：

module.exports = {

    mode: 'development',

    //入口

    entry: [__dirname + '/src/entry.js'],

   //出口

    output: {

        path:__dirname + '/dist',

        filename: 'bundle.js',

    }

}

mode：开发模式，development 表示开发环境，production 表示生产环境。

entry：入口文件，就是你需要打包哪些文件，就写哪个文件的路径。__dirname表示根目录，在这里就是表示webpack-demoy这个文件夹。

output：出口文件。

　　path：表示你打包之后文件要放在哪里。

　　filename：表示你打包之后的文件名。

5.在 package.json 文件添加下面红框标记的代码：

你在安装node的时候应该就配置了环境变量，在这里定义这个就是为了让我们的命令行语句短一些。

如果不定义这个，我们要打包文件的时候就需要执行 【npm run node_modules/.bin/webpack】这么一长串。定义了这个之后，直接执行【npm run start】就可以了。

6.终端执行命令：

cnpm run start

执行完之后结果如下：

此时我们可以看到dist 目录下面多了一个 bundle.js。

到这里我们就已经完成了对于webpack demo 的创建。

感谢阅读~~

webpack2--webpack 4.X 快速创建demo的更多相关文章

  1. IDEA中SpringBoot项目快速创建单元测试

    如何在IDEA中对于SpringBoot项目快速创建单元测试 创建测试用例 右键需要进行测试的方法,选择GO TO然后选择Test 点击Create New Test 勾选需要创建单元测试的方法 然后 ...

  2. 纸壳CMS（ZKEACMS）体验升级，快速创建页面，直接在页面中修改内容

    关于纸壳CMS 纸壳CMS又名 ZKEACMS Core 是ZKEACMS的 .net core 版本,可运行在 .net core 1.1 平台上.是一个开源的CMS. 纸壳CMS对于 ZKEACM ...

  3. 快速创建显示数字数据的动画——CountUp.js

    由于项目需求,需要写一个数字增/减量的动画特效,最后找到了CountUp.js CountUp.js是一个无依赖,轻量级的JavaScript“类”,可用于快速创建以更有趣的方式显示数字数据的动画. ...

  4. ASP.NET Core模块化前后端分离快速开发框架介绍之2、快速创建一个业务模块

    源码地址 GitHub:https://github.com/iamoldli/NetModular 演示地址 地址:https://nm.iamoldli.com 账户:admin 密码:admin ...

  5. vue-cli3.X快速创建项目

    1.安装 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli. 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过以下方式先卸载它: npm unin ...

  6. 【转载】C#通过Clone方法快速创建相同架构的DataTable

    在C#中的Datatable数据变量的操作过程中,如果需要克隆当前DataTable变量的结构,包括所有 DataTable 架构和约束等信息,可以使用DataTable中的Clone方法来实现,Cl ...

  7. Spring Boot-初学01 -使用Spring Initializer快速创建Spring Boot项目 -@RestController+spEL -实现简单SpringBoot的Web页面

    1.IDEA:使用 Spring Initializer快速创建项目 IDE都支持使用Spring的项目创建向导快速创建一个Spring Boot项目: 选择我们需要的模块:向导会联网创建Spring ...

  8. 十分钟快速创建 Spring Cloud 项目

    一般来说,Intelij IDEA 可以通过 Maven Archetype 来快速生成Maven项目,其实 IDEA 集成了 Spring 官方提供的 Spring Initializr,可以非常方 ...

  9. 【Activiti工作流引擎】官方快速入门demo

    Activiti官方快速入门demo 地址: https://www.activiti.org/quick-start 0. 版本 activiti 5.22.0 JDK 1.8 1. 介绍 这个快速 ...

随机推荐

  1. linux分区详解

    点评:如果你想了解linux分区,请务必认真阅读本文.对于初学者来说,linux分区不像windows下那么一目了解.    Linux 分区的规定      1. 设备管理 在 Linux 中,每一 ...

  2. Atitit opencv3.0  3.1 3.2 新特性attilax总结

    Atitit opencv3.0  3.1 3.2 新特性attilax总结 1. 3.0OpenCV 3 的改动在哪?1 1.1. 模块构成该看哪些模块?2 2. 3.1新特性 2015-12-21 ...

  3. Java数据库连接池实现原理

    一般来说,Java应用程序访问数据库的过程是: 装载数据库驱动程序: 通过jdbc建立数据库连接: 访问数据库,执行sql语句: 断开数据库连接. public class DBConnection ...

  4. 运行Virtualbox去安装系统时出错：Failed to open a session for the virtual machine，Unable to load R3 module xxxx/VBoxDD.DLL(VBoxDD)

    貌似看到不少人(1,2,3),在使用Virtualbox去安装系统时,都遇到这个错误: 比如这里遇到的: 截图: 和另外这里的截图: 加文字描述: Failed to open a session f ...

  5. Specular Aliasing与Specular Leaking

    最近做高质量实时HDR PBR渲染中碰到了2个关键问题,若干思考如下: 问题1: 极高的动态范围HDR+高级BRDF+相对较低的采样率(比方说不考虑子像素的原始分辨率),在这3项因素的综合作用下,Sp ...

  6. 深入HBase架构解析（二）【转】

    转自:http://www.blogjava.net/DLevin/archive/2015/08/22/426950.html 前言 这是<深入HBase架构解析(一)>的续,不多废话, ...

  7. Mac使用pyenv安装Python出现The Python zlib extension was not compiled. Missing the zlib错误

    Mac使用pyenv安装Python出现The Python zlib extension was not compiled. Missing the zlib错误 参考这里,详细如下: On Mac ...

  8. Java的数组和list升序，降序，逆序函数Collections.sort和Arrays.sort的使用

    list升序,降序,逆序List<Integer>list =new ArrayList<Integer>();//如果list是 5 7 2 6 8 1 41.升序:Coll ...

  9. shell 全局剔除标点符号

    vim打开文件 []如果是单个字符的话,加上中括号就代表“或”了 :%s/[`~!@#$^&*()=|{}':;',\[\].<>?�/￥……——|[]‘::”“'.,.]//g ...

  10. java 多线程 28 ： 多线程组件之 Semaphore 信号量

    Semaphore是非常有用的一个组件,它相当于是一个并发控制器,是用于管理信号量的.构造的时候传入可供管理的信号量的数值,这个数值就是控制并发数量的,就是同时能几个线程访问.我们需要控制并发的代码, ...