Webpack 简述

如官网所示，简而言之，webpack 就是讲左侧资源打包成右侧资源的工具

更多 Webpack 内容详见：

Webpack 官方文档

Webpack 中文文档

某大佬写的简单入门教程：【webpack】webpack-dev-server生猛上手——让我们来搭一个webpack的微服务器吧！

环境准备

npm 是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

详见菜鸟教程 npm 教程

java 后端开发者的视角你可以认为 npm 就是 maven，此处我们选择通过 npm 来安装 webpack。

那么问题来了，npm 安装的依赖库从哪找呢？

npm 类库中央仓库

npm 的安装

Node Js 官网

此处我们选择左边，安装主流推荐，下载完成双击、下一步……即可。

cmd 中输入下列命令即可检查安装情况

node -v
npm -version

安装成功的话会如是提示

webpack 的安装

任意目录 cmd 中输入，全局安装 webpack

npm install webpack -g
npm install webpack-cli -g

安装完成后，验证下安装结果

webpack -v

webpack 的初体验

博主选用的 D:\Web\webpackLearning，这个可自行决断。接下来我们在当前目录创建一个 webpack.config.js 配置文件

const path = require('path');module.exports = {entry: './app/index.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'my-first-webpack.bundle.js'}
};

意思是将当前目录下 ./app/index.js 路径的 js 文件，自动打包成 my-first-webpack.bundle.js，并将其存放在当前目录下的 ./dist 文件夹内。

PS： const path = require(‘path’); 是使用 node 的内置插件，可以不需要依赖直接使用。

接着在 “D:\Web\webpackLearning\app” 创建 index.js 文件,其内容为：

alert("Holle World！");

然后在 cmd 中输入

 webpack

webpack 就成功的为你打包了 js

编写一个简易的 index.html 文件,放在 D:\Web\webpackLearning\dist 目录下，简单验证一下 webpack 打包的成果

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head><body><script src="my-first-webpack.bundle.js"></script>
</body>
</html>

Webpack 快速入门相关推荐

webpack快速入门教程
webpack快速入门教程 1.webpack 介绍什么是webpackhttps://www.webpackjs.com/ Webpack是一个模块打包器(bundler) 在Webpack看来, ...
webpack——快速入门【一】
学习webpack https://github.com/webproblem/learning-article#webpack https://github.com/lengziyu/learn-w ...
webpack3快速入门
webpack3中文网站: https://webpack.docschina.org/ ## webpack快速入门教程 ###1.了解Webpack相关 * 什么是webpack ...
001-ant design安装及快速入门【基于纯antd的基本项目搭建】
一.安装使用 1.1.安装推荐使用 npm 或 yarn 的方式进行开发 npm install antd --save yarn add antd 1.2.浏览器引入在浏览器中使用 script ...
2017 Vue.js 2快速入门指南
注意,据部分读者反映本文水多,怕湿身者勿进.后续推荐详解 Vue & Vuex 实践 2017 Vue.js 2快速入门指南翻译自Vue.js 2 Quickstart Tutorial 20 ...
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
总觉得该分享点什么！零基础小白如何快速入门前端?
1.首先零基础学习前端先要有一个计划,了解前端要学习哪些技术. 2.做好自己的时间规划,如何快速入门前端那肯定是需要不断的提高自己的学习效率,学习过程总尽量把手机调至静音给自己一个安静的学习环境和氛围 ...
快速入门Web前端开发的正确姿势
入门标准很简单,就一条:达到能参与 Web 前端实际项目的开发水平.请注意,是实际项目,这就需要了解如今的实际项目开发都用了哪些技术栈.HTML/CSS/JavaScript 这三大基础技术栈肯定是需 ...
vue.js的快速入门使用
1. vue.js的快速入门使用 1.1 vue.js库的下载 vue.js是目前前端web开发最流行的工具库,由尤雨溪在2014年2月发布的. 另外几个常见的工具库:react.js /angula ...

Webpack 快速入门