本主题主要梳理下Vue的项目构建模式，并介绍真正服务于各种需求的插件功能：
1. html-webpack-plugin；
2. css-loader与style-loader；
3. extract-text-webpack-plugin；
4. url-loader与file-loader；
5. html-laoder
还有各种花式插件与loader，比如sass与less样式语言插件，各种框架模板插件，其实都是一个语法问题，编程模式都一致滴。
webpack Web项目构建
步骤
- 创建项目工程根目录；
- 创建项目工程目录结构；
- 创建npm工作配置文件config.json（可选）；
- 创建js入口文件；
- 创建使用打包js的页面文件；
- 创建webpack配置文件框架webpack.dev.conf.js；
- 配置mode；
- 配置entry与output；
- 配置devServer参数；
- 在npm中配置服务器启动scripts；
- 启动服务器；
- 使用浏览器访问；
操作
- 创建项目工程
创建项目工程
- 创建工程目录
创建工程目录
- 生成npm管理配置文件
创建package.json配置文件
- 使用VSCode打开项目路径，并在其中创建并编辑js文件；
-
VSCode编辑器中编写js代码
-
- 在页面中使用js文件
在html中使用js
- Webpack的标准配置文件内容结构
Webpack的标准配置文件
- 开发模式与生成模式
- 还存在一种测试模式
- 开发模式可以实时刷新；
配置开发模式
- 入口配置
配置entroy与打包输出js文件
- Http服务器配置
配置Webpack-dev-server
- 执行脚本配置
配置npm服务器启动执行脚本
- 启动服务器
服务器启动的截图
- 浏览器访问
- 上面设置的是自动打开
-
浏览器访问
使用html-webpack-plugin隐藏js与html的关系
步骤
- 安装插件；
- 代码引入插件；
- 插件配置参数；
- 创建插件对象，并在webpack中配置插件对象；
- 测试插件是否工作；
操作
- 安装
-
插件安装
-
- 配置代码引入插件
-
插件引入
-
- 插件配置
-
配置插件
-
- 设置插件到webpack环境中
-
使用插件
-
- 测试插件
- 启动服务器测试；
- build构建测试；
- 在npm的config.json配置文件中增加一个打包操作指令：
"build": "webpack --config=config/webpack.dev.conf.js" - 执行打包操作：
npm run build
- 在npm的config.json配置文件中增加一个打包操作指令：
- 打包操作的结果：
-
插件工作结果测试
-
- 服务器启动（开发模式可以启动一次，代码修改后实时刷新）
-
开发模式的自动刷新
-
-
注意：
- html-webpack-plugin插件在webpack4.0以后，可以实现零配置：
- template采用默认：
- filename：默认
index.html； - inject：采用默认；
- title不会主动修改HTML的标题，需要手工修改：
<title>{%= o.htmlWebpackPlugin.options.title %}</title>
- html-webpack-plugin插件在webpack4.0以后，可以实现零配置：
-
注意：
- 这里没有直接使用html，而是使用html-webpack-plugin插件把模板插入js转换为html，模板可以随意指定；
使用loader模块化css
- css样式表发展的技术也比较多，除了传统的css，还有sass/less、stylus，这里指介绍与传统css有关的样式。
- css-loader，style-loader
- css-loader：是加载css
- style-loader：使用
<style>将样式注入到HTML页面
- css-loader，style-loader
- 官网参考：
https://www.webpackjs.com/loaders/css-loader/
- 一堆loader，根据需要选择
-
Webpack的各种plugins与loaders
-
步骤
- 安装
- 编写css样式文件
- 在webpack中配置css加载模块
- 在js中引入样式文件
- 使用样式
- 测试：
- 打包测试
- 运行测试
操作
- 安装
-
css-loader安装
-
- css文件
div.mycss{
width: 100px;
height: 100px;
background-color: red;
}
- 在webpack中配置css加载模块
module: {
rules:[
{ // 加载规则
test: /\.css$/, // 文件名匹配
use: [ // 加载器
"css-loader",
]
}
]
},
- 使用import引入css
import "./main.css";
var div = document.getElementById("app");
...
- 使用css
- 在html中直接使用；
- 在js中操作使用；
import "./main.css";
var div = document.getElementById("app");
div.innerText = "这是来自JS的操作";
div.class="mycss";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>目前还是webpack</title>
</head>
<body>
<div id=app class="mycss"></div>
</body>
</html>
- 测试
- 配置一个不打包指令
{
"name": "webpack_vue_demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"run": "webpack-dev-server --config=config/webpack.dev.conf.js --open",
"build": "webpack --config=config/webpack.dev.conf.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^3.2.0",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.0.0"
}
}
-
css-loader使用项目工程截图
使用loader把css插入html
- css-laoder只负责加载，不负责插入到html，要想使css作用与html，需要使用style-loader插入到html
步骤
- 安装模块
- 在webpack配置
- 测试
操作
- 安装
-
style-loader安装
-
- 配置
module: {
rules:[
{ // 加载规则
test: /\.css$/, // 文件名匹配
use: [ // 加载器
"style-loader",
"css-loader"
]
}
]
},
- 注意：
- style-loader一定配置在css-loader前面；
- 插件输出的html文件是看不到style的，最终运行的页面中插入（js脚本动态插入的）
- 测试：
-
测试效果截图
-
- 最终css脚本会部署到web服务器。所以项目组织的时候，还是需要放在部署目录中的。
使用extract-text-webpack-plugin打包css
- 安装
- webpack4.0的安装需要新版本
@next -
extract-text-webpack-plugin安装
- webpack4.0的安装需要新版本
- 加载插件
var extract_text_webpack_plugin = require("extract-text-webpack-plugin");
- 在module中配置规则
module: {
rules:[
{ // 加载规则
test: /\.css$/, // 文件名匹配
use: extract_text_webpack_plugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
- 配置插件
plugins: [
new html_webpack_plugin(html_webpack_plugin_config), // 设置插件
new extract_text_webpack_plugin("my.css"),
],
- 测试
- 编译以后的结果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>目前还是webpack</title>
<link href="my.css" rel="stylesheet"></head>
<body>
<div id=app class="mycss"></div>
<script type="text/javascript" src="index.js"></script></body>
</html>
- 生成的css文件
-
生成的css
- 启动服务器，运行效果一样的。
使用file-loader解决图片文件打包
- file-loader的官网地址：
https://www.webpackjs.com/loaders/file-loader/
操作
- 安装file-loader
-
file-loader安装
-
- 配置图像打包
module: {
rules:[
{ // 加载规则
test: /\.css$/, // 文件名匹配
use: extract_text_webpack_plugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.png$/,
use: {
loader: "file-loader",
options:{
name: "[name].png",
outputPath: 'imgs/'
}
}
}
]
},
- 使用fileloader加载图像
import img from "./logo.png" // 返回的是经过file-loader打包的路径
- 使用图像
- 在Javascript中使用
div.style="background-image: url("+img+");";
- 在html中使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>目前还是webpack</title>
</head>
<body>
<div id=app class="mycss"></div>
<img src="./imgs/logo.png">
</body>
</html>
- 测试：
- 编译结果
-
编译结果
-
- 编译结果
- 运行结果
-
运行结果
-
使用url-loader实现图像编码
- url-loader主要把图像编码成base64.
- 使用url-loader后，就不要使用file-loader了，否则base64图像就无法正常显示，因为png与base64格式的显示方式不同；
- base64是直接使用js脚本插入显示的位置；
- 图像文件是用url地址显示；
操作
- 安装
-
url-loader安装
-
- 配置
- 因为上面已经使用图像，所以这里直接配添加一个url-loader
- 为了简略，直接在图像规则中
module: {
rules:[
{ // 加载规则
test: /\.css$/, // 文件名匹配
use: extract_text_webpack_plugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.png$/,
use: [
// {
// loader: "file-loader",
// options:{
// name: "[name].png",
// outputPath: 'imgs/'
// }
// },
{
loader: "url-loader",
options: {
limit: 40960
/*
小于40K的就编码成base64，
还有一个fallback，其默认配置，超过的交给file-loader
*/
}
}
]
}
]
},
- 使用base64图像
import "./main.css";
import img from "./logo.png" // 返回的是经过file-loader打包的路径
var div = document.getElementById("app");
div.innerText = "这是来自JS的操作";
console.log(img);
div.style="background-image: url("+img+");";
var e_img = document.getElementById("img");
e_img.src=img;
- 注意：
- url-loader没有配置file-loader，超过文件尺寸会指定调用file-loader，但是文件名是随机生成或者hash生成。
- 可以把file-loader与url-loader用来处理不同的文件类型；
-
url-loader运行效果
使用html-loader对html模板化
- html-loader可以加载html文件到js脚本，从而可以拼凑多个html为一个html，实现一个模块化的完整页面。
- 这个功能与file-loader也基本上差不多，这里暂时不说明。
网友评论