Vue.js实战第十章笔记

最新推荐文章于 2023-02-23 15:06:35 发布

ss_veine

最新推荐文章于 2023-02-23 15:06:35 发布

阅读量282

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/ss_veine/article/details/87373278

本文深入探讨前端工程化概念，解析webpack如何处理模块依赖，实现代码合并、压缩及资源加载优化。通过实例演示webpack配置，包括加载器、单文件组件与vue-loader的使用，适合前端开发者进阶学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

10.1前端工程化与webpack
Virtual Dom并不是真正意义上的DOM，而是一个轻量级的JavaScript对象，在状态发生变化时，Virtual Dom会进行D
通常，前端自动化（半自动化）工程主要解决以下问题：

· JavaScript、CSS代码的合并和压缩。
· CSS预处理：Less、Sass、Stylus的编译。
· 生成雪碧图（CSS Sprite）。
· ES6转ES5.
· 模块化。

前端工程化工具webpack打包后的代码已经不只是你写的代码，其中夹杂了很多webpack自身的模块处理代码。在webpack的世界里，一张图片、一个css甚至一个字体，都成为模块（Module），彼此存在依赖关系，webpack就是来处理模块间的依赖关系的，并把它们进行打包。
举一个简单的例子，平时加载CSS大多通过标签引入CSS文件，而在webpack里，直接在一个.js文件中导入，例如：

import 'src/styles/index.css'

webpack的主要适用场景是单页面富应用（SPA）。SPA通常是由一个html文件和一堆按需加载的js组成，它的html结构可能会非常简单，比如：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta chartset="UTF-8">
    <title>webpack app</title>
    <link rel="stylesheet" href="dist/main.css">
</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" src="dist/main.js"></script>
</body>
</html>

ES6中有两个语法export和import，export和import是用来导出和导入模块的。一个模块就是一个js文件，它拥有独立的作用域，里面定义的变量外部是无法获取的。

//config.js
var Config = {
    version: '1.0.0'
};
export {Config};

或

//config.js
export var Config = {
    version: '1.0.0'
};

其他类型（比如函数、数组、常量等）也可以导出，例如导出一个函数：

//add.js
export function add(a,b){
    return a + b;
};

模块导出后，在需要使用模块的文件使用import再导入，就可以在这个文件内使用这些模块了。例如：

//main.js
import { config } from './config,js';
import { add } from './add.js';
console.log(Config);  //{ version: '1.0.0' }
console.log(add(1,1));  //2

以上几个示例中，导入的模块名称都是在export的文件中设置的，也就是说用户必须预先知道这个名称叫什么。而有时候，用户不想去了解名称是什么，只是把模块的功能拿来使用，或者想自定义名称，这是使用export default来输出默认的模块。例如：


//config.js
export default {
    version: '1.0.0'
};
 
//add.js
export default function(a,b) {
    return a + b;
};
 
//main.js
import conf from './config.js'
import Add from './add.js'
console.log(conf );  //{ version: '1.0.0' }
console.log(Add(1,1));  //2

如果使用npm安装了一些库，在webpack中可以直接导入

import Vue from 'vue';//导入vue库
import $ from 'jquery';//导入Jquery库

10.2webpack基础配置
10.2.1安装webpack与webpack-dev
安装前确保安装了node.js和npm。使用npm初始化配置。

npm init  //初始化配置
npm install webpack –save-dev   //本地局部安装webpack
npm install webpack-dev-server  –save-dev   //本地局部安装webpack-dev-server，它可以在开发环境中提供很多服务，比如启动服务器、热更新、借口代理等。

10.2.2 就是一个js文件而已
归根到底，webpack就是一个.js配置文件。webpack配置中最重要也是必选的两项就是入口（Entry）和出口（Output）。入口的作用是告诉webpack从哪里开始寻找依赖，并且编译，出口则用来配置编译后的文件储存位置和文件名。

var path = require('path');
var config = {
    entry: {//入口配置
        main: './main'
    },
    output: {//打包输出目录
        path: path.join(_dirname, './dist'),
        publicPath: '/dist/',
        filename: 'main.js'
        }
};
module.exports = config;

10.2.3 逐步完善配置文件
在 webpack 的世界里，每个文件都是一个模块，比如css、 .js、 .html、 .jpg、 .less 等。对于不同的模块，需要用不同的加载器（Loaders）来处理，而加载器就是 webpack 最重要的功能。通过安装不同的加载器可以对各种后缀名的文件进行处理，比如现在要写一些 css 样式，就要用到 style-loader 和 css-loader。下面就通过NPM 来安装它们：

npm install css-loader --save-dev 
npm install style-loader --save-dev

安装完成后，在 webpack.config.js 文件里配置 Loader，增加对.css 文件的处理：

var config={
	// ...
	module:[
		rules:[
			{
				test:/\.css$/,
				use: [
					'style-loader',
					'css-loader'
					]
			}
		]
	]
}

10.3 单文件组件与vue-loader
Vue.js是一个渐进式的js框架，在使用wewbpack构建Vue项目时，可以使用一种新的构建模式：.vue单文件组件。就是一个后缀名为.vue的文件，在webpack中使用vue-loader就可以对.vue格式的文件进行处理。一个.vue文件一般包含3部分，即、