webpack 用于编译 JavaScript 模块。一旦完成安装，就可以通过 webpack 的 CLI 或 API 与其配合交互。

首先创建一个目录，进入目录中，初始化npm 然后本地安装webpack，webpack-cli ，lodash

目录结构：

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>Document</title>

</head>

<body>

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

</body>

</html>

webpack.config.js

const path = require('path');

module.exports = {

    entry: './src/index.js',

    output:{

        filename: 'bundle.js',

        path: path.resolve(__dirname, 'dist')

    }

}

package,json

{

  "name": "webpack-demo",

  "version": "1.0.0",

  "description": "",

  "private": true,

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "build": "webpack"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "webpack": "^4.29.6",

    "webpack-cli": "^3.2.3"

  },

  "dependencies": {

    "lodash": "^4.17.11"

  }

}

输入npm run build

webpack初起步的更多相关文章

  1. webpack初体验_集成插件_集成loader

    webpack初体验 如果没装 webpack 就先装一下,命令行输入npm i webpack -g 新建一个项目 创建一个空的项目 定义一个名称 创建一个Module 选择静态 web 输入名称 ...

  2. webpack初入

    序言:前面已经倒腾了grunt.gulp.fis3,今天来通过一个例子玩玩webpack!最终预览 通过下面的例子,能够了解以下几点: 1.如何安装webpack 2.如何使用webpack 3.如何 ...

  3. webpack初体验

    本人菜鸟一枚,最近一直在研究webpack的使用,记录下自己的学习体会,由于网上关于webpack的资源(技术博客)太多,对于初学webpack的新手来说,看着五花八门的技术博客,真是头晕眼花(可能是 ...

  4. Webpack 2 视频教程 004 - Webpack 初体验

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  5. webpack初入门

    首先利用npm install webpack -g,这里我试过用cnpm安装不成功,不知道是什么回事, webpack 用来压缩打包网站的一些插件和依赖包而存在的, webpack  文件名  打包 ...

  6. webpack+vue起步

    本文基于vue1.x 基于vue2.x&webpack2.x请移步至 Vue2.x踩坑与总结Webpack2.x踩坑与总结 记得第一次知道Vue.js是在勾三股四大大的微博,那时候他开始翻译v ...

  7. webpack初体验之模块化开发

    写在前面的话 上次写过一篇关于webpack入门的博客,当时只是说借助node来完成开发,并用webpack打包以让浏览器识别.其实其主要思想就是实现前端模块化开发. 众所周知,历史上,JavaScr ...

  8. 初入webpack

    为什么需要构建工具? 通过caniuse我们了解到 现代浏览器对es6特性的支持程度: 由于现代浏览器对es6特性的支持度并不能说太高,为了兼容所以需要进行 es6语法的转换,除了此,三大框架的语法特 ...

  9. webpack继续

    序言:继续上一篇<webpack初入> 1.上一篇配置完成后最终的命令是:webpack,如果更改package.json中的一个配置如下: 换为 此时最终的命令:npm start等同于 ...

随机推荐

  1. PHP中cookie和session的区别

    1.cookie数据存放在客户的浏览器上,session数据放在服务器上. 2.cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗考虑到安全应当使用session. 3 ...

  2. 用CSS的方法如何让一个元素不可见？（面试题目）

    面试中看到这个问题,自己想的不全面,下面整理下,一起学习: 一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应 ...

  3. x86项目中读取注册表Register数据项的方法

    x86项目中使用Registry读取key/value的时候,会出现重定向的问题,解决方法如下: public static string GetMachineGuid() { string guid ...

  4. 润乾报表一个页面中的echarts地图与其他区块的联动

    需求概述: DBD样式效果如下图所示,需要点击左侧地图中的地区,右侧的仪表盘,柱线图可以对应显示对应该地区的数据. 实现思路: 分别制作带有地图.仪表盘.柱线图的3张报表:将3张报表放到DBD中设置布 ...

  5. ASP.NET MVC 实现区域 项目分离 (比较好的方式)

    说明: ZRT.Web 是前台网站,目录[D:\ZRT.Web\] ZRT.Admin 是后台管理,目录[D:\ZRT.Web\Applications\Admin\],删除文件[Global.asa ...

  6. 课后作业week 5 —— 两款修图软件优势及创新分析

    由于我平时没事也会修修照片什么的,也用过一些不同种类的修图软件,这次作业就选择了其中两款比较热门的软件进行分析. 说到手机修图app,很多人很容易想到“美图秀秀”,的确这款app在修图软件领域的确算的 ...

  7. “拒绝了对对象数据库的 EXECUTE 权限”之解决

    “拒绝了对对象'aspnet_CheckSchemaVersion'的 EXECUTE 权限”之解决 [错误状态] “/XXX”应用程序中的服务器错误. ----------------------- ...

  8. win7 下安装oracle 10 g

    首先下对版本,Oracle 10g支持Win7版: http://download.oracle.com/otn/nt/oracle10g/10203/10203_vista_w2k8_x86_pro ...

  9. 如何在C++中动态建立二维数组(转)

    http://blog.sina.com.cn/s/blog_7c073a8d0100qp1w.html http://blog.163.com/wujiaxing009@126/blog/stati ...

  10. 关于第一场HBCTF的Web题小分享，当作自身的笔记

    昨天晚上6点开始的HBCTF,虽然是针对小白的,但有些题目确实不简单. 昨天女朋友又让我帮她装DOTA2(女票是一个不怎么用电脑的),然后又有一个小白问我题目,我也很热情的告诉她了,哎,真耗不起. 言 ...