文章目录

前言
一、yarn包管理工具
二、webpack
- 1.webpack的基本概念
- 2.webpack的使用步骤
- 3.webpack开发服务器

前言

简介：webpack是node的第三方模块包，用于打包代码，缩小项目体积，提高项目加载速度，很好的解决了项目中的每一个请求都要消耗资源和时间的问题。同时能够完成语法降级（es6->es5），解决部分浏览器不支持新语法的问题，但是程序员又觉得es6很香的问题。基于yarn包管理工具和es6模块化语法¹，本文介绍了webpack的使用方法。

一、yarn包管理工具

yarn包管理工具，是npm的升级版，下载速度比npm快上很多，打包代码的时候，更推荐使用yarn，体验更好。

在node环境中安装yarn管理工具
npm install -g yarn
检查yarn版本
yarn -v
初始化包环境，生成package.json,用来记录下载的包名和版本号
yarn init
添加包指定版本的包
yarn add [package]
yarn add [package]@version
移除包
yarn remove [package]
安装项目全部依赖（一般拿到别人的项目时，缺少node_modules,会根据package.json记录的包名和版本全部下载到当前的项目中）
yarn
全局安装卸载【注意: global一定在add左边】
yarn global add [package]
yarn global remove [package]

二、webpack

1.webpack的基本概念

webpack官网

webpack本身是node的一个第三方模块包，用来打包代码。
javascript应用程序的静态模块打包工具。
webpack作用：①打包整合项目文件，缩小项目体积，提高加载速度。②也能够实现语法降级，webpack打包之后es6/7/8会降到es5。③支持vue单页面程序。

2.webpack的使用步骤

2.1webpack的基本使用

【演示】：将项目文件夹下的src文件夹中的两个js文件合并到1个js文件中，并输出到dist文件中。

【目录结构说明】：
./dist文件夹用来存放分发代码，分发代码是指在构建过程中，经过最小化和优化后产生的输出结果，最终将在浏览器中加载。
.src文件夹用来存放源代码。

【webpack默认出入口】：
默认入口: ./src/index.js
默认出口: ./dist/main.js
注意:路径上, 文件夹, 文件名不能叫webpack/其他已知的模块名。

【初始代码环境准备】：
1.在项目文件夹下新建src目录，新建hello/hello.js,导出

export const sayHI = ()=>{console.log('hello');}

2.新建src/index.js,导入sayHI方法

impprt {sayHI } from ‘./hello/hello.js’;
sayHI();

【webpack打包工具使用】：

初始化包环境
yarn init
安装webpack模块包
yarn add webpack webpack-cli -D
配置package.json文件(自定义命令，用于将webpack命令替换为bulid，设置之后运行yarn build 就相当于运行 yarn webpack)
“script”:{ "build":"wepack"}
运行命令，打包文件
yarn build
如果源代码发生改变，更新打包
yarn bulid

【演示测试】：
demo的结果的是将两个js文件输出为一个，直接查看dist文件夹下生成的js文件即可。

【webpack打包后的包的使用方法】:
将打包后的js文件，手动引入index.html文件中，运行查看结果。

<script src="../dist/index.js"></script>

注意：推荐将scrip标签放到head标签中，放到body标签中的话，如果之后需要操作dom元素添加到body中容易出错。

2.2webpack的配置

1.入口和出口的文件的配置

【配置package】：根目录新建webpack.config.js（默认配置文件名）：

//导入node的内置路径模块
const path = require("path");//导出配置信息
module.exports = {entry: "./src/main.js", // 入口output: { path: path.join(__dirname, "dist"), // 出口路径filename: "bundle.js" // 出口文件名}
};

【yarn build执行流程】:

重点: 所有要被打包的资源都要跟入口文件产生直接/间接的引用关系

2. 打包自动生成html文件

使用 html-webpack-plugin 插件，在dist文件夹中自动生成html文件

安装插件
yarn add html-webpack-plugin -D
配置webpack.config.js文件

// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {// ...省略其他代码plugins: [new HtmlWebpackPlugin({template: './public/index.html' // 以此为基准生成打包后html文件})]
}

3 加载器–加载除js文件其他类型的文件

引入loaders的原因：webpack默认只能处理js文件
loaders
style-loader
css-losder

【以加载css文件为例说明使用步骤】：
1.下载css-losder yarn add css-loader style-loader -D
2.配置webpack.config.js

module.exports = {module: {rules: [{test: /\.css$/, //处理.css结尾的文件use: [ 'style-loader', 'css-loader' ]  //使用这两个加载器}]}
}

【常用加载器】：

less-loader
asset-modules处理图片文件、处理字体文件

3.webpack开发服务器

启动本地服务, 可实时更新修改的代码, 打包变化代码到内存中, 然后直接提供端口和网页访问。
1.监控项目源代码
2.一旦监听到源代码发生改变，会自动编译，并保存。

1.下载包：yarn add webpack-dev-server -D
2.配置package.json

scripts: {"build": "webpack","serve": "webpack serve"
}

3.启动webpack服务器 yarn serve
4.服务器端口号配置

module.exports = {// ...其他配置devServer: {port: 10110 // 端口号}
}

ES6规范：导出export 或者 export default {}；导入import 变量名 from '模块标识' ↩︎

webpack打包工具相关推荐

webpack打包工具的基本使用
目录一.webpack是什么? 二.webpack的基本使用 1.初始化项目 2.安装webpack及其依赖 3.使用 3.1 配置webpack: 3.2 在package.js文件中添加打包命令 ...
webpack打包工具不会用，那是因为你没看过这篇
webpack打包工具一.认识webpack 1. 前端模块化 2.打包如何理解呢? 3.和grunt/gulp的对比二.webpack的安装三.webpack的起步 1.准备工作 2.js文件 ...
webpack打包工具1
接下来我将从使用jQuery的一个实例中出发,总结webpack在webstorm中使用方法: 首先我们来建立最基本的项目文件,如下图: 备注:其中webpack-study是项目文件名,src是我门 ...
webpack打包工具使用
webpack打包工具的使用什么是webpack? 官方给出的解释是: webpack 是一个现代化javascript应用程序的静态模块儿打包器(module bundler).当webpack处 ...
八十八、Webpack打包工具
@Author:Runsen 微信原文:你知道那些长长的js怎么来的吗? 今天不知道写啥东西,随便写了点,好水啊大家知不知道每次用js逆向时,发现那些长长的js代码,那可不是人写的.那到底是怎么来的 ...
Webpack实战（一）：基础入门-教你轻松搞定Webpack打包工具安装及参数配置
为什么要模块化 javascript跟其他开发语言有很多的区别,其中一个就是没有模块化概念,如果一个项目中有多个js文件,我们只能通过script标签引入的方式,把一个个js文件插入到页面,这种做法会 ...
Webpack打包工具的使用---打包引用JS和CSS文件
1.webpack概述: webpack是一款加载兼打包工具,它能把各种资源,例如J(含JX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 2.全局安装: 在安装Web ...
npm 及 webpack打包工具
npm包管理工具 1,认识npm npm即node的包管理器是Node.js默人的.以JavaScript编写的软件包管理系统 npm已经是前端工程师的标配在npm上我们可以很方便的下载我们所需要 ...
Webpack(打包工具)
Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载 ...

webpack打包工具