环境: 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. 关于EasyUI的Layout总结

    版权声明:本文为博主原创文章,未经博主允许不得转载. 1.layout以html标签方式建立的 <div id="content" region="center&q ...

  2. matlab和C/C++混合编程--Mex （转载）

    matlab和C/C++混合编程--Mex 最近的项目需要matlab和C的混合编程,经过一番努力终于完成了项目要解决的问题.现在就将Mex的一些经验总结一下,当然只是刚刚开始,以后随着学习的深入继续 ...

  3. 解决linux下/etc/rc.local开机器不执行的原因

    前不久因项目需要写了开机启动其他程序的shell脚本,因工作忙,调试完给了技术支持人员,也没去注意过. 到后来,有几台服务器突然被重启了,这时候领导问,怎么开机启动的脚本没起作用,还被批了一顿,哎,做 ...

  4. java为啥计算时间从1970年1月1日开始

    http://www.myexception.cn/program/1494616.html ————————————————————————————————————————————————————— ...

  5. C语言 百炼成钢25

    /* 题目61:编写一个名为removestring的函数,该函数用于从一个字符串中删除一定量的字符. 该函数接受三个参数: 第1参数代表源字符串 第2参数代表需要删除字符的起始位置(位置从0开始) ...

  6. 02 Java图形化界面设计——中间容器（Jpanel）

    上一篇讲解了Jframe顶层容器,例子中生成了一个空的窗体,在实际编程过程中,一般很少将文本框.按钮等组件直接放在顶层容器中进行布局,大多数时候是通过布局管理器结合中间容器对组件进行布局设置. 1.  ...

  7. 【ARDUINO】串口无法打开问题

    1.查看是否串口被锁 sudo arduino ls /var/lock sudo rm /var/lock/LCK..ttyACM* 2.查看arduino安装位置 dpkg -S XXXX 3.原 ...

  8. （转）Unity笔记之编辑器（Foldout、HelpBox、InspectorTitlebar、Slider、MinMaxSlid ...

    1. Foldout.HelpBox 折叠菜单,大家都知道,不具体解释了,直接代码.因为折叠菜单中必然是有内容才能看到效果,所以顺带把HelpBox(提示框)也说了. [code]csharpcode ...

  9. 浏览器配置工具.bat

    在Web安装的ActiveX控件,默认安装在C:\WINDOWS\Downloaded Program Files目录下,但是有时候由于Internet Explorer的安全设置,会阻止Active ...

  10. PHP编程经常容易记乱的知识

    PHP经常容易记乱的知识 1.echo和print的区别 PHP中echo和print的功能基本相同(输出),但是两者之间还是有细微差别的.echo输出后没有返回值,但print有返回值,当其执行失败 ...