Webpack入门实操

最新推荐文章于 2023-01-30 15:09:30 发布

yggjdle

最新推荐文章于 2023-01-30 15:09:30 发布

阅读量119

点赞数 1

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

本文链接：https://blog.csdn.net/qq_41867900/article/details/121059723

版权

前端专栏收录该内容

53 篇文章 1 订阅

订阅专栏

本文内容：

Webpack的应用
Webpack的安装
项目实例

1. Webpack的应用

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

在这里插入图片描述
Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。将JS、CSS代码混淆压缩，让代码体积更小，加载更快。

2. Webpack的安装

首先要保证本地的环境支持node.js。

步骤一：安装webpack

npm install webpack -g

npm i -g webpack-cli

步骤二：检查webpack是否安装成功

webpack -v

步骤三：创建配置项

npm init

npm install --save-dev webpack

3. 项目实例

3.1 项目实例一

首先创建两个Js文件，一个文件是入口文件 app.js，一个是页面内容的文件work.js。还有一个html文件：index.html。

app.js

import ex from './work.js';

work.js

document.write('success')

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"> 
        <title>test</title> 
    </head>
    <body> 
        <div>test</div> 
        <script src='./dist/main.js'></script> 
    </body> 
</html>

执行命令

webpack ./app.js//入口文件的地址

然后当前文件下就会出现这些文件
在这里插入图片描述
打开index.html
界面就会展示以下内容。

这就是webpack的一个简单用法。

但是如果这样使用，每次编译都要输入webpack的入口文件路径，非常麻烦。可以通过编写webpack，来进行简化。在项目实例二中将会进行描述使用方法。

3.2 项目实例二

新建webpack.config.js，这是webpack的配置文件。
重复上述的操作

npm init

npm install --save-dev webpack

新建webpack.config.js，内容是：

const path = require('path');
const webpack = require('webpack'); 
module.exports = { 
    entry:{
        app:__dirname+'/app.js',//唯一入口文件,__dirname是nodejs里的一个全局变量，它指向的是我们项目的根目录
    },
    output:{
        path: path.resolve(__dirname, './dist'),//打包后的文件存放的地方
        filename:'main.js'   //打包后输出文件的文件名
    }
};

执行命令

webpack

yggjdle

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Webpack入门实操

本文内容：Webpack的应用Webpack的安装项目实例1. Webpack的应用Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。2. Webpack的安装首先要保证本地的环境支持node.js。安装webpacknpm install webpack -gnpm i -g webpack-cl.
复制链接

扫一扫

专栏目录