一、webpack是什么？

二、webpack的基本使用

1、初始化项目

2、安装webpack及其依赖

3、使用

3.1 配置webpack：

3.2 在package.js文件中添加打包命令

3.3 执行打包命令

三、webpack相关插件

插件一：HtmlWebpackPlugin

插件二：BundleAnalyzerPlugin

插件三：splitChunks

四、非js文件模块化打包

一、webpack是什么？

webpack是一个模块化打包工具。我们在开发的时候通常都是使用模块化的方式进行开发，但是浏览器对模块化的支持程度很低，因此我们需要借助webpack打包工具将模块化代码打包生成浏览器支持的规范。简单来说，webpack就是用来将项目模块化文件打包生成普通脚本文件，然后再引入到html文件中。

二、webpack的基本使用

1、初始化项目

执行下面的命令可以在项目文件夹下生成默认的package.json文件

npm init -y

2、安装webpack及其依赖

cnpm i webpack webpack-cli --save-dev

3、使用

我们在项目文件夹下新建一个src文件夹，然后在src下新建三个js文件，分别为a.js、b.js、main.js，其中main.js作为入口文件。

我们在a.js中使用qs工具库，在b.js中使用lodash工具库，需要先安装qs和lodash：

cnpm i qs lodash -S

a.js

import qs from 'qs'let obj = {name: 'zhangsan',age: 12
}export default {url: "/user/login",data: qs.stringify(obj)
}

b.js

import _ from 'lodash'let obj = {name: "lisi",age: 15
}export default _.cloneDeep(obj)

在main.js中导入a.js和b.js并使用：

import a from './a'
import b from './b'let dom = document.createElement('div')
dom.innerText = JSON.stringify(a)
document.body.appendChild(dom)let dom2 = document.createElement('div')
dom2.innerText = JSON.stringify(b)
document.body.appendChild(dom2)

如果我们此时直接将这三个js文件引入我们的html文件中是无法使用的，因为浏览器并不支持ES6模块化(import、export)，所以我们需要使用webpack将这三个js文件打包生成普通脚本文件再引入html文件中使用：

3.1 配置webpack：

在我们的项目文件夹下新建一个webpack.config.js文件

webpack.config.js

// 导入path模块，用于处理文件和目录的路径
const path = require('path')
module.exports = {//提供 mode 配置选项，告知 webpack 使用development(开发)模式的内置优化mode: 'development',// 入口文件 (注意:入口使用相对路径)entry: './src/main.js',// 打包完成后输出到哪个文件 output: {// 输出文件的路径// __dirname表示当前文件模块所属的绝对路径// path.resolve() 用来拼接路径path: path.resolve(__dirname, 'dist'),// 输出文件的文件名filename: 'bundle.js',// 每次打包都重新生成clean: true}
}

3.2 在package.js文件中添加打包命令

"build": "webpack --config webpack.config.js"

3.3 执行打包命令

npm run build

打包完成后，会生成一个dist文件夹，文件夹下有一个bundle.js文件：

此时我们在dist文件夹下新建一个index.html文件，并将bundle.js文件引入，然后运行index.html文件就可以了：

index.html

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

三、webpack相关插件

插件一：HtmlWebpackPlugin

由于我们在出口 (output) 中设置了 clear:true ，因此每次我们改动了代码重新打包项目的时候，都会把dist文件夹清理掉重新生成一个新的打包文件，我们的html文件也会被清理掉，因此每次打包都需要我们重新建一个html文件，而使用HtmlWebpackPlugin插件就不再需要我们每次在打包后重新建一个html文件，因为这个插件会帮我们自动生成一个html文件。

安装插件HtmlWebpackPlugin

cnpm install --save-dev html-webpack-plugin

使用插件

webpack.config.js

const path = require('path')
// 导入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {mode: 'development',entry: './src/main.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js',clean: true},// 使用插件plugins:[new HtmlWebpackPlugin()],
}

插件二：BundleAnalyzerPlugin

这是一个可视化图形插件，用来分析模块化大小，它通常用来做前端性能优化，比如通过可视化，我们可以知道打包完后哪个文件比较大，我们就可以将大文件分成小模块，同时还可以删除误引入的第三方依赖。

安装插件BundleAnalyzerPlugin

cnpm i --save-dev webpack-bundle-analyzer

使用插件

webpack.config.js

const path = require('path')
// 导入插件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {mode: 'development',entry: './src/main.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js',clean: true},// 使用插件plugins:[new HtmlWebpackPlugin(),new BundleAnalyzerPlugin()],}

插件三：splitChunks

这个插件用来抽离公共重复的依赖，将其单独放在一个脚本文件，以优化前端性能。

这个插件是webpack自带的，不需要安装。

使用插件：

webpack.config.js

const path = require('path')
module.exports = {// 可以设置多个入口文件 entry:{home:'./src/home.js',main:'./src/main.js'},output:{path:path.resolve(__dirname,'dist'),// [name]是原先文件的名字filename:'bundle_[name].js',clean:true},// 使用插件optimization:{splitChunks: {chunks: 'all',}}
}

四、非js文件模块化打包

打包css文件

安装转换工具：

cnpm i css-loader style-loader --save-dev

使用：
webpack.config.js

const path = require('path')
module.exports = {mode: 'development',entry: './src/main.js',output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js',clean: true},// 可以设置非js文件的转换规则module:{rules:[// 设置css文件转换规则{// 正则表达式匹配以.css结尾的文件test:/\.css$/,// 转换使用的工具use:['style-loader','css-loader']}]}
}

webpack打包工具的基本使用相关推荐

webpack打包工具不会用，那是因为你没看过这篇
webpack打包工具一.认识webpack 1. 前端模块化 2.打包如何理解呢? 3.和grunt/gulp的对比二.webpack的安装三.webpack的起步 1.准备工作 2.js文件 ...
webpack打包工具1
接下来我将从使用jQuery的一个实例中出发,总结webpack在webstorm中使用方法: 首先我们来建立最基本的项目文件,如下图: 备注:其中webpack-study是项目文件名,src是我门 ...
webpack打包工具
文章目录前言一.yarn包管理工具二.webpack 1.webpack的基本概念 2.webpack的使用步骤 3.webpack开发服务器前言简介:webpack是node的第三方模块包 ...
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打包工具的基本使用

一、webpack是什么？

二、webpack的基本使用

1、初始化项目

2、安装webpack及其依赖

3、使用

3.1 配置webpack：

3.2 在package.js文件中添加打包命令

3.3 执行打包命令

三、webpack相关插件

插件一：HtmlWebpackPlugin

插件二：BundleAnalyzerPlugin

插件三：splitChunks

四、非js文件模块化打包

webpack打包工具的基本使用相关推荐

最新文章

热门文章