Vue.js- webpack 详解

最新推荐文章于 2024-05-11 16:24:32 发布

guardwhy

最新推荐文章于 2024-05-11 16:24:32 发布

阅读量2.7k

点赞数 12

分类专栏： # Vue.js

本文链接：https://blog.csdn.net/hxy1625309592/article/details/116235132

版权

1.1 什么是Webpack？

从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。

前端模块化

在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发。
并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。
而webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。
而且不仅仅是JavaScript文件，CSS、图片、json文件等等在webpack中都可以被当做模块来使用。

打包

就是将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)。
并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。

webpack安装

安装webpack首先需要安装Node.js，Node.js自带了软件包管理工具npm。NPM官方的管理的包都是从 http://npmjs.com下载的，但是这个网站在国内速度很慢。这里推荐使用淘宝 NPM 镜像 http://npm.taobao.org/ ，淘宝 NPM 镜像是一个完整npmjs.com 镜像，同步频率目前为 10分钟一次，以保证尽量与官方服务同步。

设置镜像和存储地址：

# 由于npm代码仓库的服务器在国外，由于Great Firewall的缘故,这时可以使用淘宝的npm代码仓库，通过npm安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 安装成功后，可以通过以下命令查看cnpm版本：
cnpm -v
#设置npm下载包时保存在本地的地址(建议英文目录),通过cnpm来操作下载速度会得到很大提升，但包的版本不一定是最新的。
cnpm config set prefix "E:\\Develop\\repo_npm"
#查看cnpm配置信息
cnpm config list

查看自己的node版本

node -v

全局安装webpack(这里我先指定版本号3.6.0，因为vue cli2依赖该版本)

cnpm install webpack@3.6.0 -g

查看webpack版本

webpack --version

1.2 Webpack 初体验

项目目录

文件和文件夹解析：

dist文件夹：用于存放之后打包的文件。
src文件夹：用于存放我们写的源文件
- main.js：项目的入口文件。具体内容查看下面详情。
- mathUtils.js：定义了一些数学工具函数，可以在其他地方引用，并且使用。
index.html：浏览器打开展示的首页html，package.json：通过npm init生成的，npm包管理的文件。

mathUtils.js

function add(num1, num2) {
   
  return num1 + num2
}

function mul(num1, num2) {
   
  return num1 * num2
}

// 模块导出
module.exports = {
   
  add,
  mul
}

info.js

// 导出模块
export const name = 'GuardWhy';
export const age = 18;
export const height = 1.71

main.js

// 1. 使用commonjs的模块化导入
const {
   add, mul} = require('./mathUtils')

// 输出结果
console.log(add(20, 30));
console.log(mul(20, 30));

// 2.使用es6的模块化规范
import {
   name, age, height} from "./info";

console.log(name);
console.log(age);
console.log(height);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>webpack基本使用</title>
</head>
<body>
<!--引入js文件-->
<script src="dist/bundle.js"></script>
</body>
</html>

webpack的指令打包

webpack src/main.js dist/bundle.js

使用打包后的文件

打包后会在dist文件下，生成一个bundle.js文件
bundle.js文件，是webpack处理了项目直接文件依赖后生成的一个js文件，只需要将这个js文件在index.html中引入即可。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>webpack基本使用</title>
</head>
<body>
<!--引入js文件-->
<script src="dist/bundle.js"></script>
</body>
</html>

执行结果

1.3 webpack的配置

项目目录

配置文件

webpack.config.js

// 1.获得路径
const path = require('path');

// 支持导出
module.exports = {
   
  entry: './src/main.js',
  output: {
   
    path: path.resolve(__dirname,'dist'),
    filename:'bundle.js'
  },
}

局部安装webpack

因为一个项目往往依赖特定的webpack版本，全局的版本可能很这个项目的webpack版本不一致，导出打包出现问题。
所以通常一个项目，都有自己局部的webpack。

cnpm install webpack@3.6.0 --save-dev

配置package.json

打开项目的命令所在位置，执行npm init命令，可得到package.json文件，可以在package.json的scripts中定义自己的执行脚本。

{
   
  "name": "guardwhy",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
   
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "guardwhy",
  "license"

最低0.47元/天解锁文章

guardwhy

关注

12
点赞
踩
74

收藏

觉得还不错? 一键收藏
14
评论
Vue.js- webpack 详解

1.1 什么是Webpack？从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。前端模块化在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发。并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。而webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。而且不仅仅是JavaScript文件，CSS、图片、json文件等等在webpack中都可以被当做模块
复制链接

扫一扫