Vue.js实战—使用webpack

最新推荐文章于 2025-07-01 10:37:12 发布

ycflymoon

最新推荐文章于 2025-07-01 10:37:12 发布

阅读量335

点赞数

CC 4.0 BY-SA版权

分类专栏：学习心得

本文链接：https://blog.youkuaiyun.com/u011229269/article/details/86711262

学习心得专栏收录该内容

13 篇文章

订阅专栏

本文深入探讨前端工程化概念，重点介绍webpack如何处理模块依赖，实现代码压缩、CSS预处理等功能，适用于单页面富应用的开发场景。

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

1.1 前端工程化与webpack

通常，前端自动化（半自动化）工程主要解决以下问题：

· JavaScript、CSS代码的合并和压缩。

· CSS预处理：Less、Sass、Stylus的编译。

· 生成雪碧图（CSS Sprite）。

· ES6转ES5.

· 模块化。

前端工程化工具webpack打包后的代码已经不只是你写的代码，其中夹杂了很多webpack自身的模块处理代码。在webpack的世界里，一张图片、一个css甚至一个字体，都成为模块（Module），彼此存在依赖关系，webpack就是来处理模块间的依赖关系的，并把它们进行打包。

举一个简单的例子，平时加载CSS大多通过<link>标签引入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，是用来导出和导入模块的。一个模块就是一个js文件，它拥有独立的作用域。里面定义的变量外部是无法获取的。比如将一个配置文件作为模块导出：

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

或

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

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

//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(Config);  //{ version: '1.0.0' }
console.log(add(1,1));  //2

1.2 就是一个js文件而已

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

var path = require('path');

var config = {
    entry: {
        main: './maim'
    },
    output: {
        path: path.join(_dirname, './dist'),
        publicPath: '/dist/',
        filename: 'main.js'
        }
};

module.exports = config;