环境: 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. 机器学习算法( 七、AdaBoost元算法)

    一.概述 当做重要决定时,大家可能都会考虑吸取多个专家而不只是一个人的意见.机器学习处理问题时又何尝不是如此?这就是元算法(meta-algorithm)背后的思路.元算法是对其他算法进行组合的一种方 ...

  2. 用C/C++扩展你的PHP 为你的php增加功能

    英文版下载: PHP 5 Power Programming http://www.jb51.net/books/61020.html PHP取得成功的一个主要原因之一是她拥有大量的可用扩展.web开 ...

  3. ubuntu16.0.4 update git

    Ubuntu 16.04 comes with Git 2.7.x, which is a little old now. As versions 2.8 & 2.9 are not part ...

  4. HttpClient+jsoup登录+解析 163邮箱

    找了几个,只有这个靠谱,用的是httpclient4,另外还需要commons-lang和jsoup包 http://jsoup.org/ http://www.oschina.net/code/sn ...

  5. 在项目中用过Spring的哪些方面？及用过哪些Ajax框架？

    在项目中用过Spring的哪些方面?及用过哪些Ajax框架? 解答:在项目使用过Spring IOC ,AOP,DAO,ORM,还有上下文环境. 在项目使用过Ext,Juery等Ajax框架.

  6. centos7 禁用每次sudo 需要输入密码

    安装完centos7后,默认没有启用sudo,首先应该是对sudo进行设置.sudo的作用就是使当前非root用户在使用没有权限的命令 时,直接在命令前加入sudo,在输入自己当前用户的密码就可以完成 ...

  7. ORB特征提取与匹配

    ORB特征是目前最优秀的特征提取与匹配算法之一,下面具体讲解一下: 特征点的检测 图像的特征点可以简单的理解为图像中比较显著显著的点,如轮廓点,较暗区域中的亮点,较亮区域中的暗点等.ORB采用FAST ...

  8. C语言程序设计-同一天生日[综合应用]

    [问题描述] 在一个有200人的大班级中,存在两个人生日相同的概率非常大,现给出每个学生的学号,出生月日,试找出所有生日相同的学生. [输入形式] 第一行为整数n,表示有n个学生,n<=200. ...

  9. 图片和byte[]数组互转

    一.图片转成byte[]数组. import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io ...

  10. jquery动态生成html代码绑定事件

    今天工作中需要在页面动态生成html代码,但发现新生成的代码的click事件失效了(非动态生成的代码已经绑定了click事件),于是在网上找了很多解决办法,很多都比较复杂,且使用的jquery都比较老 ...