Webpack 安装和实例

原创

粘你一身大鼻嘎 2022-06-23 12:52:29 博主文章分类：Vue ©著作权

文章标签 html 模块化 bundle 文章分类 Webpack 前端开发

©著作权归作者所有：来自51CTO博客作者粘你一身大鼻嘎的原创作品，请联系作者获取转载授权，否则将追究法律责任

Webpack 安装和实例

全局安装

webpack 安装官方文档：https://webpack.docschina.org/guides/installation/

安装 webpack，首先确保已经安装了 node.js。

安装最新版本
npm install --global webpack

或者安装特定版本
npm install --global webpack@<version>

如果上面安装的是 webpack4+ 版本的话，还需要安装脚手架 CLI 才可以使用 webpack 命令行。

npm install --global webpack-cli

可以通过 npm root -g 查看全局安装目录。

快速入门

温馨提示：如果是 VSCode 开发，可以安装 Node Snipppets 插件，有相关代码提示功能。

打包JS模块

默认情况下，模块化JS浏览器不能识别，可通过 webpack 打包后让浏览器识别模块化 JS。

全局安装 webpack@v4.35.2 与 webpack-cli

npm i -g webpack@v4.35.2

Webpack 安装和实例_模块化

npm i -g webpack-cli

Webpack 安装和实例_html_02
安装后检查版本号，如果出现红色提醒文字，没关系，假装没看见就可以了。

webpack -v

Webpack 安装和实例_模块化_03
创建一下目录结构和文件，来个错误示范：
Webpack 安装和实例_bundle_04
首先在bar.js文件编写下面代码：

// node.js node模块化编程，导出一个函数
module.exports = function() {
  console.log('我是bar模块', '')
}

在 main.js 编写一下代码：

var bar = require('./bar')
bar()

在index.html文件编写下面代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="js/main.js"></script>
</body>
</html>