Webpack快速入门

最新推荐文章于 2022-04-09 04:24:52 发布
最新推荐文章于 2022-04-09 04:24:52 发布
阅读量67 收藏
点赞数
文章标签： webpack node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52261495/article/details/116276762
版权

目录

一. Webpack安装
二. 案例：JS打包

  1. 创建nodejs项目
  2. 编写js文件
  3. 编写webpack.config.js
  4. 打包
  5. 三. 案例：JS合并CSS
  6. 安装style-loader和css-loader
  7. 修改webpack.config.js
  8. 编写css文件
  9. 修改main.js
    5.打包
**一. Webpack安装** 
# 全局安装
npm install -g webpack webpack-cli

# 查看是否安装成功
 webpack -v

二. 案例：JS打包

创建若干js和css文件，然后分别用webpack进行打包

1. 创建nodejs项目

首先创建一个webpack空文件夹，然后打开cmd，切换到当前目录，输入如下指令

1.npm init -y

2. 编写js文件

在项目目录下创建src文件夹，在其中创建css和js文件
1.out.js
exports.out = function (str) {
    console.log(str);
    document.write(str);
}

2.add.js
//导入out.js
const out = require("./out.js");
//导入add.js
const add = require("./add.js");
out.out("hello" + add.add(1, 1));

3.创建main.js：入口文件，引入上述js文件
//导入out.js
const out = require("./out.js");
//导入add.js
const add = require("./add.js");
out.out("hello" + add.add(1, 1));

3. 编写webpack.config.js

在项目目录下创建配置文件webpack.config.js，用来配置打包

以下配置含义：读取当前项目目录下src文件夹中的main.js（入口文件）内容，
分析资源依赖，把相关的js文件打包，打包后的文件放入当前目录的dist文件夹下
，打包后的js文件名为bundle.js

//导入path模块,Node.js内置模块
const path = require("path");

//定义JS打包规则
module.exports = {
    entry: './src/main.js', //配置入口文件    
    output: {
        path: path.resolve(__dirname, './dist'), //指令输出路径，__dirname是一个常量表示当前文件所在路径        
        filename: 'bundle.js' //输出文件名称    
    }
}

4. 打包

然后执行webpack打包命令，webpack -h可以查看所有后缀命令

然后在生成的dist目录下创建index.html，引用bundle.js进行测试
<!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="./bundle.js"></script>
</body>
</html>

三. 案例：JS合并CSS

1. 安装style-loader和css-loader

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

Loader 可以理解为是模块和资源的转换器。

首先我们需要安装相关Loader插件

1.css-loader 是将 css 装载到 javascript
2.style-loader 是让 javascript 认识 css
3.npm install --save-dev style-loader css-loader

2. 修改webpack.config.js

//导入path模块,Node.js内置模块
const path = require("path");

//定义JS打包规则
module.exports = {
    entry: './src/main.js', //配置入口文件    
    output: {
        path: path.resolve(__dirname, './dist'), //指令输出路径，__dirname是一个常量表示当前文件所在路径        
        filename: 'bundle.js' //输出文件名称    
    },
    module: {
        rules:[{
            test:/\.css$/,  //把项目中所有.css结尾的文件进行打包
            use:["style-loader","css-loader"]
        }]
    }
}

3. 编写css文件

在src文件夹中创建style.css文件

body {
    background-color: yellow;
}

4. 修改main.js

修改main.js入口文件，引入style.css

//导入out.js
const out = require("./out.js");
//导入add.js
const add = require("./add.js");

//导入style.css
require("./style.css")

out.out("hello" + add.add(1, 1));

5、打包

打开cmd重新输入webpack命令进行打包

webpack

注意：如果配置文件名不是webpack.config.js，则需要通过webpack -config 配置文件名来指定配置文件
我不是坏蛋*
关注
webpack 快速入门教程
木木木森林
05-23 1100
目录1、了解 Webpack 相关什么是 webpack五大“护法”理解 Loader理解 Plugins配置文件(默认)2、准备工作3、小试牛刀4、使用 webpack 配置文件5、js 语法检查6、js 语法转换7、打包 less 资源8、打包样式文件中的图片资源9、打包其他资源10、打包 html 文件11、自动编译打包运行12、准备生产环境13、提取 css 成单独文件14、添加 css 兼容15、压缩 css16、压缩 html17、高频面试题 1、了解 Webpack 相关 什么是 webpac
Webpack 快速入门指南（一）
彳亍
08-27 516
简介 webpack 是一个前端资源加载/打包工具。 webpack 是一个 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 webpack 可以将多种静态资源（js、css、...
webpack快速入门
wujiangpeng的博客
03-01 218
Webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。。 而这里面涉及一些基础的配置和概念： 入口（entry ）指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出
webpack-quick-start:Webpack快速入门
05-02
现在，让我们一起深入学习 Webpack 的快速入门知识。 一、安装与配置 首先，你需要全局安装 `webpack` 和 `webpack-cli`，它们分别是 Webpack 的核心库和命令行接口。在命令行中运行以下命令： ```bash npm ...
uikit-webpack-starter:uikit Webpack快速入门应用程序
04-30
UIKIT Webpack快速入门 使用webpack和UIKIT的快速入门应用程序。 git clone https://github.com/CliffCrerar/uikit-webpack-starter.git npm install npm start
webpack--快速入门
李卓书
06-17 591
史上最全webpack入门讲解,没有比我更全更靠谱的了
Webpack 快速入门
SolidCocoi的博客
06-30 1762
快速入门 Webpack，体验 js 打包过程
webpack快速入门教程
qq_44831658的博客
05-20 288
webpack快速入门教程 1、webpack 简介 什么是webpack？ webpack是一个模块打包器(bundler)。 在webpack看来, 前端的所有资源文件(js/json/css/img/less/…)都是模块。 它将根据模块之间的依赖关系进行分析，生成对应资源。 2、核心概念 entry（入口）：指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。 output（输出）：属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件。
webpack的使用（1） ----简单快速入门
骑着毛驴的小猴子
07-29 504
一：WebPack概念： webpack是一个前端打包构建工具，主要功能是可以把.js,.css,.vue,.jsx等文件打包压缩到一块及实现自动刷新提高开发效率。也可以分别打包压缩。 作用： 例如我们网站有index.css, common.css每次打开网页都会向服务器发出两次请求，如果打包到一块可以只请求一次即可减轻服务器负担。 二：webpack需要在n
手写简单脚手架：通过webpack启服务运行vue模块文件
duansamve的博客
08-19 597
一、创建项目目录结构： webpack-demo： -index.html -main.js：入口文件 -app.vue：vue主文件 -package.json：工程依赖文件 -webpack.config.js：webpack配置文件 -.babelrc：babel配置文件 二、package.json：安装相关模板（生产模块/开发模块/服务命令） cnpm i vue -...
超详细 WebPack 入门教程
qq_43682422的博客
04-09 6461
前端工程化 1.什么是前端工程化 前端工程化指的是: 在企业级的前端项目开发中，把前端开发所需要的工具，技术，流程，经验等进行规范化，标准化。 1)模块化 （js的模块化,css的模块化,资源的模块化） 2)组件化（复用现有的UI结构，样式，行为） 3)规范化（目录结构的划分，编码规范化，接口规范化，文档规范化，Git分支管理） 4)自动化（自动化构建，自动化部署，自动化测试） 4)前端工程化的解决方案 早期的前端工程化解决方案：grunt ,gulp 目前主流的前端工程化解决方案: webpack(ht
webpack的快速入门
zzzzzz9527的博客
03-19 340
下载 npm install webpack webpack-cli -D 项目根目录创建名为 webpack.config.js 配置文件 在配置文件写下： module.exports = { mode:'development' //mode 用来指定构建模式 } 在package.json的scripts节点下写： "script":{ "dev":"webpack"/...
Webpack安装与使用
ALin_Think的博客
04-05 466
Webpack 一、什么是Webpack Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。 从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。 二、Webpack安装 1、全局安装 npm install -g webpack webpack-cli...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值