webpack入门操作教程

最新推荐文章于 2022-09-03 17:43:16 发布
最新推荐文章于 2022-09-03 17:43:16 发布
阅读量148 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xtjatswc/article/details/87910348
版权

webpack入门操作教程

1. webpack介绍

在传统的项目中，一个html文件可能会加载多个js、css文件，如果多人协同开发的话，就会出现全局变量被污染、文件直接的依赖问题

而webpack打包工具，会先分析入口文件的依赖，以及依赖的依赖，以此类推，只要有依赖都去分析并打包到输出文件中

例：app.js中需要cat.js，webpack就会将这些依赖分析之后，打包到bundle.js文件中，以后直接使用打包好的bundle.js文件

2. webpack安装

  • 全局安装：
cnpm install webpack webpack-cli –g

  • 建议本地也安装一次：
cnpm install webpack webpack-cli --save-dev

例：在cat.js中导出一个数组，App.js 中需使用 cat.js 文件中的数组，需要require()加载

cat.js 代码

let cats = ['黑猫警长','大脸猫','波斯猫']
module.exports = cats

app.js 代码

//加载 cat.js 导出的数组
const cats = require("./cat")
console.log(cats)

index.html 代码

  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>

</body>
</html>
 

在浏览器中访问：

注：前提先安装好 webpack

解决方法：webpack会分析 app.js 文件中的依赖，并找到依赖的文件，将最终的代码打包到一个文件中。输入命令：

webpack app.js –o bundle.js

打开目录，其中有创建好的 bundle,js 文件，在 index.html 文件中直接使用该文件

打开浏览器重新运行

3. webpack 使用流程

  • 先搭建目录结构

  • 初始化 package.json
npm init -y

注：-y表示创建一个默认的 package.json 文件

  • 安装webpack
    • 全局安装
cnpm install webpack webpack-cli –g

    • （建议）本地也安装一次：
cnpm install webpack webpack-cli –-save-dev

 

  • 搭建基本的目录结构（src：保存源代码；dist：保存编译之后的文件，即打包之后的文件）

  • 创建 src 目录下的入口文件，通常取名为：app.js

  •  创建 webpack.config.js 配置文件
  
module.exports = {
    //告诉 webpack 入口文件
    entry:  __dirname + "/src/app.js",
    //打包后的文件输出到哪个目录，即打包后的文件存放目录
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"//打包后输出文件的文件名
    }
}
 
  • 通过 webpack 打包

  • app.js 及 app.js 文件的依赖将被打包到 bundle.js，以后直接使用 bundle.js

4. style-loader、css-loader安装

例：若要将 css 文件和 js 文件打包到一起

cat.js 代码

let cats = ['黑猫警长','大脸猫','波斯猫']
module.exports = cats

index.html 代码

  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="dist/bundle.js"></script>
</head>
<body>

</body>
</html>
 

style.css 代码

body{
    background-color: blue;
}

app.js 代码

let cats = require("./cat")
require("./style.css")
console.log(cats)

控制台打包：目前无法解析 css 文件

 

  • 解决方法：安装 style-loader，css-loader
cnpm install style-loader css-loader –-save-dev

  • 安装后，还需在webpack 配置文件中添加红色部分的内容：
  
module.exports = {
    //告诉 webpack 入口文件
    entry:  __dirname + "/src/app.js",
    //打包后的文件输出到哪个目录，即打包后的文件存放目录
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"//打包后输出文件的文件名
    },
    module:{
        //定义规则：使用 webpack 打包的文件有哪些
        rules:[
            {
                //以.css 结尾的文件
                test: /\.css$/,
                //忽略node_modules目录
                exclude: /node_modules/,
                //多个loader使用！隔开
                loader: "style-loader!css-loader"
            }
        ]
    }
}
 

注：逗号很重要！！！后面的打包，我因为没有加这个逗号，而出现错误（设置了 css 文件，代码无错误，控制台打包也无错误，浏览器无错误提示，但就是样式出不来）

  • 再次执行webpack 命令进行打包

  • 在浏览器中访问 index.html

5. 自动打包

自动打包会监测源码的改动，源码一旦改动，则自动进行打包

5.1 方法一

  • 执行后会占用当前窗口，可通过 ctrl+c 关闭该进程
webpack –w

  • 测试：修改css代码
body{
    background: red;
}
  • webpack 已自动打包，需要刷新浏览器

5.2 方法二：搭建本地服务器

通过本地服务器，可监测源码的改变并自动打包，且自动刷新浏览器

  • 需安装 webpack-dev-server
cnpm install webpack-dev-server –-save-dev

  • 在 webpack.config.js 配置文件中配置 webpack-dev-server 服务器的端口信息（红色部分）
  
module.exports = {
    //告诉 webpack 入口文件
    entry:  __dirname + "/src/app.js",
    //打包后的文件输出到哪个目录，即打包后的文件存放目录
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"//打包后输出文件的文件名
    },
    devServer:{
        //端口号
        port:8888,
        //热更新，一旦检测到源码变化，立即刷新
        hot:true,
        inline:true
    },
    module:{
        //定义规则：使用 webpack 打包的文件有哪些
        rules:[
            {
                //以.css 结尾的文件
                test: /\.css$/,
                //忽略node_modules目录
                exclude: /node_modules/,
                //多个loader使用！隔开
                loader: "style-loader!css-loader"
            }
        ]
    }
}
 
  • 在 package.json 的 scripts 中添加一个命令：dev（也可用其他名字，如 abc 等）（红色部分）
  
{
　　"name": "webpack-demo",
　　"version": "1.0.0",
　　"description": "",
　　"main": "index.js",
　　"scripts": {
　　　　"dev":"webpack-dev-server --hot --inline",
　　　　"test": "echo \"Error: no test specified\" && exit 1"
　　},
　　"keywords": [],
　　"author": "",
　　"license": "ISC",
　　"devDependencies": {
　　　　"css-loader": "^0.28.11",
　　　　"style-loader": "^0.21.0",
　　　　"webpack":"^4.8.3",
　　　　"webpack-cli":"^2.1.3",
　　　　"webpack-dev-server": "^3.1.4"
　　}
}
 
  • 将来执行自动打包命令时，直接执行如下命令：
npm run dev

注：在 index.html 内引入 bundle.js 文件时，需写 http:// 路径

<script type="text/javascript" src="http://localhost:8888/bundle.js"></script>

6. less-loader安装

less 文件提升 css 的开发效率，但实际运行时需将 less 文件转换成 css文件（less-loader 可完成转换）

  • 安装less、less-loader
cnpm install less less-loader –-save-dev

  • 修改 webpack.config.js 配置文件（红色部分）
  
module.exports = {
    //告诉 webpack 入口文件
    entry:  __dirname + "/src/app.js",
    //打包后的文件输出到哪个目录，即打包后的文件存放目录
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"//打包后输出文件的文件名
    },
    devServer:{
        //端口号
        port:8888,
        //热更新，一旦检测到源码变化，立即刷新
        hot:true,
        inline:true
    },
    module:{
        //定义规则：使用 webpack 打包的文件有哪些
        rules:[
            {
                //以.css 结尾的文件
                test: /\.css$/,
                //忽略node_modules目录
                exclude: /node_modules/,
                //多个loader使用！隔开
                loader: "style-loader!css-loader"
            }
            {
                test: /\.less$/,
                exclude: /node_modules/,
                loader: "style-loader!css-loader!less-loader"
            }
        ]
    }
}
 

 测试：

style.less 代码

@c:red;
body{
    h1{
    color:@c
    }
}

app.js 代码

let cats = require("./cat")
require("./style.less")
console.log(cats)

index.html 代码

  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="http://localhost:8888/bundle.js"></script>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
 

7. ES6模块化开发

ES6 新增一个模块化开发功能，可将不同功能封装到不同 js 文件中，再通过webpack打包到一起。因有些浏览器不支持ES6语法，故需安装 loader 将 ES6 转换为 JavaScript 代码，命令如下：

cnpm install babel-core babel-loader babel-preset-es2015 babel-preset-stage-2 --save-dev

  • 修改webpack.config.js（红色部分）
  
module.exports = {
    entry:  __dirname + "/src/app.js",
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    },
    devServer:{
        port:8888,
        hot:true,
        inline:true
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                exclude: /node_modules/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.less$/,
                exclude: /node_modules/,
                loader: "style-loader!css-loader!less-loader"
            },
            {
                test:/\.js$/,
                loader:"babel-loader",
                exclude:/node_modules/,
                query:{
                    presets:["es2015","stage-2"]
                }
            }
        ]
    }
}
 

7.1 ES6 导出变量、函数、类

  • export let 变量名   　　        导出一个变量
  • export function 函数名         导出一个函数
  • export class 类名                 导出一个类
  • export default 成员              导出成员，只能导出一个成员

例：person.js 代码

  
//导出变量
export let name="David"
//导出函数
export function getName(){
    console.log("获取姓名")
}
//导出类
export class Person{
　　 //构造函数
    constructor(name){this.name = name;
    }
　　 //成员方法
    say(){
        console.log("我是：" + this.name)
    }
}
//导出成员
export default class People{
    constructor(name){
        this.name = name;
    }
    say(){
        console.log("你好，"+this.name)
    }
}
 

7.2 ES6 导入变量、函数、类

语法：import {变量名 , 函数名 , 类名 } from ‘文件名’

导入多个成员使用“，”逗号隔开

注：若导出的成员是export default，则导入时，不可使用 {}，直接：import 成员

例：app.js 代码

  
//导入变量、函数、类
import {name,getName,Person} from './person'
console.log(name)
getName()
var people1 = new Person('Mike');
people1.say()
//导入成员
import People from "./person"
var people2 = new People('Nancy')
people2.sayHi()
 

测试：npm run dev 打包后，浏览器运行：

8. webpack 插件

8.1 内置插件（webpack提供）

BannerPlugin：在 bundle.js 文件的头部插入一条说明性文件

  • 修改webpack.config.js 文件（红色部分）
  
let wp = require("webpack")
module.exports = {
    entry:  __dirname + "/src/app.js",
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    },
    devServer:{
        port:8888,
        hot:true,
        inline:true
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                exclude: /node_modules/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.less$/,
                exclude: /node_modules/,
                loader: "style-loader!css-loader!less-loader"
            },
            {
                test: /\.js$/,
                loader: "babel-loader",
                exclude: /node_modules/,
                query: {
                    presets:["es2015","stage-2"]
                }
            }
        ]
    },
    plugins:[
        new wp.BannerPlugin("版权保护")
    ]
}
 
  • 重新打包，运行结果如下：

8.2 外部插件（第三方插件）

执行npm run dev后，自动打开浏览器的插件：open-browser-webpack-plugin。安装命令如下：

cnpm install open-browser-webpack-plugin  --save-dev

  • 修改webpack.config.js配置文件（红色部分）
  
let wp = require("webpack")
const OpenBrowserPlugin = require("open-browser-webpack-plugin")
module.exports = {
    entry:  __dirname + "/src/app.js",
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    },
    devServer:{
        port:8888,
        hot:true,
        inline:true
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                exclude: /node_modules/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.less$/,
                exclude: /node_modules/,
                loader: "style-loader!css-loader!less-loader"
            },
            {
                test: /\.js$/,
                loader: "babel-loader",
                exclude: /node_modules/,
                query: {
                    presets:["es2015","stage-2"]
                }
            }
        ]
    },
    plugins:[
        new wp.BannerPlugin("版权保护"),
        new OpenBrowserPlugin({url:"http://localhost:8888"})
    ]
}
 
  • 执行npm run dev，重新打包即可
posted @ 2019-02-24 19:30 xtjatswc 阅读( ...) 评论( ...) 编辑 收藏
xtjatswc
关注
webpack 基本操作
weixin_34375233的博客
03-29 127
webpack 使用步骤 1.1. webpack 第一阶段 1.1.1. 命名初始化阶段 项目名不能有汉字,不能取名叫 webpack 创建项目名称并生成 package.json, 命令 : npm init -y 安装 : npm i -D webpack webpack-cli webpack : 是 webpack 工具的核心包 webpack-cli : 提供了一些在终端中使用的...
webpack的基础使用
swallow_y的博客
09-02 6595
今天我准备总结的就是最近看的webpack4.17.1版本 一、为什么要用webpack 现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法 1.模块化，让我们可以把复杂的程序细化为小的文件; 2.类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实...
Webpack 入门教程7
weixin_34320159的博客
02-18 120
32.停止watch监听模式按键盘的Ctrl+c组合键,会给出"终止批处理操作吗(y/n)?",输出y,即可停止33.安装webpack-dev-server服务cnpminstallwebpack-dev-server-g34.启动express 静态资源 web 服务器webpack-dev-server--progress--colors35.在浏览器中打ht...
CssToInlineStyles一个利用内联样式转换HTML页面的库特别适合于发送邮件时
08-07
CssToInlineStyles：一个利用内联样式转换HTML页面的库，特别适合于发送邮件时
超详细 WebPack 入门教程
qq_43682422的博客
04-09 6481
前端工程化 1.什么是前端工程化 前端工程化指的是: 在企业级的前端项目开发中，把前端开发所需要的工具，技术，流程，经验等进行规范化，标准化。 1)模块化 （js的模块化,css的模块化,资源的模块化） 2)组件化（复用现有的UI结构，样式，行为） 3)规范化（目录结构的划分，编码规范化，接口规范化，文档规范化，Git分支管理） 4)自动化（自动化构建，自动化部署，自动化测试） 4)前端工程化的解决方案 早期的前端工程化解决方案：grunt ,gulp 目前主流的前端工程化解决方案: webpack(ht
【webpack】webpack 入门教程
NAMECZ的博客
02-28 1097
一、Webpack 是什么 Webpack是一种前端资源构建工具，一个静态模块打包器（module bundler） 在Wbpack看来，前端的所有资源文件（ js / json / css / img / less / ... ）都会作为模块处理。 他将根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle） 二、为什么要使用webpack？ 当我们在文件里使用less，sass等预处理语言，或者使用es6等新最新...
webpack5入门教程
温情
09-03 1062
Webpack本身功能比较少，只能处理js资源，一旦遇到其他资源就会报错所以我们学习Webpack，就是主要学习如何处理其他资源Webpack都通过文件进行配置，来增强Webpack的功能负责将 Css 文件编译成 Webpack 能识别的模块会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容, 样式就会以 Style 标签的形式在页面上生效负责将 Less 文件编译成 Css 文件负责将 Sass 文件编译成 css 文件。
webpack：简单易懂的webpack入门教程
02-06
本教程将带你一步步了解并掌握 Webpack 的基本概念和常用配置，让你快速入门。 一、Webpack 基本概念 1. **入口（Entry）**：Webpack 开始构建的起点，定义了应用的主文件或多个入口文件。这通常是应用程序的 `...
webpack+vue.js快速入门教程
11-26
在快速入门Vue.js和Webpack的过程中，首先需要创建一个项目文件夹并初始化`package.json`。接着，建立一个简单的`index.html`作为入口文件，并在`src`文件夹下创建`main.js`，引入Vue.js并创建一个基本的应用实例。 ...
webpack入门必知必会
11-27
在本文中，我们将从一个简单的入门角度理解Webpack的三个核心操作：拆分、打包和压缩。 首先，让我们看看传统项目中存在的问题。在不依赖任何自动化或模块化工具的情况下，HTML文件直接引入JavaScript脚本，例如...
webpack入门
七月
03-18 222
阅读《深入浅出的webpack》：入门 一、安装webpack 【要确保系统需安装5.0.0及以上版本的node.js】 1、安装webpack到本地项目： 安装Webpack到本项目时，可根据自己的需求选择以下任意命令运行： # npm i -D 是npm install --save-dev的简写，是指安装并保存到package.json的devDependencies # 安装最新的稳定版 ...
webpack入门教程：安装配置与基本使用
"深入理解并实践webpack的基础操作，包括安装、基本打包以及命令参数的使用。" Webpack是一个强大的前端模块打包工具，它允许开发者将项目中的各种模块（如JavaScript、CSS、图片等）进行加载、处理和打包，以便在...
webpack 安装后命令无效问题
Lee的博客
11-08 6291
webpack 安装后终端运行提示 '不是内部或外部命令，也不是可运行的程序或批处理文件。 首先确定是否安装webpack npm  install webpack -g    如果你有淘宝镜像   cnpm  install webpack -g 如果之后还是提示无效的话 打开node安装目录，找到下图中的路径添加到环境变量中就OK了。   大功告成。...
webpack安装，避免出现‘不是内部或外部命令’
A31208的博客
03-29 2273
之前在网上也查了一些解决办法，但是基本上都有坑，主要是配置环境变量那一块。后来也是看到一篇文章才找到一个解决办法，打算记一下，包括安装过程。 1、webpack是依赖node环境的，所以安装node 2、检查node是否安装成功，打开命令行输入node -v，出现版本号则说明安装成功 3、在安装的node目录下创建两个文件夹 然后配置npm路径 配置全局路径：npm config set pre...
MongoDB分片集群搭建教程：副本集创建与数据分片
最新发布
11-12
内容概要：本文提供了详细的MongoDB分片集群的搭建指导，涵盖了从环境准备、配置文件编写、副本集的建立、主节点的选择、配置服务器和数据分片服务器的配置到最后的路由节点的搭建与操作整个流程，以及对数据库的哈希与范围两种分片策略的应用介绍和具体命令执行。 适合人群：熟悉NoSQL数据库概念并对MongoDB有一定了解的技术人员，尤其是在大型数据管理和分布式数据库架构设计中有需求的开发者。 使用场景及目标：帮助技术人员掌握构建高效能、高可用性的MongoDB分片集群的方法，适用于处理大规模、实时性强的数据存储与读取场景。 其他说明：文中通过实例演示了每个步骤的具体操作方法，便于跟随文档实操，同时也介绍了可能遇到的问题及其解决方案，如在没有正确配置的情况下试图写入数据时出现错误等情况的处理。
CPPC++_嵌入式硬件的物联网解决方案blinker库与Arduino ESP8266 ESP32一起工作.zip
11-12
CPPC++_嵌入式硬件的物联网解决方案blinker库与Arduino ESP8266 ESP32一起工作
CPPC++_逆向调用QQ Mojo IPC与WeChat XPlugin.zip
11-12
CPPC++_逆向调用QQ Mojo IPC与WeChat XPlugin
Webpack入门：7分钟快速掌握模块打包器
8. **命令行工具**：Webpack提供了命令行接口，可以通过`webpack`或`webpack-cli`命令执行构建操作，如`webpack --config webpack.config.js`。 9. **热模块替换（Hot Module Replacement, HMR）**：Webpack的HMR...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值