Webpack5学习笔记（基础篇三）——webpack基础安装与打包

最新推荐文章于 2024-05-27 08:56:06 发布

老Chen先生

最新推荐文章于 2024-05-27 08:56:06 发布

阅读量937

点赞数 4

分类专栏： Webpack 文章标签： webpack npm 前端

本文链接：https://blog.csdn.net/MRlaochen/article/details/122153284

版权

Webpack 专栏收录该内容

9 篇文章 4 订阅

订阅专栏

在安装webpack之前，我们要先安装 node，因为webpack是构建在node.js之上。

1、安装node.js

使用 Node.js 最新的长期支持版本(LTS - Long Term Support)，是理想的起步。使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能，或者缺少相关的package。

Node下载地址——Node.js官网

在这里插入图片描述
（mac 可能会下载 .pkg 文件，windows 可能会下载 .exe 或 .msi 文件）

下来就是按照操作步骤点击下一步安装就行了，安装完成后，我们在vscode控制台可以查看当前 node 和 npm 版本（node安装时，会自带安装npm——node package manager）
在这里插入图片描述

2、安装webpack、webpack-cli

我们可以使用全局安装或者本地安装2种安装方式

2.1、全局安装

全局安装时，我们可以使用全局 --global来安装，

npm install webpack webpack-cli --global

这样在任何文件目录下都可以使用webpack

安装完我们可以查看当前安装的webpack版本
在这里插入图片描述
但是，全局安装会让你的webpack锁定在某个版本，在项目构建的时候可能因为版本问题出错。另外，团队协作时，你在全局安装了webpack，但是其他小伙伴并并不知道该项目要全局安装，这时你们的项目就会出错。

所以，不建议使用全局安装webpack的方式。

2.2、本地安装

我们可以先进行一下初始化

npm init -y

在我们的目录中生成一个package.json文件，然后我们再用 --save-dev在本地安装

npm install  webpack   webpack-cli   --save-dev

# 或指定版本
 npm install  webpack@<version>  --save-dev

本地安装完之后，我们可以使用npx这个命令，npx这个命令会现在当前文件目录下面查找是否安装，如果没有则找上一级目录是否安装。

如果你想看webpack相关命令，可以使用

npx webpack --help

3、基础打包

我们在当前文件加下面构建四个文件，其中webbpack.config.js文件名是webpack自动帮助我们去读取，所以不能随便命名，同时是在node.js的基础上构建，所以我们使用common.js的规范。
在这里插入图片描述
hello.js

function hello(){
    console.log("hello")
}
export default hello

index.js

import hello from './hello'

hello()

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./hello.js"></script>
    <script src="./index.js"></script> 
</body>
</html>

webpack.config.js

const path = require('path')

module.exports = {
	/* 入口文件 */
    entry : './src/index.js',

    output : {
    	/* 指定输出文件的文件名称 */
        filename:'bundle.js',
        /* path必须使用绝对路径 */
        /* 指定输出文件的路径 */
        path:path.resolve(__dirname,'./dist')
    },
	/* 暂时先不定义开发或生产环境 */
    mode : 'none'
}

我们使用npx webpack来进行打包

npx webpack

在这里插入图片描述
可以看到，当前文件目录下面多了一个dist文件夹，里面有一个打包好的bundle.js

我们修改一下index.html的文件引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./dist/bundle.js"></script>
</body>
</html>

然后在浏览器打开当前html文件，可以看到，控制台打印了hello，说明我们配置的基础的webpack是可以的
在这里插入图片描述

老Chen先生

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Webpack5学习笔记（基础篇三）——webpack基础安装与打包

在安装webpack之前，我们要先安装 node，因为webpack是构建在node.js之上。1、安装node.js使用 Node.js 最新的长期支持版本(LTS - Long Term Support)，是理想的起步。使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能，或者缺少相关的package。Node下载地址——Node.js官网（mac 可能会下载 .pkg 文件，windows 可能会下载 .exe 或 .msi 文件）下来就是按照操作步骤点击下一步安装就行
复制链接

扫一扫

专栏目录