环境: win10, webpack v3.5.6, node v8.4, npm v5.3.

安装与配置

新建一个项目目录demo, 在当前目录执行如下命令:

npm init -y

npm install --save-dev webpack

npm install --save lodash

根据如下目录结构创建文件:

  demo

  |- package.json

+ |- webpack.config.js

  |- /dist

    |- index.html

  |- /src

    |- index.js

新版npm会自动创建package-lock.json

dist是distribution code的缩写, 用来存放生产环境的代码.

webpack.config.js 内容如下

const path = require('path');

module.exports = {

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

	output: {

		filename: 'bundle.js',

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

	}

};

dist/index.html 内如如下

<html>

<head>

    <title>Getting Started</title>

</head>

<body>

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

</body>

</html>

src/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());

在package.json中添加如下内容

"scripts": {

    "build": "webpack"

}

测试使用

执行npm run build, 将会在dist目录下生成bundle.js. 成功执行后将输出以下内容:

sheng@SHENG-LAPTOP D:\Asheng_IDE\FrontEnd\study_tree\webpack\demo

> npm run build

> demo@1.0.0 build D:\Asheng_IDE\FrontEnd\study_tree\webpack\demo

> webpack

Hash: bf97d2bdc70ce2f70877

Version: webpack 3.5.6

Time: 386ms

    Asset    Size  Chunks                    Chunk Names

bundle.js  544 kB       0  [emitted]  [big]  main

   [0] ./src/index.js 263 bytes {0} [built]

   [2] (webpack)/buildin/global.js 509 bytes {0} [built]

   [3] (webpack)/buildin/module.js 517 bytes {0} [built]

    + 1 hidden module

此时, 在dist目录下的2个文件: index.html 和 bundle.js即为打包的在生产环境中使用

的文件, 双击index.html可直接运行.

相关链接

https://webpack.js.org/guides/getting-started/

webpack基础使用的更多相关文章

  1. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server

    一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...

  3. 搭建webpack基础配置

    搭建webpack基础步骤: 1.去官方网站下载node.js(根据自己电脑的系统类型选择) 2.安装node.js完成后打开cmd命令提示符: 出现版本号证明安装成功 3.cd到工程目录下 npm ...

  4. nodejs+gulp+webpack基础知识

    nodejs+gulp+webpack基础知识 2019年08月22日 11:49:40 天府云创 阅读数 22   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文 ...

  5. Webpack基础学习

    Webpack基础学习:https://segmentfault.com/a/1190000008853009

  6. 学习webpack基础笔记01

    学习webpack基础笔记 1.webpack搭建环境最重要的就是如何使用loader和plugins,使用yarn/npm安装插件.预处理器,正确的配置好去使用 2.从0配置webpack - 1. ...

  7. 【webpack】---模块打包机webpack基础使用---【巷子】

    001.什么是webpack? 作用有哪些? WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,Ty ...

  8. Webpack -- 基础篇

    篇仅演示 webpack 的基础搭建,为入门和走通基本流程而写.仅 window 系统. 1. 安装一些东西 安装 nodeJS,下载链接.然后检查安装是否完成. 系统“开始”和“R”键同时按住,桌面 ...

  9. webpack基础知识点

    webpack 是一个现代的 JavaScript 应用程序的模块打包器(module bundler). 入口(Entry) webpack 将创建所有应用程序的依赖关系图表(dependency ...

  10. webpack基础知识

    一.基础 1 安装 npm i -g webpack webpack-cli // 推荐安装至本地 npm i -D webpack webpack-cli 2 webpck基础使用 2.1 webp ...

随机推荐

  1. c# 常用操作保留

    RanDom如何提高生成随机数的随机性 一个在线考试系统的项目,需要从题库中随机抽取试题,但是如果直接 Random ran=new Randon(),ran.Next(nummin,nummax); ...

  2. Android开发基本入门，对于事件、适配器的理解不够深入

    能到处抄点代码搞出东西来了,但对事件.对ListView这类的控件,数据解析后的视图绑定,还没有完全搞清原理. 真是年纪越大,学习能力越差了.

  3. ubus

    openwrt提供了一个系统总线ubus,类似linux桌面操作系统的d-bus,目标是提供系统级的进程间通信(IPC)功能. 为了提供各种后台进程和应用程序之间的通信机制,ubus被开发出来,由3部 ...

  4. Tuning 16 Using Materialized view

    物化视图表示在数据库的其他地方另外存放了一份as 后边的内容, 如果只是普通view, 那么 rowid 是相同的, view相当于指针, 它指向基表. 而物化视图的rowid 与基表是不一样的, 所 ...

  5. html 简单的预缓存

    切图生成html,加鼠标响应,预缓存 <style> .d4{ width:190; height:170; background-image: url(images/未标题-1_09-1 ...

  6. 数据挖据之GeoHash核心原理解析

    引子 机机是个好动又好学的孩子,平日里就喜欢拿着手机地图点点按按来查询一些好玩的东西.某一天机机到北海公园游玩,肚肚饿了,于是乎打开手机地图,搜索北海公园附近的餐馆,并选了其中一家用餐. 饭饱之后机机 ...

  7. 2017 CCPC 杭州 流水账

    day0: 队内训练ccpc 秦皇岛,敝校自己出的题,感觉一个星期没怎么写代码,手生得很,不出意料被打飞了. day1 (热身赛): 热身赛还算顺利,A题看有的队几分钟就草过去了,还以为又是西安ICP ...

  8. Nucleus PLUS简单介绍

    近些年来,随着嵌入式系统飞速的发展,嵌入式实时操作系统广泛地应用在制造工业.过程控制.通讯.仪器仪表.汽车.船舶.航空航天.军事.装备.消费类产 品等方面.今天嵌入式系统带来的工业年产值超过了1万亿美 ...

  9. socket.io 中文api

    1. 服务端 io.on('connection',function(socket)); 监听客户端连接,回调函数会传递本次连接的socket io.sockets.emit('String',dat ...

  10. Bower和Gulp集成前端资源

    在我们开始前先介绍下流程: 安装node.js. 安装npm. 全局安装bower. 根目录创建 .bowerrc (可选) 在项目中安装bower 并创建 bower.json 文件,运行 bowe ...