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 简述

环境准备

npm 的安装

webpack 的安装

webpack 的初体验

猜你喜欢