环境: 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. PL/SQL开发五年工作经验精典实例

    1. minus(差集)与intersect(交集) minus指令是运用在两个SQL语句上.它先找出第一个SQL语句所产生的结果,然后看这些结果有没有在第二个SQL语句的结果中,如果有的话,那这一笔 ...

  2. linux命名对文件的读写和退出

    vi xxx.txt 打开就能看到里面的内容.按 i 进入编辑模式,然后就可以输入内容了,也可以移动光标到你要删除内容的位置按删除键来删除内容.编辑完后可以按 Esc(键盘左上角) 进入命令模式.然后 ...

  3. redux sample with slim redux source code

    code sample没有package.json文件,也就没有任何外部依赖,直接使用slim redux source code. slim resux只有90多行. nodejs对es6的impo ...

  4. BootStrap带样式打印

    在新窗口打印时bootstrap表格的样式出不来,因为打印时没有加载CSS样式. 我在jquery.PrintArea.js的基础上改造了下打印的方法: (function ($) { var pri ...

  5. 网络协议之p2p---一个简单的nat 穿透demo

    http://www.pudn.com/downloads64/sourcecode/p2p/detail228131.html http://www.pudn.com/downloads15/sou ...

  6. Sublime Text 加入右键菜单

    Sublime Text 2 是现在很受大家欢迎的编辑器了,不仅是在web前端,在书定简单的php.Js等代码时,也是相当的好用,再配合多种的插件和新颖的界面,更是让人欲罢不能. 在使用时,我们通过喜 ...

  7. Ideal-image-slider 幻灯片实例演示

    链接:http://zaixianshouce.iteye.com/blog/2316300 http://www.shouce.ren/study/api/s/jq--5733e32bf23bb-- ...

  8. Jquery实现Bootstrap树形列表

    http://bookshadow.com/weblog/2014/05/17/jquery-bootstrap-tree-list/

  9. 显示excel工作簿中所有工作表的名称！！！

    问题描述: 有一个工作簿里边将近二百多个工作表(公司),想统计里边所有公司名称即二百多个工作表的名称. 1.找一个空白工作表,也可以利用原来工作表中不用的列,转到“公式”工具栏,点击名称管理,在跳出来 ...

  10. poj 2923(状态压缩+背包)

    比较巧妙的一道题目,拿到题目就想用暴力直接搜索,仔细分析了下发现复杂度达到了2^n*n! ,明显不行,于是只好往背包上想. 于是又想二分找次数判断可行的方法,但是发现复杂度10^8还是很悬... 然后 ...