vue进阶篇- 使用webpack

一、前段工程化与webpakc
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

在这里插入图片描述

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
webpack的主要使用场景是单页面富应用（spa）。spa通常是由一个html文件和一堆按需加载的js组成，如：

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

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’;
import{ add } from './add.js';

console.log(Config);//{version : '1.0.0'}
console.log(add(1,1));// 2

如何使用npm安装了一些库，在webpack中直接导入，如：

 import Vuefrom  'vue';
 import $ from 'jquery';

二、webpack 基础配置

安装webpack 与 webpack-dev-server
创建目录
npm init //初始化配置
npm install webpack --save-dev //本地局部安装webpack
npm install webpack-dev -server – save-dev //安装 webpack-dev-server, 可以在开发环境提供很多服务，比如启动服务器，更新、接口代理等
2、就是一个js 文件而已
首先在目录demo 下创建一个js 文件 webpack.config.js,并初始化内容；
var config = {

}；

module.exports = config;

Webpack中最重要的两个必选项就是说入口(Entyr)和出口(Output)。入口的作用是webpack从哪里开始寻找依赖，并编译。出口是配置编译后的文件存储位置和文件名。

vue进阶篇- 使用webpack

猜你喜欢