环境: 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. Windows下安装Django【转】

      Windows下安装Django及WEB服务启动 如果使用的是 Linux 或 Mac OS X ,系统可能已经预装了 Python .在命令提示符下 (或 OS X 的终端中) 输入python ...

  2. DIV的内容自动换行

    word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行. 它们的区别就在于: 1,word-break:break-all 例如div宽 ...

  3. 小型web服务器thttpd的学习总结（下）

    1.主函数模块分析 对于主函数而言,概括来说主要做了三点内容,也就是初始化系统,进行系统大循环,退出系统.下面主要简单阐述下在这三个部分,又做了哪些工作呢. 初始化系统 拿出程序的名字(argv[0] ...

  4. 截图工具gsnap

    嵌入式linux截图工具的基本原理就是通过读取Framebuffer,把LCD上显示的内容转换成图片格式文件(jpeg.bmp.png). gsnap.bin 1.jpg  /dev/fb0 gsna ...

  5. how to identify your .NET Framework version

    scenario: when I try to install github-windows on my PC, got such error "lower .NET Framework V ...

  6. 2PC&3PC

    在分布式系统中,每一个机器节点虽然都能够明确地知道自己在进行实物操作过程中的结果是成功或失败,但却无法直接获取到其他分布式节点的操作结果.为了保持实物处理的ACID特性,就需要引入一个称为" ...

  7. python 学习笔记 if语句

    一.if语句的格式 语句块必须有相同的缩进. 语句块必须比if,elif,else多一层缩进 # 如果条件成立则执行语句块1, # 否则 如果条件2成立则执行语句块2 # 其他情况执行语句块3 # e ...

  8. html input accept类型

    在上传文件的时候,需要限制指定的文件类型. <input type="file" accept="image/*" /> accept表示可以上传文 ...

  9. jquery XHTML

    传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 X ...

  10. Django admin 注册多个app

    class game(models.Model): content = models.TextField() def __str__(self): return 'To game %s' % self ...