目录
loader - style-loader&css-loader
前言：
新的技术有很多，如何判断我们是否学会了一样技术：简单的 & 初级的判断方式：
为什么要学这个技术（vue）
因为前端的 dom 操作太多，会影响开发效率， 使用 vue 可以减少大量的 dom
这个技术有什么用
提高开发效率，便于代码的维护和扩展
这个技术怎么用
vue 基本用法
webpack 基本概念 - 三个问题
为什么要学习 webpack
vue-cli：可以用来快速搭建一个项目结构：
可以开启一个临时服务器
可以自动更新代码
支持文件的模块化
-
1.0 webpack 它是 vue-cli 的底层实现原理，学习了它，可以更加方便的去使用 vue-cli
-
2.0 webpack 在工作其实用的不多，但是在面试中出的次数特别多
webpack 有什么用
-
就是 vue-cli 实现的底层的原理
-
vue-cli 搭建的项目有哪些功能：
-
可以运行为一个服务器
-
支持文件的模块化
-
可以进行实时更新
-
代码修改之后，保存，页面会自动更新
-
-
可以解析 css 文件
-
import 'xx.css'
-
-
可以解析 .vue 文件
-
.....
-
-
上述的这些功能，其实都是 webpack 来实现的
-
webpack 怎么用
-
用法比较复杂
-
配置文件
-
功能集合
-
-
配置项
-
可配置的信息
-
-
loader
-
打包的第三方包
-
-
plugin
-
扩展功能
-
-
webpack 基本概念 - 准备工作
任务：使用 webpack 搭建一个类似于 vue-cli 搭建的项目结构
主线：整个 webpack 的学习我们会以一个计算器案例作为主线来完成。
案例：
-
1.0 使用 js 完成计算器
-
功能：
-
结构：页面上放置三个输入框，一个符号选择器，一个按钮
-
交互：点击等于号，可以将第一个输入框&第二个输入框中的数据进行四则运算
-
-
-
2.0 使用模块化的思想将计算器进行封装
模块化：将一个功能复杂的 js 文件拆分为多个功能单一的 js 文件，每个单独功能的 js 文件就是一个单独的模块
-
功能：
-
使用 js 的模块化的关键字进行导入
-
模块化：
-
ES 标准：
-
导入：
import xxx from 'xxx' -
导出：
export default
-
-
node 标准
-
意义：
-
将不同功能的逻辑封装到不同的 js 文件中
-
一个 js 文件就是一个模块
-
-
导入：
const xx = reqire('xx') -
导出：
module.export = {}
-
-
-
-
将所有的四则运算的方法封装到一个单独的文件中
-
-
注意点：
-
1.0 switch 在进行判断时，会判断数据的类型
-
2.0 将代码进行模块化之后，模块化后的代码 js 无法正常解析
-
目前阶段而言，浏览器还是无法解析关键字（当前版本的浏览器还不支持 js 代码的模块化）
-
import & export
-
-
为什么之前 vue 中的 import 可以执行呢？
-
因为之前 vue 项目并没有直接在浏览器中运行
import而是在运行之前先npm run serve -
它会将
src中的内容进行打包，打包之后的内容就可以在浏览器中运行
-
-
webpack 基本概念 - 概念
问题：
表现 & 原因：我们需要将计算器进行模块化，但是模块化之后的代码浏览器是无法执行的
解决方案：
如果希望模块化后的 js 代码可以被浏览器执行，可以使用 webpack 将模块化后的代码进行打包，再将打包好的代码交给浏览器去执行就可以了。
-
官网：
-
作用：用来打包资源
-
表
-
样式
-
脚本
-
图片
-
......
-
-
打包流程
-
模块化的项目，以一个
js文件为入口，分别打包其它的文件（.js，图片， 样式.....）形成了一个模块化的项目。webpack 可以将这个模块化的模块进行打包，将 js & 样式 & 图片进行打包，打包之后可以直接运行在浏览器上。
-
webpack 的使用 - 步骤
步骤：
-
0.0 初始化项目（生成
package.json文件）npm init -y
-
1.0 安装 webpack
npm install --save-dev webpack@4.44.2 // 安装 webpack npm install --save-dev webpack-cli@3.3.12 // 安装 webpack 的 cli
-
2.0 配置
package.json{ "scripts": { "start": "webpack ./要打包的文件名" } } -
3.0 打包
npm run start
-
4.0 修改导入路径
-
将 index.html 中导入的 js 替换为 dist 目录中的 js
-
注意点：
-
0.0 webpack 可以打包模块化的项目
-
1.0 一旦运行
npm run start会将src目录下所有的内容打包到dist目录中 -
2.0 在
index.html中不再导入src目录下的文件，而是导入dist目录下的内容 -
3.0
src下的文件依旧是模块化的项目，dist下的是通过webpack打包之后的结构，不再是模块化的结构了（浏览器可以直接运行。） -
4.0 问题：
-
下载第三方包时不成功：
-
将下载的工具从 npm 改为 cnpm
-
-
下载直接报错：
-
不要将文件夹的名称取名为：
webpack
-
-
修改 src 的内容之后，需要重新打包才能起作用
-
webpack 的使用 - npm run
-
npm run start：会去当前运行的目录下找到package.json中的script下的start指令并且执行
webpack 的使用 - 使用配置文件
由于将来在项目中可以修改的参数（配置项）非常多，如果分散在不同的地方，要修改就太麻烦了。为了解决这样的问题，可以使用 webpack 中的配置文件来管理这些需要修改的参数
步骤：
-
1.0 在项目的根目录下创建一个文件名为：
webpack.config.js -
2.0 在配置文件中添加代码
const path = require('path'); module.exports = { entry: './src/main.js', }; -
3.0 配置
package.json文件{ "scripts": { "start": "webpack --config webpack.config.js" } } -
4.0 删除
dist目录 -
5.0重新打包
npm run start
注意点：
-
1.0
npm run start：-
npm run要运行package.json中scripts下面的指令 -
start：找到package.json中的scripts下面的start对应的指令，并且执行
-
-
2.0
webpack --config webpack.config.js
配置项 - 入口
在 webpack 中配置项有很多，我们不会全部讲完，会将一些比较常用的配置项列出来
设置项目的入口文件
配置项 - 出口
设置项目打包后生成的文件名
配置项 - 项目的模式
项目模式的区分：
开发模式（development）：
概念：程序员在这个过程中进行代码的开发
特点：
保证代码的完整性，以方便程序进行代码的修改
生产模式（production ）：
概念：程序员的代码已经开发完成，项目已经发布上线了，已经投入生产使用
特点：
代码运行稳定，代码体积尽可能的小（删除空格换行缩进）
mode：（项目的模式）
-
development：开发模式
-
production：生产模式（默认值）
配置项 - 解析
resolve：
-
alias： 别名
@ ：表示的是 src 目录 ,它就是用 alias 来配置的
-
extensions：可省略的后缀名
在导入文件时，每个文件都有自己的后缀，可通过它来配置可省略的后缀
默认情况下 js 后缀可以省略（除了 js 之外其它的都不能省略）
配置项 - 源码映射
打包后的项目报错信息是不准确的，可以使用源码映射来解决这个问题
开启源码映射：
特点：
-
1.0 一旦项目开启源代码映射，会将原本的代码原本信息也保存一份到打包的目录下。
-
问题：在加载资源时， main.js 太大了，有一部分没有意义，会消耗性能。
-
解决方案：
-
将源码生成到别的文件中：
devtool: 'source-map'
-
-
注意点：
-
项目的配置文件其实是基于
nodejs的 -
我们说
webpack是基于nodejs的
总结：
-
webpack 中的配置项其实有很多： 传送门
-
我们只是挑选了其中用的比较多的来进行讲解，如果后续我们遇到其它的配置可以通过传送门去查看
loader - 作用
由于现在写的项目只有 js 文件，webpack 默认是可以打包 js 文件的。但是 webpack 默认仅仅只能打包 js 文件，无法打包其它文件（图片，样式，字体 ...）.如果想要打包其它的文件，可以借助 webpack 中的 loader 来进行打包。
作用：
-
webpack 默认只能打包 js 文件，无法打包其它文件（样式，字体，图片）。如果想要打包其它的文件，可以借助 webpack 中的 loader 来进行打包。
特点：
-
所有的 loader 都是第三方包，可以帮助 webpack 打包其它资源
-
不同的 loader 打包的文件是不一样的
loader - style-loader&css-loader
可以用来帮助 webpack 打包 .css 文件
步骤：
-
1.0 安装打包 css 的 loader
npm install --save-dev style-loader css-loader -
2.0 配置 Loader (webpack.config.js)
module.exports = { entry: '', output: {}, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', // 将样式使用到页面中 'css-loader' // 将样式打包到 dist 目录下 ] } ] } } -
3.0 重新打包
npm run start
注意点：
-
1.0 大部分的 loader 在使用时步骤都是三步： a. 下载 loader b.配置 loader c.重新打包
-
2.0 打包样式时用到了 style-loader & css-loader：
-
css-loader：将 css 中的样式打包到了
dist目录下的文件中了 -
style-loader：将打包后的 css 文件在运行时，添加到页面的头部中以 style 标签进行包裹
-
-
3.0 style-loader 与 css-loader 的书写顺序不能改变
loader - less-loader
在写项目时，一般会使用 less 语法来书写样式。less 如果需要打包要借助第三方包： less-loader
使用 less
-
在
style中创建一个 less.less -
添加 less 的样式
-
在
src/index.js中导入这个 less
打包 less 的步骤：
-
1.0 安装第三方包
npm install --save-dev less-loader@5.0.0 less@3.0.4 -
2.0 配置 loader (webpack.config.js 中完成的)
module.export = { module: { rules: [{ test: /\.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] }] } } -
3.0 重新打包
loader - sass-loader
用来打包 sass 文件的
使用 sass 文件：
-
创建一个 sass 文件（注意点：所有的 sass 文件为了防止跟其它文件冲突，后缀名统一写为
.scss) -
完成 sass 的代码
-
在
index.js中使用
打包 sass 的步骤：
-
1.0 下载第三方包
-
2.0 配置第三方包
-
3.0 重新打包
loader - file-loader
可以用来打包图片 & 字体
打包图片：
-
使用图片
-
在 html 中添加一个容器
-
给容器设置样式：设置一个背景图片
-
-
打包图片：
-
1.0 下载第三方包
-
2.0 配置第三方包
-
3.0 重新打包
-
-
注意点：
-
1.0 会将图片打包到 dist 目录下
-
2.0 将静态文件：
public/index.html拷贝到dist目录下-
导入 的
js文件的路径也要做相应的修改
-
-
打包字体：
-
使用字体(使用 bootstrap 中的字体文件)
-
下载 bootstrap （版本号：3.3.7）
-
导入 bootstrap 的样式
-
使用字体图标
-
-
打包字体：
-
1.0 下载第三方包
-
2.0 配置第三方包
-
3.0 重新打包
-
loader - babel-loader
将 es6 语法打包为 es5 语法
打包 es6 为 es5
-
1.0 下载第三方包
npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env --save-dev
-
2.0 配置第三方包
module: { rules: [ { test: /\.js$/, // 将后缀名为 js 的文件进行 es6 转 es5 的处理 exclude: /node_modules/, // 处理的目录不包括 node_modules use: { loader: 'babel-loader', // 使用 babel-loader 来处理 options: { presets: ['@babel/preset-env'] // 固定写法 } } } ] } -
3.0 重新打包
注意点：
-
最新的 webpack 已经放弃了 ie 浏览器（不会再将 es6 转 es5,所以如果要上述的代码起作用，应该将 webpack 的版本降级为 4.x）
loader - vue-loader
默认情况下 webpack 无法打包后缀名为 .vue 的文件、如果要打包需要借助第三方包： vue-loader
使用 .vue 文件：
-
1.0 下载第三方包： vue
-
2.0 创建一个
App.vue文件 -
3.0 完成 App.vue 文件的内容
-
template & style & script
-
-
4.0 在 main.js 中
-
导入 Vue
-
导入 App.vue
-
创建一个 vue 实例
-
将 App.vue 挂载到 vue 实例中
-
打包 .vue 的过程：
-
1.0 安装第三方包
npm install -D vue-loader@15.9.3 vue-template-compiler -
2.0 配置 Loader （webpack.config.js）
// 导入 Loader const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { module: { rules: [ // 配置 loader { test: /\.vue$/, loader: 'vue-loader' } ] }, plugins: [ // 将 vue-loader 作为插件来使用 new VueLoaderPlugin() ] } -
3.0 重新打包npm run start
注意点：
-
1.0 vue-loader 的说明文档不在 webpack 中，因为 vue-loader 是属于 vue 的全家桶系列。如果要找去 vue 的官网中去找
总结：
-
loader 与配置项一样，也有很多不同的 loader， 我们只是学习了一些常用的 loader，其它的可以参考 传送门
-
webpack：
-
配置项：可以用来配置项目的相关信息
-
loader：可以用帮助 webpack 打包额外的资源
-
插件 - HtmlWebpackPlugin
给 webpack 提供额外的功能
修改内容之后，重新打包好 dist 目录下的内容之后，还需要将 index.html 从
pulibc下拷贝到 dist 目录下，太麻烦了。问题：我不希望每次重新打包 dist 目录之后再将 index.html 拷贝到 dist 目录下。
解决方案：可以使用 HtmlWebpackPlugin
作用：可以在 dist 目录中自动生成一个 html 文件
使用步骤：
-
1.0 下载插件
npm install --save-dev html-webpack-plugin@4
-
2.0 配置插件（webpack.config.js 中完成的）
// 导入插件 const HtmlWebpackPlugin = require('html-webpack-plugin') // 配置插件 module.exports = { plugins: [ new HtmlWebpackPlugin({ filename: '', // 生成的静态文件名称 template: '' // 以谁为模板生成的静态页面 }) ] } -
3.0 重新打包:
npm run start -
4.0 删除
public/index.html中导入main.js的代码
注意点：
-
自动生成的 html 文件有以下特点：
-
会自动将模板中的内容全部复制一份
-
会自动在文件的末尾添加入口文件的引用
<script src="main.js"></script>
-
插件 - clean-webpack-plugin
每次重新打包项目时一定要清除 dist 目录
问题：每次都删除，太麻烦了。解决这个问题可以使用：clean-webpack-plugin
作用：用来清除 dist 目录
步骤：
-
1.0 下载插件
npm install clean-webpack-plugin --save-dev
-
2.0 配置插件
// 导入插件 const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 配置插件 module.exports = { plugins： [ new CleanWebpackPlugin() ] } -
3.0 重新打包
注意点：
-
1.0 插件会帮助自动清除 dist 目录
-
2.0 以后如果有能力看文档时，尽量用英文文档
插件 - webpack-dev-server
可以开启一个服务器，具有实时更新的功能
作用：可以开启一个服务器，具有实时更新的功能
步骤：
-
1.0 下载插件
npm install --save-dev webpack-dev-server
-
2.0 配置插件（webpack.config.js）
module.exports = { devServer: { contentBase: './dist' }, } -
3.0 配置指令：(package.json)
{ "scripts": { "start": "webpack --config webpack.config.js", "serve": "webpack-dev-server --open" } } -
4.0 开启服务器：
npm run serve
注意点：
-
开启服务器之后，修改完代码之后是不需要自己重新打包， 手动刷新页面的（服务器可以做到时实更新）
-
webpack-dev-server插件在使用时，默认使用的默认文件的名称为：
webpack.config.js
插件 - 模块的热替换
修改 css 之后，可以让页面不 刷新直接更新修改的样式
module.exports = {
devServer: {
contentBase: './dist',
hot: true, // 开启模块的热替换
}
}
注意点：
-
配置文件中的配置项发生修改之后需要重启服务才能生效
总结：
-
插件的作用是给 webpack 提供额外的功能
-
插件的种类不单单只有以上几种还有很多，详情请见： 传送门
-
webpack
-
配置项：配置项目中的相关信息
-
loader：配置打包的文件
-
plugin：配置额外功能
-
打包项目
说明：在项目中的 package.json 中有两个指令：
"serve": "vue-cli-service serve": 将项目的服务器启动起来
"build": "vue-cli-service build":将项目进行打包
步骤：
-
1.0 运行指令：
npm run build -
2.0 得到生成的 dist 目录：
-
这个目录就是我们需要的上线的文件
-
扫一扫
1037
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
