webpack4基础入门操作（一）
基于webpack4实践：
开始：打开控制面板，制定到创建Webpack的文件夹。 并创建初始配置文件package.json
输入命令：npm init -y，在文件夹中出现一个package.json文件，并出现一个文件夹“node_modules”
接着就是安装webpack 插件了，输入命令：npm install -D webpack，成功后在package.json文件中出现下面的代码。
npm install -D webpack-cli，该安装可能会提示关于“src”的相关错误，就是需要配置相关的目录结构，如下：
默认webpack，是打包“src”下面的index.js，并在dist文件夹中生成main.js。所以需要该结构。
没有相关的index.js文件和index.html文件，目前是不成功的。
先在安装一个插件：npm install --save lodash
然后创建index.js，如下：
import _ from 'lodash';
function component() {
var element = document.createElement('div');
// Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' '); return element;
}
document.body.appendChild(component());
在dist文件夹中创建html文件：
<!doctype html>
<html>
<head>
<title>Getting Started</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
然后执行命令：npx webpack，则在dist中生成一个main.js文件，该文件为index.js的打包文件。直接浏览器查看index.html则看到相关页面信息。
一般项目肯定无法这样操作，因为不可能只编译一个JS和一个Html，所以我们自定义配置一个config.js。在根目录创建webpack.config.js，写入：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
然后执行下面的命令：npx webpack --config webpack.config.js，则打包时，就会按照webpack.config.js中设置的规则生成文件。
在查看dist文件夹中会生成一个bundle.js。
如果使用的是VSCode开发，则可以在package.json文件中添加“scripts”配置："build": "webpack --progress --colors"，
然后就可以在控制台输入：npm run build做编译。
webpack4基础入门操作（一）的更多相关文章
- webpack4基础入门操作（二）（讲解下webpack的配置内容）
前序:我之所以开始写这个系列,是因为我最近出去看了下外面的情况,发现技术更新的脚步太快了.我的技术栈已经完全落伍了. 所以准备今年学习写新的东西,而React.webPack4就是我的第一步.前面我看 ...
- Mysql的二进制安装和基础入门操作
前言:Mysql数据库,知识非常的多,要想学精学通这块知识,估计也要花费和学linux一样的精力和时间.小编也是只会些毛皮,给大家分享一下~ 一.MySQL安装 (1)安装方式: 1 .程序包yum安 ...
- Mysql数据库的二进制安装和基础入门操作
前言:Mysql数据库,知识非常的多,要想学精学通这块知识,估计也要花费和学linux一样的精力和时间.小编也是只会些毛皮,给大家分享一下~ 一.MySQL安装 (1)安装方式: 1 .程序包yum安 ...
- MySQL数据库的二进制安装、源码编译和基础入门操作
一.MySQL安装 (1)安装方式: 1 .程序包yum安装 优点:安装快,简单 缺点:定死了各个文件的地方,需要修改里边的相关配置文件,很麻烦 2 .二进制格式的程序包:展开至特定路径,并经过简单配 ...
- 在MVC中Dashboard基础入门操作
DevExpress中的Dashboard这个图形插件真的很好用, 只需要在设计器绑定数据就行了,完全不用写后台代码.我也是刚学这个插件,可能还有一些我没有了解的知识点,忘各位大佬不吝赐教.我写这篇博 ...
- git 基础入门操作
前言: 介绍基础的git入门级指令,虽然git指令非常多,但是实际工作中,我们会用到的非常少,小项目中甚至只需要用到2.3个.而且大部分人都会采用gui,而不是每次都打开终端然后输一长串难记的指令. ...
- 【webpack系列】webpack4.x入门配置基础（一）
一.前言 webpack在不断的迭代优化,目前已经到了4.29.6.在webpack4这个版本中,做了很多优化,引入了很多特性,将获得更多模块类型,.mjs支持,更好的默认值,更为简洁的模式设置,更加 ...
- Java基础之cmd入门操作笔记
前提:jdk已安装且环境变量配置成功,参考上文jdk 安装及环境变量配置 入门操作步骤: 1.打开记事本或者notepad,编写Abc代码,具体如下: public class Abc{ pub ...
- 从零3D基础入门XNA 4.0(2)——模型和BasicEffect
[题外话] 上一篇文章介绍了3D开发基础与XNA开发程序的整体结构,以及使用Model类的Draw方法将模型绘制到屏幕上.本文接着上一篇文章继续,介绍XNA中模型的结构.BasicEffect的使用以 ...
随机推荐
- 基于IdentityServer4的单点登录——Client
以MvcClient项目为例 1.新建项目并添加引用 新建一个asp .net core 2.0的项目引用IdentityModel 2.配置 比之前的控制台客户端多这个步骤,需要配置这个客户端的Cl ...
- 【C#】wpf查找父子节点
原文:[C#]wpf查找父子节点 using System; using System.Collections.Generic; using System.Linq; using System.Tex ...
- 八荣八耻 IT版
八荣八耻 IT版以可配置为荣,以硬编码为耻:以系统互备为荣,以系统单点为耻:以随时可重启为荣,以不能迁移为耻:以整体交付为荣,以部分交付为耻:以无状态为荣,以有状态为耻:以标准化为荣,以特殊化为耻:以 ...
- CopyMemory、FillMemory、MoveMemory、ZeroMemory
CopyMemory 复制内存,第一个参数为目的地址,第二个参数为源地址,第三个参数为复制数据的大小,单位字节,源内存区域不能重叠,如果重叠,可以使用MoveMemory()函数.函数原型如下: vo ...
- 演练：创建和使用动态链接库 (C++)
我们将创建的第一种类型的库是动态链接库 (DLL). 使用 DLL 是一种重用代码的绝佳方式. 您不必在自己创建的每个程序中重新实现同一例程,而只需对这些例程编写一次,然后从需要该功能的应用程序引用它 ...
- vim好用的功能 sublime text2类似的实现系列一
sublime的跳转 功能 快捷键 备注 往回跳 alt+- 和vim一样方便,可以在页面些跳转,定位到上次编辑的地方 往前跳 alt+shift+- 无 定义或取消标记 ctrl+<F2> ...
- Model1简介
Model1模型出现前,整个Web应用的情况:几乎全部由JSP页面组成,JSP页面接收处理客户端请求,对请求处理后直接做出响应. 弊端:在界面层充斥着大量的业务逻辑的代码和数据访问层的代码,Web程序 ...
- 由Qmake.exe/QtCreator.exe启动速度慢挖进去（非常有趣的调试过程，作者态度不错，而且关闭Welcome插件也是常见办法）
一直用Qt Creator开发Qt程序,Nokia的Qt Creator实在太慢了,启动慢,编译速度也是超级慢.昨天,终于它慢的让我无法忍受了,我决定抛开手上的一切工作,深入挖掘Qt Creator启 ...
- ASP.NET 5 (vNext) 牛刀小試：自帶 DI 容器
小引 在 ASP.NET 5(vNext)之前,亦即 MVC 4/5.Web API 2 的时代,MVC 与 Web API 框架彼此有非常相似的设计,却是以不同的代码来实现.现在,ASP.NET 5 ...
- windows Service 之调试过程（附加到进程里调试，而且启动时间不能超过30秒）
最近第一次用C#写了一个windows service ,其实实现的内容比较简单.就是启动remoting 连接,但是调试相对初次写windws service 的我来说,比较烦.没有经验,而且没办法 ...