静态资源

js文件（js jax coffee ts)
css文件 (css less scss)
images文件(jpg png gif bmp)
字体文件(svg ttf ect woff)
模板文件（ejs jade vue)

资源多了之后，网页会发起很多二次请求，导致网页加载速度慢。
同时需要处理各种包之前的依赖关系。

可以通过合并，压缩依赖包，把小图片合并成精灵图，小图片转成base64编码；
使用requireJS或者webpack解决复杂的依赖关系；

webpack：前端的项目构建工具，基于node.js开发出来的前端工具，基于node运行；
Gulp，基于task任务；适合小任务点，灵活处理；

安装

npm i webpack -g 全局安装
npm i webpack --save-dev 安装到项目中
npm install webpack-cli -g 还需要安装这个东西，应该是新版本的webpack需要使用

项目结构：
webpack
src 源代码
css
js
images
index.html
main.js：项目的js入口文件
dist 发布的文件

在webpack目录中打开cmd，运行

npm init -y -y 的含义：yes的意思，在init的时候省去了敲回车的步骤，生成的默认的package.json
npm i jquery -S //安装jquery

其中第一句，在node开发中使用npm init会生成一个pakeage.json文件，这个文件主要是用来记录这个项目的详细信息的，它会将我们在项目开发中所要用到的包，以及项目的详细信息等记录在这个项目中。方便在以后的版本迭代和项目移植的时候会更加的方便。也是防止在后期的项目维护中误删除了一个包导致的项目不能够正常运行。使用npm init初始化项目还有一个好处就是在进行项目传递的时候不需要将项目依赖包一起发送给对方，对方在接受到你的项目之后再执行npm install就可以将项目依赖全部下载到项目里。

package name:                      你的项目名字叫啥
version:                          版本号
description:                       对项目的描述
entry point:                      项目的入口文件（一般你要用那个js文件作为node服务，就填写那个文件）
test command:                     项目启动的时候要用什么命令来执行脚本文件（默认为node app.js）
git repository:                    如果你要将项目上传到git中的话，那么就需要填写git的仓库地址（这里就不写地址了）
keywirds：                       项目关键字（我也不知道有啥用，所以我就不写了）
author:                         作者的名字（也就是你叫啥名字）
license:                        发行项目需要的证书（这里也就自己玩玩，就不写了）

完善main.js脚本

// 项目的js入口文件
// 1.导入Jquery
// import *** from *** es6中导入模块的方式
import $ from 'jquery'
// const $ = require('jquery');$(function (argument) {$('li:odd').css('backgroundColor','lightblue')$('li:even').css('backgroundColor',function(){return '#' + 'D97634'})
})

完善index.html

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewpoint" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>webpack</title><!-- 不可以在这里引用任何包和css文件 -->
</head>
<body><ul><li>list</li><li>list</li><li>list</li><li>list</li><li>list</li><li>list</li><li>list</li><li>list</li><li>list</li><li>list</li></ul></body>
</html>

通过webpack工具，把main.js进行处理，生成一个bundle.js文件，如下：
在项目根目录webpack文件夹中执行：
webpack .\src\main.js .\dist\bundle.js（某些终端命令中，注意路径）
webpack ./src/main.js ./dist/bundle.js 在终端窗口中

提示：webpack : 无法加载文件 C:\Users\AppData\Roaming\npm\webpack.ps1，因为在此系统上禁止运行脚本；

解决：管理员身份运行powershell，输入 set-ExecutionPolicy RemoteSigned 接着提示中输入Y，即可

如果出现错误：安装“npm install -g @vue/cli”发生npm WARN deprecated request@2.88.2: request has been deprecated；
可以尝试，配置淘宝镜像：npm config set registry https://registry.npm.taobao.org；配置完成后检验是否成功：npm config get registry；

错误1

大概就是上面这种情况，原因就是当前的webpack是5.65.0版本，需要修改命令，然后修改命令如下：
webpack ./src/main.js -o ./dist/bundle.js。

错误2
使用以上命令后又出现了下面的提示

大概就是没有设置生产模式还是开发模式的问题。
可以在package.json中增加

"scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack --mode development",  "build": "webpack --mode production"  }

然后再增加打包配置文件webpack.config.js，就是下面说的，然后增加模式

const path = require('path')
module.exports = {//通过node中的模块操作，向外暴漏了一个配置对象entry:path.join(__dirname,'./src/main.js'), //webpack打包的文件output:{//输出文件相关的配置path:path.join(__dirname,'./dist'),//输出目录filename:'bundle.js',//指定文件的名字},mode: 'development' // 设置mode
}

然后再执行 webpack，解决

然后，运行之前的命令（webpack ./src/main.js ./dist/bundle.js）。

修改引用对应的文件：

<!-- 由于main.js中使用了es6的语法，浏览器不支持 -->
<!-- <script type="text/javascript" src="./main.js"></script> -->
<script type="text/javascript" src="./dist/bundle.js"></script>

webpack的作用：

可以处理js文件之前的依赖关系；
把js的兼容问题进行处理，高级别不识别的语法可以转换为浏览器可以识别的版本；（webpack 要打包的文件的路径打包好文件的输出目录)

webpack配置文件

在工程项目根目录中，增加webpack.config.js文件：

webpack指令执行时，不指定入口和出口，则去查找配置文件，解析文件得到配置对象，得到入口和出口，然后打包构建。

const path = require('path')
module.exports = {//通过node中的模块操作，向外暴漏了一个配置对象entry:path.join(__dirname,'./src/main.js'), //webpack打包的文件output:{//输出文件相关的配置path:path.join(__dirname,'./dist'),//输出目录filename:'bundle.js',//指定文件的名字}
}

再打包时，可以只运行webpack命令即可。

webpack-dev-server工具

该工具可实现自动打包的功能

安装：npm i webpack-dev-server -D 把工具安装到项目的本地依赖（本地安装时，无法当作脚本任务在powershell中执行，只有安装时-g可以在powershell中安装）；用法和webpack的用法一样；

本地安装webpack： npm i webpack -D
（本地安装时提示：Refusing to install package with name “webpack” under a package；可以修改工程package.json的name属性，修改为webpack外的其他名字即可）

需要安装项：

npm i -D
npm i webpack -D
npm i webpack-cli -D
npm i webpack-dev-server -D

增加启动项在package.json中：

然后运行指令：
npm run dev
运行后发现报错，找不到模块，最后使用以下的版本

    "webpack": "^4.32.2","webpack-cli": "^3.3.2","webpack-dev-server": "^3.5.1"

运行结果：

可以直接在网址中访问，弹出的界面中选择src即可进入界面：

修改main.js发现没有改变，需要修改html中的bundel.js的路径：

<script type="text/javascript" src="/bundle.js"></script>

webpack-dev-server会打包生成bundle.js的文件，没有在物理磁盘中，而是托管到了内存中，以虚拟的形式在项目根目录中，可以认为与dist src等同级；

常用启动参数

运行后打开浏览器 --open
修改端口 --port 3000
修改运行根目录 --contentBase src
浏览器无刷新重载 --hot

"scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack-dev-server --open --port 3000 --contentBase src"},

第二种方式为修改配置文件webpack.config.js（不推荐)
添加devServer和plugins属性

const path = require('path')
const webpack = require('webpack')//启用热更新 的第二步
module.exports = {//通过node中的模块操作，向外暴漏了一个配置对象entry:path.join(__dirname,'./src/main.js'), //webpack打包的文件output:{//输出文件相关的配置path:path.join(__dirname,'./dist'),//输出目录filename:'bundle.js',//指定文件的名字},devServer:{//这是配置dev-server参数的第二种方式，相对麻烦open:true,//自动打开浏览器port:3000,//设置启动的运行端口contentBase:'src',//指定托管的根目录hot:true,//启用热更新 的第一步},plugins:[//配置插件的节点new webpack.HotModuleReplacementPlugin() //新建 一个热更新模块对象，启用热更新 的第三步]
}

html-webpack-plugin插件

在内存中根据指定页面在内存中生成页面
自动把打包好的bundle.js 追加到页面中，不需要手动引用（index中可以省略<< script type=“text/javascript” src="/bundle.js">< /script >）

在本地安装插件：npm i html-webpack-plugin -D
在配置文件中增加插件对象：

const path = require('path')
const webpack = require('webpack')//启用热更新 的第二步const webpackPlugin = require('html-webpack-plugin'),//导入内存中生成html页面的插件，插件需要放到plugin节点中去module.exports = {//通过node中的模块操作，向外暴漏了一个配置对象entry:path.join(__dirname,'./src/main.js'), //webpack打包的文件output:{//输出文件相关的配置path:path.join(__dirname,'./dist'),//输出目录filename:'bundle.js',//指定文件的名字},devServer:{//这是配置dev-server参数的第二种方式，相对麻烦open:true,//自动打开浏览器port:3100,//设置启动的运行端口contentBase:'src',//指定托管的根目录hot:true//启用热更新 的第一步},plugins:[//配置插件的节点new webpack.HotModuleReplacementPlugin(), //新建 一个热更新模块对象，启用热更新 的第三步new webpackPlugin({//创建一个插件template:path.join(__dirname,'./src/index.html'),//指定模板页面，将来会根据页面的路径，在内存中创建htmlfilename:'index.html' //指定生成的html的名字})]
}
//webpack指令执行时，不指定入口和出口，则去查找配置文件，解析文件得到配置对象，得到入口和出口，然后打包构建

样式的应用

webpack默认只能打包js类型的文件，不能处理其他类型文件
处理非js文件，需要安装第三方加载器

打包处理css文件，需要安装style-loader css-loader
webpack.config.js里面新增一个配置节点，module对象，里面有个rules属性（数组），存放了所有第三方文件的匹配和处理规则。
在main.js中导入css文件的路径

index.css

li{list-style: none;
}

main.js:

import './css/index.css'

webpack.config.js
添加module节点

const path = require('path')
const webpack = require('webpack')
const webpackPlugin = require('html-webpack-plugin')
module.exports = {entry:path.join(__dirname,'./src/main.js'), output:{path:path.join(__dirname,'./dist'),filename:'bundle.js',},devServer:{open:true,port:3100,contentBase:'src',hot:true},plugins:[new webpack.HotModuleReplacementPlugin(), new webpackPlugin({template:path.join(__dirname,'./src/index.html'),filename:'index.html' })],module:{//用于配置所有的第三方模块加载器rules:[//第三方的匹配规则{test: /\.css$/,use:['style-loader','css-loader']},//匹配css结尾的文件的处理规则（使用style-loader和css-loader）{test: /\.less$/,use:['style-loader','css-loader','less-loader']},{test: /\.scss$/,use:['style-loader','css-loader','sass-loader']},]}
}

匹配后规则调用的顺序为由右向左，即先调用css-loader，在调用style-loader，最后一个处理后，交给webpack打包，放到bundle.js中。

less文件的处理规则less-loader less;
安装npm i less less-loader -D

scss文件的处理规则sass-loader less;
安装npm i node-sass sass-loader -D

index.less

ul{padding:0;margin:0;
}

index.scss

html,body{margin:0;padding:0;li{font-size:12px;line-height:30px;}
}

main.js

import './css/index.less'
import './css/index.scss'

url

图片

默认webpack无法处理url相关地址；
需要添加url-loader插件；
项目根路径安装：npm i url-loader file-loader -D

在webpack.config.js中增加匹配规则：

{test: /\.(jpg|png|gif|bng|jpeg)$/,use:'url-loader?limit=8000&name=[hash:8]-[name].[ext]'},

处理图片路径的规则,limit是图片的大小，单位是byte，如果引用的图片大于等于limit的值，则不会转为base64的字符串
其中name为保持原图片的名称不变（而不是hash值），ext保持图片后缀不变,同时图片名字前面加上8位哈希值（最长为8位）

同样webpack5又出问题了，图片不显式，屏蔽以上的图片加载配置规则，如下配置：

{test:/\.(jpg|png|gif)$/,type:"asset",//解析parser: {//转base64的条件dataUrlCondition: {maxSize: 25 * 1024, // 25kb}},generator:{ //与output.assetModuleFilename是相同的,这个写法引入的时候也会添加好这个路径filename:'img/[name].[hash:6][ext]',//打包后对资源的引入，文件命名已经有/img了publicPath:'./'},},

链接地址

图标

安装bootstrap：npm i bootstrap -D
使用内存中的html，可以理解为在项目根目录存在一个index.html和bundle.js，所以配置的托管目录可以不用增加，即可以省略wepack.json中的 --contentBase src；

 "dev2": "webpack-dev-server --open --port 3010",

引入bootsrap，在main.js中添加

import 'bootstrap/dist/css/bootstrap.css'

引用node_modules中相关的文件，可以直接省略路径前的node_modules这一层目录;
还需要处理字体文件，webpack.config.js中增加配置：

{text:/\.(ttf|eot|svg|woff|woff2)&/,use:'url-loader'}

index.css样式文件

.div1{background-image: url('../image/tr.jpg');background-size: cover;width:200px;height: 200px;
}

index.html文件

<body><div class="div1"></div><span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
</body>

运行后发现样式无效，查找问题一直没找到原因，试了下安装bootstrap的方式：
npm i bootstrap@3 -D
安装后出现效果，不知道什么原因

babel的配置

在main.js文件中增加如下脚本：

class Person {//使用static关键字定义静态属性：可以直接通过类名访问的属性//实例属性，只能通过类名进行访问的属性static  info = {name:'Tom', age: "13"}
}

class 是es6中的新语法，用来实现es6中面向对象编程的方法；
webpack默认只能处理部分es6语法，需要借助于第三方loader处理；
通过babel，可以将高级语法转换为低级语法

npm i babel-core babel-loader babel-plugin-transform-runtime -D
npm i babel-preset-env babel-preset-stage-0 -D
第一条为转换工具，第二个安装的是语法；
babel-preset-env 是新es语法，babel-preset-es2015为之前的语法；
打开webpack文件，在module节点的rules中，添加规则：

{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}

exclude:/node_modules/的意思为不包含node_modules中的文件，打包的话会很消耗cpu，打包速度慢
在项目根目录中新建一个.babelrc的配置文件，必须符合json的规则，其中配置

 {"presets":["env","stage-0"],"plugins":["transform-runtime"]}

运行后发现报错，无法找到模块：
Error: Cannot find module ‘@babel/core’；
重新安装指定loader版本：
npm i babel-loader@7 -D
解决问题。

还有个问题，需要注意增加的babelrc文件，文件的名字为.babelrc，没有其他后缀；

webpack5貌似可以直接使用

执行打包命令

删除dist文件夹，
再执行webpack 命令，可重新打包

文化建设

江南逢李龟年 岐王宅里寻常见崔九堂前几度闻正是江南好风景落花时节又逢君

vue学习笔记--webpack的使用相关推荐

Vue学习笔记：使用CLI构建Vue项目
Vue学习笔记:使用CLI构建Vue项目一.安装Vue CLI 要用到集成在node.js里的npm来安装Vue CLI. 1.下载并安装node.js 2.配置node.js的环境变量 3.启动命 ...
「Vue 学习笔记 1」Vue 项目快速搭建，初始项目各个文件夹作用介绍和启动代码执行流程分析
「Vue 学习笔记 1」Vue 项目快速搭建,初始项目各个文件夹作用介绍和启动代码执行流程分析前言一.我的开发环境二.使用 Vue CLI (Vue 脚手架)快速搭建项目三.初始项目的目录结构 ...
狂神说 vue学习笔记
vue学习笔记文章目录 vue学习笔记一.第一个vue程序 1. 什么是MVVM 2. 为什么要使用MVVM 3.直接新建项目 4.导入vue.js 5.简单绑定元素 6 vue的声明周期二.V ...
Vue学习笔记(2) 在html文件中创建Vue实例，并使用http-vue-loader注册单文件组件
本篇博客基于Vue2.x 官方文档:https://cn.vuejs.org/v2/guide/instance.html 最近和同学合作一个设备信息管理的小项目,而同学找的模板不是前后端分离的因此 ...
vue 学习笔记第无弹
1. 在 webpack 中配置 .vue 组件页面的解析运行cnpm i vue -S将 vue 安装为运行依赖: 运行cnpm i vue-loader vue-template-compile ...
菜鸟Vue学习笔记（三）
菜鸟Vue学习笔记(三) 本周使用了Vue来操作表单,接下来说下Vue中双向绑定表单元素的用法. Vue中双向绑定是使用的v-model,所谓的双向绑定即改变变量的值,表单元素的值也会改变,同样的,改 ...
Vue学习笔记进阶篇——Render函数
本文为转载,原文:Vue学习笔记进阶篇--Render函数基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编 ...
Vue学习笔记入门篇——数据及DOM
本文为转载,原文:Vue学习笔记入门篇--数据及DOM 数据 data 类型 Object | Function 详细 Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter ...
vue学习笔记-03-浅谈组件-概念，入门，如何用props给组件传值？
vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 文章目录 vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 什么是组件? 为什么要使用组件? 如何使用 ...

vue学习笔记--webpack的使用