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. HSQL结合润乾报表同步部署问题

     1 . 问题概述 中国登记结算公司为了验证报表模型和附带的样例[内建的不算],都是需要连接携带的DEMO数据源才能够运行, 应用程序[润乾报表]需要部署到UNIX服务器上, DEMO自带的HSQ ...

  2. RecyclerView分隔线定制

    分割线我们利用RecyclerView的addItemDecoration(ItemDecoration fromHtml) 新建一个类来看看到底是什么: public class CategoryI ...

  3. redis 数据淘汰策略与配置

    redis 数据淘汰策略 volatile-lru:从已设置过期的数据集中挑选最近最少使用的淘汰volatile-ttr:从已设置过期的数据集中挑选将要过期的数据淘汰volatile-random:从 ...

  4. 回归JavaScript基础（六）

    主题:引用类型Date.RegExp的介绍. 上节主要主要介绍了Object.Array引用类型.这节将继续为大家介绍引用类型,并对书中的一些知识点进行总结与归纳,也借此巩固自己对JavaScript ...

  5. Java设计模式----观察者模式详解

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/3 ...

  6. Ad-hoc 查询以及动态SQL的罪恶[译]

    本文为翻译文章,原文地址:https://www.simple-talk.com/blogs/2009/08/03/stolen-pages-ad-hoc-queries-and-the-sins-o ...

  7. ElasticSearch入坑指南之概述及安装

    ---恢复内容开始--- ElasticSearch入坑指南之概述及安装 了解ElasticSearch ElasticSearch(简称ES)基于Lucene的分布式全文检索引擎.使用ES可以实现近 ...

  8. 获取WebService的请求信息

    一个已经写好的项目中有多个WebService,由于之前没有记录请求信息的,有时候需要查错等需要找到当次的请求信息,所以需要加入记录请求信息的功能. 首先想到的是在每一个带有WebMethod特性的方 ...

  9. 使用innodb_ruby探查Innodb索引结构

    使用innodb_ruby探查Innodb索引结构 innodb_ruby 是使用 Ruby 编写的 InnoDB 文件格式解析器.innodb_ruby 的目的是暴露一些其他隐藏的 InnoDB 原 ...

  10. windows多线程同步

    概述 任何单个应用程序都不能完全使该处理器达到满负荷.当一个线程遇到较长等待时间事件时,同步多线程还允许另一线程中的指令使用所有执行单元.例如,当一个线程发生高速缓存不命中,另一个线程可以继续执行.同 ...