对于webpack高级概念，webpack与浏览器的缓存(系列九)感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍webpack兼容ie，并为您提供关于53webpack概念、webpack核心
对于webpack高级概念，webpack与浏览器的缓存(系列九)感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍webpack兼容ie，并为您提供关于53 webpack概念、webpack核心介绍、webpack使用、645 webpack常用plugins：clean-webpack-plugin，html-webpack-plugin，webpack.DefinePlugin，copy-webpack-plug、The way of Webpack learning (I.) -- Configure Webpack from zero（从零开始配置webpack）、webpack 3 零基础入门教程 #4 - webpack 的配置文件 webpack.config.js的有用信息。
本文目录一览：- webpack高级概念，webpack与浏览器的缓存(系列九)（webpack兼容ie）
- 53 webpack概念、webpack核心介绍、webpack使用
- 645 webpack常用plugins：clean-webpack-plugin，html-webpack-plugin，webpack.DefinePlugin，copy-webpack-plug
- The way of Webpack learning (I.) -- Configure Webpack from zero（从零开始配置webpack）
- webpack 3 零基础入门教程 #4 - webpack 的配置文件 webpack.config.js
webpack高级概念，webpack与浏览器的缓存(系列九)（webpack兼容ie）
缓存
场景
生产环境中，我们配置output,输出打包配置,代码分割配置，第三方的库会被打包到vendors文件
optimization: {
usedExports: true,
splitChunks: {
chunks: 'all',
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
name: 'vendors',
}
}
}
},
output: {
filename: '[name].js',
chunkFilename: '[name].chunk.js',
path: path.resolve(__dirname, '../dist')
}
index.js入口文件
import $ from 'jquery';
import _ from 'lodash';
const dom = $('<div>');
dom.html(_.join(['dell', 'lee'], '---'));
$('body').append(dom);
第一次打包，生成的打包文件，浏览器加载后，会被浏览器缓存的，当修改index.js时，第二次打包，浏览器会从缓存中读取文件（前提没有刷新页面，生产环境没有devServer配置，不会自动刷新页面），所以页面也没有更改。开发环境不需要（有devServer配置，自动刷新页面功能）
目前为止，我们每次修改源代码，打包出去后的文件名都不变。是有缓存的。所以当你文件名不变的话，更新内容打包上线。有缓存的电脑就无法获取到最新的代码。
这个时候我们就会用到 contenthash
接下来我们来配置下 contenthash (就是根据你文件内容生成的hash值)，解决生产环境浏览器缓存问题
// webpack.prod.js 生产环境
output: {
// 根据内容变化的生成hash值的命名
filename: '[name].[contenthash].js',
chunkFilename: '[name].[contenthash].js',
path: path.resolve(__dirname, '../dist')
}
打包完之后会在 main 后面接上 hash 值。
当我们修改index.js源码后，发现mian.js哈希值会发生变化，此时浏览器会从最新的打包mian.js文件中加载，因为第三库源码没有更改，所以vendors.js的哈希值没有变,浏览器会从缓存中加载第三库的打包文件
当你不更新内容重新打包后， contenthash 还会维持不变。所以线上用户访问的时候就不会去 服务器 重新拿取代码，而是从缓存中取文件。
53 webpack概念、webpack核心介绍、webpack使用
53 webpack概念、webpack核心介绍、webpack使用
webpack概念
Webpack 前端资源模块化管理和打包工具。可以将许多松散的模块按照依赖和引用关系打包成符合生产环境部署的前端资源。并将按需加载的模块进行代码分隔，等到实际需要的时候再加载。
开发环境：我们本地的环境或测试环境 development
生产环境：线上环境，比如：我们昨天讲的环境部署 production
为什么学习webpack
搭建前端开发环境（vue、react）、热更新、代码压缩等
但是webpack又依赖node环境 。
node你接口不会写。你会安装node即可。
学习node的两层含义：1、写动态网站（写接口） 2、为前端开发环境服务
webpack官网
https://www.webpackjs.com/
准备工作
1、先安装node
2、安装webpack和webpack-cli
npm i webpack@4 webpack-cli@3 -g
webpack核心介绍
配置文件:webpack.config.js
注意：写js代码，同时webpack基于node，所以也可以写node相关的代码 （不是写http服务）。最多用上：path、和commonjs规范
| 键名 | 概念 | 解释 |
|---|---|---|
| context | 入口起点 | 基础目录，绝对路径，用于从配置中解析入口起点(entry point) |
| entry | 入口 (必须) | 配置打包入口文件的名字 |
| output | 出口 (必须) | 打包后输出到哪里, 和输出的文件名 |
| module | 加载器配置 | 在rules对应数组中, 定义对象规则 |
| plugins | 插件配置 | 配置插件功能（插件有着webpack不具备的某些功能，比如：压缩html文件） |
webpack只认识js文件，像图片、css、字体件... webpack不认识，不认识的文件使用加载器处理
webpack有很多 的插件 。插件就是丰富webpack功能的。比如：压缩js
webpack使用
打包js代码
1、单入口单出口（主流）
/*
webpack依赖node环境 。
这个js文件中，写的虽然是js。但是所有的node相关的都可以写。
*/
const path = require('path')
module.exports = {
entry:'./src/main.js',
output:{
path:path.join( __dirname,'dist' ),//把entry（入口文件）打包到哪个目录 必须是个绝对路径
filename:'bundle.js',//打包后生成的文件名
}
}
//默认认为你要打包上线了，上线了就是说要部署到服务器生产环境（要把所有的代码压缩）
2、多入口单出口
module.exports = {
context:path.join(__dirname,"src"),
entry:['./main.js','./test1.js'],
output:{
path:path.join(__dirname,'dist'),
filename:'bundle.js'
}
}
3、多入口多出口
module.exports = {
context:path.join(__dirname,"src"),
entry:{
first:'./main.js',
second:'./test1.js'
},
output:{
path:path.join(__dirname,'dist'),
filename:'[name].js'
}
}
打包css
webpack是基于node的。而node只认识js文件。css是不能直接打包的。所以要找对应认识某文件的loader（加载器）
module属性。
讲这个案例的目的：
1、处理不了文件用对应的loader。webpack对一些loader模块的版本是有要求 。
2、devDependencies深刻认识。（开发依赖） devpendencies：项目依赖
步骤：
css-loader 3版本 style-loader 2版本
npm i css-loader@3 style-loader@2 -D
devDependencies： 开发依赖（上线是不需要的，只是开发的时候才使用），只开发阶段使用，线上不需要。
dependencies：项目依赖，无论上线还是开发阶段都需要，
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
分离css
extract-text-webpack-plugin@next 插件
安装下载
npm i extract-text-webpack-plugin@next -D
加载器修改配置
const ExtractTextPlugin = require("extract-text-webpack-plugin");
rules: [ // 加载器的使用规则
{
test: /\.css$/,
use: ExtractTextPlugin.extract({ // 从一个已存在的 loader 中，创建一个提取(extract) loader。
fallback: "style-loader",
use: "css-loader" // loader被用于将资源转换成一个CSS单独文件
})
}
]
插件配置
new ExtractTextPlugin("style.css"), // 输出的文件名
报错说明：
Error: Cannot find module 'webpack/lib/Chunk'
解决方案：在项目目录下下载webpack@4
打包less
需要安装less 和 less-loader 来解析less代码, 和加载less文件
npm i less@3 less-loader@7 -D
在webpack.config.js中 配置加载器, 解析.less文件
{
test: /\.less$/,
use: ['style-loader', 'css-loader', "less-loader"]
}
但是这样发现css代码没有分离出来, 所以还需要使用extract-text-webpack-plugin的配置, 分离出css代码
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ['css-loader', "less-loader"]
})
}
观察打包后style.css中多了less文件里的样式代码
生成html
html-webpack-plugin插件。
下载
npm i html-webpack-plugin@4 -D
注意：插件需要显示的引入到webpack.config.js中
plugins属性
plugins:[
new HtmlWebpackPlugin({ // 插件配置对象
title: "webpack 的使用",
filename: "index.html", // 产出文件名(在dist目录查看)
template: __dirname + "/index.html", // 以此文件来作为基准(注意绝对路径, 因为此文件不在src下)
favicon: "./assets/favicon.ico", // 插入打包后的favicon图标
minify: { //对html文件进行压缩，
collapseBooleanAttributes: true, //是否简写boolean格式的属性如：disabled="disabled"简写为disabled
minifyCSS: true, //是否压缩html里的css（使用clean-css进行的压缩） 默认值false
minifyJS: true, //是否压缩html里的js（使用uglify-js进行的压缩）
removeAttributeQuotes: true, //是否移除属性的引号 默认false
removeComments: true, //是否移除注释 默认false
removeCommentsFromCDATA: true, //从脚本和样式删除的注释, 默认false
}
}) // 数组元素是插件的new对象
]
报错说明
Cannot find module "webpack/lib/node/NodeTeplatePlugins"
在安装html-webpack-plugin插件的工程中, 单独的在本地安装一下跟全局webpack对应的版本
npm i webpack@4 -D
处理css中的资源（图片和字体）
我们的背景图片和自定义图标放在src的assets文件夹下。html中引入的图片：logo放置在static文件夹下（不需要打包，它只是copy一份）。
需要下载2个加载器模块
url-loader、file-loader
下载：
npm i url-loader file-loader -D
注意: webpack认为, 图片也是一个模块, 所以才需要loader来解析图片)
2.webpack.config.js加载器配置:
在module中加上此配置。
{
test: /\.(png|jpg|jpeg|gif|svg)$/, // 处理这些结尾的文件
use: 'url-loader'
}
// 如果处理字体图标需要引入这个
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader'
}
使用jquery（面向模块化开发）
在webpack打包的项目中, 使用jQuery功能
下载jquery模块,
npm i jquery
在main.js中引入jquery,
import $ from 'jquery'
热更新
webpack-dev-server会实时监听文件变化, 自动打包到内存中, 而不是生成硬盘上的dist目录
webpack-dev-server 它还会启动一个本地的服务器, 来支持你访问打包后的html网页
下载webpack-dev-server -g
npm i webpack-dev-server -g
webpack-dev-server --version
在项目下运行 命令: webpack-dev-server 可启动热更新服务器, 会根据目录下的webpack.config.js,只是在内存中运行起来了。
注意: 如果修改了配置(webpack.config.js)文件, 还是需要重启终端, 如果是src下的代码, 会自动打包
注意: 默认需要打包输出的文件名必须为 index.html文件
默认在端口号:8080上启动我们热更新服务器, 项目都在这个服务器上打开访问
当开发完毕还需要使用webpack命令进行打包到dist目录 。
webpack.config.js配置：
devServer: { // 在这里可以对webpack-dev-server进行一些配置
port: 9090, //修改端口号，默认为8080
open: true, // 自动调用默认浏览器打开
}
645 webpack常用plugins：clean-webpack-plugin，html-webpack-plugin，webpack.DefinePlugin，copy-webpack-plug
-
- 前端小菜鸟，喜欢前端，不断学习
- 微信：jie178463596
- 微信小群：纯粹讨论技术、面试、工作为主，划水少，拒绝广告
认识Plugin
CleanWebpackPlugin
HtmlWebpackPlugin
生成的index.html分析
自定义HTML模板
自定义模板数据填充
DefinePlugin的介绍
DefinePlugin的使用
copyWebpackPlugin
目录结构
wk.config.js
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { DefinePlugin } = require('webpack'); // DefinePlugin是webpack内置插件
const copyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: "./src/main.js",
output: {
filename: "js/bundle.js",
// 必须是一个绝对路径
path: path.resolve(__dirname, "./build"),
// assetmodulefilename: "img/[name].[hash:6][ext]"
},
module: {
rules: [
{
// 规则使用正则表达式
test: /\.css$/, // 匹配资源
use: [
// { loader: "css-loader" },
// 注意: 编写顺序(从下往上, 从右往做, 从后往前)
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: 1
}
},
"postcss-loader"
],
// loader: "css-loader"
},
{
test: /\.less$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: 2
}
},
"postcss-loader",
"less-loader"
]
},
{
test: /\.(png|jpe?g|gif|svg)$/,
// type: "asset/resource", file-loader的效果
// type: "asset/inline", url-loader
type: "asset",
generator: {
filename: "img/[name].[hash:6][ext]"
},
parser: {
dataUrlCondition: {
maxSize: 100 * 1024
}
}
},
{
test: /\.ttf|eot|woff2?$/i,
type: "asset/resource",
generator: {
filename: "font/[name].[hash:6][ext]"
}
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: "哈哈 webpack",
template: "./public/index.html"
}),
new DefinePlugin({
// 要包裹两层引号
BASE_URL: '"./"'
}),
new copyWebpackPlugin({
patterns: [
{
// to: xxx, // 不用写，默认会使用output.path
from: "public",
globOptions: {
ignore: [
"**/index.html",
"**/.DS_Store",
"**/abc.txt"
]
}
}
]
})
]
}
publuc/index.html
<!DOCTYPE html>
<html lang="">
<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">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
build/index.html
<!DOCTYPE html>
<html lang="">
<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">
<link rel="icon" href="./favicon.ico">
<title>杰帅的webpack</title>
<script defer src="js/bundle.js"></script></head>
<body>
<noscript>
<strong>We're sorry but 杰帅的webpack doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
The way of Webpack learning (I.) -- Configure Webpack from zero（从零开始配置webpack）
学习之路基于webpack3.10.0，webpack4.0之后更新。
一：开始前的配置
1、初始化项目，其实就是新建一个package.json文件，后面的命令依赖里面的配置项。
npm init2、修改npm script定义的任务，新增一项。
"scripts": {
"start": "webpack --config webpack.config.js"
}3、安装webpack
npm i -D webpack@3.10.0注：--save --dev 和 --save的区别？
答：--save --dev是开发环境需要的包，添加到devDependencies里面。
--save是生产环境需要的包，添加到dependencies里面。
二：使用webpack打包Js文件
1、页面入口文件 index.html
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--导入 Webpack 输出的 JavaScript 文件-->
<script src="./dist/bundle.js"></script>
</body>
</html>2、JS 工具函数文件 show.js
// 操作 DOM 元素，把 content 显示到网页上
function show(content) {
window.document.getElementById(''app'').innerText = ''Hello,'' + content;
}
// 通过 CommonJS 规范导出 show 函数
module.exports = show;3、JS 执行入口文件 main.js
// 通过 CommonJS 规范导入 show 函数
const show = require(''./show.js'');
// 执行 show 函数
show(''Webpack'');4、Webpack 在执行构建时默认会从项目根目录下的 webpack.config.js 文件读取配置，所以你还需要新建它，其内容如下：
const path = require(''path'');
module.exports = {
// JavaScript 执行入口文件
entry: ''./main.js'',
output: {
// 把所有依赖的模块合并输出到一个 bundle.js 文件
filename: ''bundle.js'',
// 输出文件都放到 dist 目录下
path: path.resolve(__dirname, ''./dist''),//path.resolve() 方法会把一个路径或路径片段的序列解析为一个绝对路径。}
};5、打包js文件
npm start
一切文件就绪，在项目根目录下执行 webpack 命令运行 Webpack 构建，你会发现目录下多出一个 dist目录，里面有个 bundle.js 文件， bundle.js 文件是一个可执行的 JavaScript 文件。
webpack 3 零基础入门教程 #4 - webpack 的配置文件 webpack.config.js
在命令行中运行 webpack 命令确实可以实现 webpack 的功能，但是我们一般不这么做，我们要用配置文件来处理。
我们把之前学到的知识用 webpack 的配置文件来实现，配置文件的名字叫 webpack.config.js 位于项目根目录下。
1. 创建配置文件 webpack.config.js
它的内容如下：
module.exports = { entry: ''./src/app.js'', output: { filename: ''./dist/app.bundle.js'' } }; 简单解释一下： entry 表示源文件，output 这边表示的是输出的目标文件。
很简单吧！
那怎么用呢？
直接在终端上输入 webpack 就可以了。webpack 命令会去找 webpack.config.js 文件，并读取它的内容（源文件和目标文件），最后进行相应的处理。
如下所示：
当然，webpack.config.js 的内容不止这么简单，可以更复杂些，我们以后再来介绍。
2. 改造 package.json 的 scripts 部分
还记得上次说过的 package.json 这个文件吗？它主要放了一些项目的介绍信息，除此之外，它还要一个重要的功能。
就是可以放一些常用的命令行脚本，比如我们可以把我们经常要用的 webpack 命令放到这里来。
我把它改了一下，变成类似下面这样：
{
"name": "hello-wepback", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack -d --watch", "prod": "webpack -p" }, "author": "", "license": "ISC", "devDependencies": { "webpack": "^3.8.1" } }改动的内容主要是增加了下面几行：
"scripts": { "dev": "webpack -d --watch", "prod": "webpack -p" },怎么用呢？
很简单，分别是
$ npm run dev
和
$ npm run prod
你会发现 npm run dev 和 webpack -d --watch 的效果是一样的。
-d 这个参数之前没介绍过，它的意思就是说包含 source maps，这个有什么用呢，就是让你在用浏览器调试的时候，可以很方便地定位到源文件，知道这个意思就好了，不用深究太多。
你会想，为什么要用 package.json 的 scripts 功能呢？
我觉得主要有两个原因吧：
第一：简单维护，所有的命令都放一起了，也能方便地查看
第二：别人下载了你的源码，一查看 package.json 就能知道怎么运行这个项目。
先说这么多。
今天关于webpack高级概念，webpack与浏览器的缓存(系列九)和webpack兼容ie的介绍到此结束，谢谢您的阅读，有关53 webpack概念、webpack核心介绍、webpack使用、645 webpack常用plugins：clean-webpack-plugin，html-webpack-plugin，webpack.DefinePlugin，copy-webpack-plug、The way of Webpack learning (I.) -- Configure Webpack from zero（从零开始配置webpack）、webpack 3 零基础入门教程 #4 - webpack 的配置文件 webpack.config.js等更多相关知识的信息可以在本站进行查询。
本文标签：
